Add A Transparent Notification Bar To Your Blog

Become a guest author on Create the Blogger.

Many Popular blogs use a notification bar to show a News feed and latest content because it attracts your visitors attention.You can add a link to a featured post, your Rss feed, social profile or an affiliate offer.So here I will show you how to add an awesome notification bar with close button.Its very simple and looks very cool.You can use it on a blogger blog and wordpress blog or even in your websites.

Add The Transparent Notification Bar To Blogger

Remember Always Back Up Your Template Before You Make Changes!

Step 1. In Your Blogger Dashboard Click Design > Edit Html 

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code):

</body>

Step 3. Copy and Paste the following code Directly Above / Before </body>

<!-- Notification code start -->
<style type='text/css'>
#ut-sticky
{background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLibyMdyqFYjuhHLwP3HLB3cZUJEzPpKn-RZ2vrSqn4cMIqybukhmGgKZBJrbe0ay5TfuWc9s9R-XnkJ9SNwrAQg-WijwgUAEWfR0qIMBC7DbWr8D80HPMELdiNxTcl2Ysu1fqlWe6hixs/s1600/ut-bg.png&#39;) repeat; 

color:#fff;

text-align: center;margin:0 auto; 

border-top: 1px solid #fff;

height:28px; 
font-size:13px; 
position:fixed; 
bottom:0; 
z-index:999; 
width:95%;
border-top-left-radius:15px;
border-top-right-radius:15px; 
display:block;
font-weight: bold;
font-family: arial,&quot;Helvetica&quot;;

font-color:#fff;

}
#ut-sticky:hover
{background:#333;}
#ut-sticky p{line-height:5px; font-size:13px; text-align:center; width:95%; float:left;}
#ut-sticky p a{ text-decoration:underline; color:#FFFF33;}
.ut-cross{display:block; position:relative; right:15px; float:right;}
.ut-cross a{font-size:18px; font-weight:bold; font-family:&quot;Arial&quot;;color:#FF0000; line-height:30px;}
</style>
<div id='ut-sticky'>
<p>Add This Transparent Notification Bar To Your Blog <a href='http://www.createtheblogger.blogspot.com' target='_blank'>Transparent Notification Bar</a></p>
<div class='ut-cross'><a href='javascript:hide_cross();'>X</a></div>
</div>
<script language='JavaScript'>
function hide_cross() {
crosstbox = document.getElementById(&quot;ut-sticky&quot;);
crosstbox.style.visibility = &#39;hidden&#39;;
}
</script>
<!-- End of Notification code, info - http://www.createtheblogger.blogspot.com -->

How to change color and Notification Message.

In this code i have chosen such a color combination so that its looks transparent and whenever you take your mouse on this bar it become more visible.

Change Message - The message and link are highlighted in red above, change as required.

Drop Your Comments Below.