How to Add A Transparent Notification Bar To Blogger

Hello Friends ! Here i am with an anther blogger tutorial of great transparent notification bar. You can use it to notify your readers with something like latest articles direct link , social profiles links, or an affiliate offer or anything you like. this notification bar will be appear at the footer of the blog with fixed position and also there a close button will be available if your blog readers want to get rid from the notification bar then they can close it easily by clicking on close button.

Also see : Recommended Posts Slide out Widget Generator

This great notification bar was created by blogger master Paul Crowe (Spice up Your Blog)and also he shared the same tutorial on their blog as well. and here i would like to re-share with my readers. but before we go through tutorial we should say thanks to the paul crowe for the beautiful notification bar. :)

View Demo

Here is the simple procedure to follow to get this transparent notification bar to blogger.
Go to blogger dashboard > Template > Edit HTML then search for </body> tag ( using CTRL + F )
Now, copy and paste below code just above it.

<!-- Notification code start -->
<style type='text/css'>
#ut-sticky
{
background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-9cKDHdafOySD6XDx2qSBSgyODjSobgoTF7SftoB_XLqkgSc7WDKp9HAZDwmU8w4qGuHa-2Bx1cYV6pF7hOJ6yykvnb713ZQxxyMeL0pH8-Yo3chiajVQBqwGg9fEQHgsFeTp2m0GhW0q/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.bloggerwidgetgenerators.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.bloggerwidgetgenerators.com -->

You are fully enable to change background color by editing with CSS.
To change Message and link you can edit red colored line above.
To change any color , you can edit blue colored code above .

use our color code generator to find code for any color instantly.

Drop your comments and questions below. :)

Add Comment

Quicker BD