Blogging Ethics

MBT Tube

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,
]]></b:skin>
4.  Just above it paste the CSS code below,
#mbt-stickybar{
background:#0080ff 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;
}
#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 »

34 comments : Post Yours! Read Comment Policy ▼
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. just share for other style ;)

    step number 4

    <style>
    #mbt-stickybar {
    left:0;
    top:0;
    margin:0;
    z-index:1;
    position:fixed !important;
    background:#0099FF;
    width:100%;
    border-right:0;
    border-left:0;
    border-top:0;
    font-size:13pt;
    font-family:Verdana;
    font-weight:700;
    color:red;
    border:1px solid #0000FF;
    border-top:0;
    border-left:0;
    border-right:0;
    padding:3px 0 3px 5px;
    }
    </style>

    step number 5 & 6

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

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

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

    ReplyDelete
  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

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

    ReplyDelete
  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?

    ReplyDelete
  9. same problem is missing what to do??
    http://picsplazza.blogspot.com

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

    ReplyDelete
  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??

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

    ReplyDelete
  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:

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

    could you help me?

    ReplyDelete
  14. Hello Mohammad,

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

    ReplyDelete
  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

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

    ReplyDelete
  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 http://www.Ganha-Facil.com

    ReplyDelete
  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

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

    ReplyDelete
  20. sticky bar is not appearing on my blog :((
    www.x9wallpapers.com

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

    http://www.fblatest.in/2012/01/make-sticky-bar-with-feed-subscriber.html

    If u like this post then please subscribe our feeds for daily updates.
    http://feeds.feedburner.com/fblatest/nflb

    ReplyDelete
  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 http://filmsforfree.blogspot.com

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

    ReplyDelete
  24. @Mohammad Mustafa Ahmedzai

    @Mohammad Mustafa Ahmedzai

    image of the error

    http://2.bp.blogspot.com/-ipk6G_9LklQ/T8CYIhAU-VI/AAAAAAAAAaA/AeXTADQfGe4/s1600/dddd.png

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

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

    ReplyDelete
  27. great!

    a2-studios.blogspot.com
    Cricket gaming Mods & Patches (IPL5 Patch)

    ReplyDelete
  28. How can use Transparent Background

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

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

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

    ReplyDelete

Widgets + Web Designing

Workshops

SEO Mashup