New Published Post: How To Fix Adsense Not Showing After Redirecting Blogger To Custom Domain
Like Us:
Facebook



How to Add Sticky Bar In Blogger


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.
add sticky bar in blogger


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('http://3.bp.blogspot.com/-zQeUG7PU9Uw/TmkiptyZ1eI/AAAAAAAAE98/At4tRBC9HQc/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=' http://4.bp.blogspot.com/-D7pGcSyvGyk/UmYnJTV8WzI/AAAAAAAAB2g/e31HeDy3evw/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.
About the Author:
tilt  hover effect
Hello folks! This is Viral Apps, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
Follow him @ Twitter |Facebook

No comments :

Post A Comment!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

Cerwenlloyd Gefjun

Related Posts Plugin for WordPress, Blogger...