How to Add Sticky Bar In Blogger

One way of replacing your Blogger navigation bar is through adding a sticky bar on it.You can also add sicky bar in your blogger blog  if you want to show or notify  visitors of  recent and upcoming posts, offers, coupons or even  latest news and happenings. You can even add your RSS link there and ask you visitors to subscribe to your blog. Today, in this tutorial  we will create such a sticky bar widget with simple texts and image. See the demo first above to have an overview of what we are trying to accomplish.

Make a Sticky Bar In Blogger

Step 1. Go To Blogger > Template > Edit HTML (have a back-up of it)
Step 2. Search for the code below,

]]></b:skin>

Step 3. Just above that code in Step 2, paste the CSS code below,

#btt-stickybar{
background:#158aee url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgohQA1YneFrQMXqBeEE24C1ZAvEOpxsPRA6MvXS_jZs5M1F8_YP_iPILKvNbyDsNk4dZ2xmFqPfawIKR720a19C7BC3oOG-rYT36sbKzlppxacAWLKS7MnAnPe4IyAnpNumKhN-b1ZoH8/s400/stickybar.png') repeat-x;
width:100%;
margin:0 auto;
text-align:center;
padding:0px 0;
border-bottom: 1px solid #888888;
  -moz-box-shadow: #666666 0px 1px 3px;
  -webkit-box-shadow: #666666 0px 1px 3px;
  box-shadow: #666666 0px 1px 3px;
  z-index: 999;
height: 28px; position:fixed;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
}
#btt-stickybar a{
text-decoration:none;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: arial,"Helvetica",sans-serif;
line-height: 24px;
}
#btt-stickybar a:hover{
text-decoration:underline;
}
#btt-stickybar p {margin:0; list-style:none;}
#btt-stickybar img {vertical-align: middle;
      margin-right: 6px;}

Short Customization:

• To change the background color of your stickybar, simply change 158aee with your desired hexadecimal color. You may use our color code generator.

Step 4. Now look for the code below,

</head>

Step 5. And just below that code in step 4, place the code below,

<div id='btt-stickybar'><a href='http://www.bloggingtipsandtrix.blogspot.com' style='margin-top:1px; margin-left:7px; color:#666666; float:left;' target='_blank'><img src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnGlgl709fygIOMZETbz8L4PK1Cj9CBRPzSCs2WyjZCqLeOOirt_sJ7390oAGHoVwW_n0LXD4Mw6FvewHTk1UWa-5BIBgxGG_tldtZKsRSHMbHMfJU90Hsn5KSzfAs56yO10yErO5lPAQ/s1600/blogger+sticky+bar.png  '/></a>
<strong><font color='#F906AC'>Recent Event: </font></strong>
<a href='#'>HOME </a>
<strong><font color='#DF013A'>Upcoming Post: </font></strong>
<a href='#'>Contact Us</a>
<strong><font color='#FFFF00'>Stay Connected: </font></strong>
<a href='# '>See My Sitemap</a>
</div>

Short Customization:

• Replace the image link in bold blue text with your own logo image link. Click here on how to get the  URL of your uploaded image in Blogger.
• F906AC, DF013A and FFFF00 are the colors of the "Recent Event", "Upcoming Post" and Stay Connected". You may change the hexadecimal colors by clicking this link and the words respectively.

Step 6. Save your Template and Congrats! : =)
Thank You and hope that you like this little innovation from the codes of MBT.