Top Sticky / Fixed Notification Bar with Close Button for Blogger

novels · 07 May 2013

You can suggest featured content to visitors by placing a top fixed notification bar to your Blogger blog within a minute or two. This bar attracts the attention of visitors very strongly and thus helps in reducing bounce rate of your blog. Secondly, this bar shows manually specified links, so you can add or remove links to it manually according to your needs. I am also using this bar here on this blog, you can see it action at top of this page. To add this notification floating or sticky bar to your Blogger blog, follow below instructions.

How to Add Sticky Top Bar to Blogger

1. Log in to Blogger dashboard and choose your blog
2. Go to template section of the blog and edit its HTML
3. Now find ]]></b:skin> by pressing Ctrl+F
4. Paste below CSS code just above ]]></b:skin>

#sh_bar{
background: #232323;
width:100%;
margin:0px auto 0px auto;
text-align:center;
padding:5px 0 5px 25px;
box-shadow: #666666 0px 1px 3px;
z-index: 9998;
height: 27px;
position:fixed;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
text-decoration:none;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: Helvetica, sans-serif;
line-height: 24px;
border-top:1px solid #000;
border-bottom: 2px solid rgb(255, 255, 255);
}
#sh_bar a{
text-decoration:underline;
color:#FFFC00;
font-size:12px;
font-weight:bold;
font-family: verdana, arial,"Helvetica",sans-serif;
line-height: 24px;
}
#sh_bar a:hover{
text-decoration:underline;
}
#sh_bar p {margin:0; list-style:none;}
#sh_bar img {vertical-align: middle;
margin-right: 6px;}
#blog-pager, .pagenavi {
clear: both;
text-align: center;
margin: 30px auto 10px;
}

5. Now find </head> by pressing Ctrl+F again and paste below script just above </head>

6. Lastly, find <body> (or only <body in some templates) and paste following code just below <body> line

<div id='sh_bar'><font style='color:#FFFC00;'/><blink>Text to display</blink>
<a href='yourlink' rel='nofollow'>Anchor Text</a>
<span style='padding:0px 0px 0px 6px; margin:0px;'>
<img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijk2Qi-txHwoMwc0Rk3L-1z_w1QHDEws6c_lzv2fiqGdHKq-H4bUd-9nHSUaDQY6Nknh4QKRsUx9hUSqqPwltddaLkCsiM7waE97O1gH2qD_7uJG8I1sG6DNsjQhdEmG7pDGXEyBEJSMUz/s400/cancel.png' style='cursor:hand;cursor:pointer;'/></span></div>
<br/><br/>

7. Customize highlighted values and save your template. You are all done! (Note: If you want the static text instead of blinking text, remove yellow highlighted code pieces)

Need any further help? Just leave a comment below. I'll help you in adding this bar if you can't do it by your own.