Make Sticky Bar For BlogSpot



sticky barYou can add sticky notification bar in blogger blogs by showing the bar either at the top of header or just below the footer. A sticky bar can is now used widely by all blogs and sites(mashable for instance) for notifying visitors of important updates, offers, coupons and latest news. You can even add your RSS link there and ask you visitors to subscribe to your blog. In this tutorial I will try to keep things simply and will share how to create such a sticky bar widget with simple text and image. I have added drop shadow effects to it using CSS3. The widget is compatible with all browsers. View the demo below and on the demo page scroll to the top to see the bar.





Live Demo

Add Sticky Bar To Blogger

  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Search for this,
]]></b:skin>
4.  Just above it paste the CSS code below,
#mbt-stickybar{
background:#0080ff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWSKHztZpc_tpuh9BHXOkpRMI6JKUmyTr-xFPkOtFICCgbCM-Yk0y67cYXy8Jo2qHlJMlN2kf_HCx9ZBkseN600AqXCeJMfwC_iiP2AP5nWoXgnAthO1xofdYdRY2xM_iEhMTbUZidVN4/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;
}
#mbt-stickybar a{
text-decoration:none;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: arial,"Helvetica",sans-serif;
line-height: 24px;
}
#mbt-stickybar a:hover{
text-decoration:underline;
}
#mbt-stickybar p {margin:0; list-style:none;}
#mbt-stickybar img {vertical-align: middle;
      margin-right: 6px;}
To change the background colour of the bar then simply change this #0080ff  Use our Color code generator for doing this.    
5.  Next search for this code
<body>
      6.  Just below it paste the following code,
<div id='mbt-stickybar'>
<a href='#'>ADD TEXT HERE</a>
</div>
Now replace # with your text link (can be your RSS link, important post link etc.) and ADD TEXT HERE with anything you wish to write.
      7.    Save your template and bingo you are done! :)
If you wish to add an image next to the link of text just like the one in the demo page, then use this code instead of the one shared in Step#6,
<div id='mbt-stickybar'>
<img src='IMAGE LINK'/><a href='#'>ADD TEXT HERE</a>
</div>
Simply replace IMAGE LINK with the URL of your image, picture etc.

Advance versions

In my coming posts I will be sharing more on this topic. We will also learn how to add plugins like FB Like and G+ buttons. We will also learn how to add this sticky bar to the bottom of your blog homepage, how to hide it on specific pages and how to add a close button to it. So it would be great fun trying new versions. Kindly let me know if you needed any further help.

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

23 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Assalamu'alaikum
    Nice Sir, i will try it.

    ReplyDelete
  2. hey another nice article ,
    Bro were do u get these beautiful pics

    ReplyDelete
  3. all...you can variety with this atribute on #mbt-stickybar

    just add it...

    position: fixed;

    hihihi...

    Cheers^^

    ReplyDelete
  4. @john
    Photoshop bro. Read this post -> Photoshop basics

    @beben
    Thanks beben for those new custom styles. :)

    ReplyDelete
  5. Nice work here, thanks very much it worked. But how do i make the width match with my blog, the sticky bar is longer than my blog width.

    ReplyDelete
  6. hello Brother my Site won't show the < bo dy > tag cz that templt is prvded by blogger so where to add this coding !~! when i try to instr
    that that (add text) i'm getting the error what is the sollution?

    ReplyDelete
  7. Done Voted on PakistanBlogAwards <3 may u'll win Mustafa bhai.INSHAALLAH

    ReplyDelete
  8. really great one, i liked it.
    whin i click on the sticky bar it opens in the same window, what changes should i made in the code to open the link in a new tab??

    ReplyDelete
  9. i want add facebook like box just like you did to your blog ! plase share that cod with us ! Thanks_

    ReplyDelete
  10. Great, I was looking for this!

    But I can't remove the space between the bar and the top of the site, look at this print:

    http://img593.imageshack.us/img593/692/20111201213937.jpg

    could you help me?

    ReplyDelete
  11. Hello Mohammad,

    Even i am facing same problem as our friend David is facing. Kindly provide us a solution!

    ReplyDelete
  12. Can you kindly attach a screenshot so that I may now? David's screenshot is not working.

    You can try reducing this element

    line-height: 1.85em;


    If this did not work then look into the body class of your CSS to see if you haven't set a margin Top property.

    Share the URL please of the blog where you add it. It makes easy to explain

    ReplyDelete
  13. My problem is a bit different from @Hetal Patil Rawat because my space only appears on Firefox

    my link for you to check is http://www.Ganha-Facil.com

    ReplyDelete
  14. It looks like "HelloBar". What is the difference between this bar and hellobar?

    ReplyDelete
  15. bro some Sticky bars are removable but............not for this ?how to keep onto mark into it

    ReplyDelete
  16. Mohammad Mustafa Ahmedzai...
    The sticky Bar looks so beautiful...
    But I have a litle problem with it.
    The position of Sticky Bar is in Left not in center. Can you tell me, how to fix it? I am using New Blogger template (HTML5).

    ReplyDelete
  17. bro how can i have this bar in the bottom?

    ReplyDelete
  18. How can use Transparent Background

    ReplyDelete
  19. how to add two links like in your blog with seperator

    ReplyDelete
  20. I want To Add This But Not The One You Have Provided I want Exactly Same As Yours

    ReplyDelete
  21. Your just the best. This worked perfectly on my blog. Thanks for The Tip off............ http://softcreatives.blogspot.com

    ReplyDelete
  22. BRO I NEED THE SNOW FALLING CODE..! PLZ BRO GIVE ME...!

    ReplyDelete
  23. Mohammad, do you think I could remove the standard "cookies bar" and add this one with the same information?

    I see many pages displaying the cookies message on the footer, and it looks less intrusive :)

    ReplyDelete