September 9, 2011

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,
4.  Just above it paste the CSS code below,
background:#0080ff url('') repeat-x;
margin:0 auto;
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{
font-family: arial,"Helvetica",sans-serif;
line-height: 24px;
#mbt-stickybar a:hover{
#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
      6.  Just below it paste the following code,
<div id='mbt-stickybar'>
<a href='#'>ADD TEXT HERE</a>
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>
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.

Need Quick Help within 24 Hours? ASK NOW

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 »

34 comments : Post Yours! Read Comment Policy ▼
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.

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

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

    just add it...

    position: fixed;



  4. just share for other style ;)

    step number 4

    #mbt-stickybar {
    position:fixed !important;
    border:1px solid #0000FF;
    padding:3px 0 3px 5px;

    step number 5 & 6

    <div id='mbt-stickybar'>
    Blah Bleh Bloh...What do you want to add...just add here!!!

  5. @john
    Photoshop bro. Read this post -> Photoshop basics

    Thanks beben for those new custom styles. :)

  6. It is a simple trick mound, still useful for newbie. I want little bit more so that we can add links from our wordpress dashboard. 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. Thanks for sharing...
    Marketing Plan

  7. 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.

  8. 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?

  9. same problem is missing what to do??

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

  11. 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??

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

  13. 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:

    could you help me?

  14. Hello Mohammad,

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

  15. 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

  16. @Mohammad Mustafa Ahmedzai

    Thanks for your reply.

    Here is the url of my blog where i have attached sticky bar Download Shirdi Sai Baba Bhajans Mp3 Artis.

    I have copied the code exactly as provided by you.

    I received jumbo pack of resources today. I am very much thankful to you.

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

    my link for you to check is

  18. For me its coming in almost all browsers. I tried this sticky bar in my another blog too and there some different error is coming. Page list in my upper most portion of blog is getting hidden due to this bar. The same problem persists in earlier blog too whose url is given in my first comment.

    Please have a look at my other blog too: Devotees Experiences with Shirdi Sai Baba

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

  20. sticky bar is not appearing on my blog :((

  21. Make a Sticky Bar with FeedsSubscriber Box for your Blog

    If u like this post then please subscribe our feeds for daily updates.

  22. For those of you who are having problems locating the body tag you can find this code instead body <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> after you have search for that code immediatley after that line place the <div id='mbt-stickybar'>
    <a href='#'>ADD TEXT HERE</a>
    </div> just like what I did on my blog at

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

  24. @Mohammad Mustafa Ahmedzai

    @Mohammad Mustafa Ahmedzai

    image of the error

  25. 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).

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

  27. great!
    Cricket gaming Mods & Patches (IPL5 Patch)

  28. How can use Transparent Background

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

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

  31. Your just the best. This worked perfectly on my blog. Thanks for The Tip off............


  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Where To Host?

    Find out what is the best place to host your blog and kick start your blog today!

  • SEO Settings for blogger


    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit Our Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!


    Learn what it takes to become a successful entrepreneur and build a living online!