You 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.- Add Facebook and Google+ buttons to StickyBar
- Add a StickyBar at Bottom of your page
- Add a Close Button To Stickybar
Add Sticky Bar To Blogger
- Go To Blogger > Design > Edit HTML
- Backup your template
- Search for this,
]]></b:skin>
4. Just above it paste the CSS code below,
#mbt-stickybar{To change the background colour of the bar then simply change this #0080ff Use our Color code generator for doing this.
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;}
5. Next search for this code
<body>6. Just below it paste the following code,
<div id='mbt-stickybar'>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.
<a href='#'>ADD TEXT HERE</a>
</div>
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'>Simply replace IMAGE LINK with the URL of your image, picture etc.
<img src='IMAGE LINK'/><a href='#'>ADD TEXT HERE</a>
</div>
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 enjoyed this post and wish to be informed whenever a new post is published, then make sure you
Subscribe to our regular Email Updates!
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 »
Assalamu'alaikum
ReplyDeleteNice Sir, i will try it.
hey another nice article ,
ReplyDeleteBro were do u get these beautiful pics
all...you can variety with this atribute on #mbt-stickybar
ReplyDeletejust add it...
position: fixed;
hihihi...
Cheers^^
just share for other style ;)
ReplyDeletestep 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>
@john
ReplyDeletePhotoshop bro. Read this post -> Photoshop basics
@beben
Thanks beben for those new custom styles. :)
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...
ReplyDeleteMarketing Plan
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.
ReplyDeletehello 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
ReplyDeletethat that (add text) i'm getting the error what is the sollution?
same problem is missing what to do??
ReplyDeletehttp://picsplazza.blogspot.com
Done Voted on PakistanBlogAwards <3 may u'll win Mustafa bhai.INSHAALLAH
ReplyDeletereally great one, i liked it.
ReplyDeletewhin 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??
body code is missing what to do??
ReplyDeletewww.x9wallpapers.com
i want add facebook like box just like you did to your blog ! plase share that cod with us ! Thanks_
ReplyDeleteGreat, I was looking for this!
ReplyDeleteBut 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?
Hello Mohammad,
ReplyDeleteEven i am facing same problem as our friend David is facing. Kindly provide us a solution!
Can you kindly attach a screenshot so that I may now? David's screenshot is not working.
ReplyDeleteYou 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
@Mohammad Mustafa Ahmedzai
ReplyDeleteThanks 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.
My problem is a bit different from @Hetal Patil Rawat because my space only appears on Firefox
ReplyDeletemy link for you to check is http://www.Ganha-Facil.com
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.
ReplyDeletePlease have a look at my other blog too: Devotees Experiences with Shirdi Sai Baba
It looks like "HelloBar". What is the difference between this bar and hellobar?
ReplyDeletesticky bar is not appearing on my blog :((
ReplyDeletewww.x9wallpapers.com
Make a Sticky Bar with FeedsSubscriber Box for your Blog
ReplyDeletehttp://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
For those of you who are having problems locating the body tag you can find this code instead body <body expr:class='"loading" + data:blog.mobileClass'> after you have search for that code immediatley after that line place the <div id='mbt-stickybar'>
ReplyDelete<a href='#'>ADD TEXT HERE</a>
</div> just like what I did on my blog at http://filmsforfree.blogspot.com
bro some Sticky bars are removable but............not for this ?how to keep onto mark into it
ReplyDelete@Mohammad Mustafa Ahmedzai
ReplyDelete@Mohammad Mustafa Ahmedzai
image of the error
http://2.bp.blogspot.com/-ipk6G_9LklQ/T8CYIhAU-VI/AAAAAAAAAaA/AeXTADQfGe4/s1600/dddd.png
Mohammad Mustafa Ahmedzai...
ReplyDeleteThe 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).
bro how can i have this bar in the bottom?
ReplyDeletegreat!
ReplyDeletea2-studios.blogspot.com
Cricket gaming Mods & Patches (IPL5 Patch)
How can use Transparent Background
ReplyDeletehow to add two links like in your blog with seperator
ReplyDeleteThanks a lot. Looking for This one.
ReplyDeleteCheck out Desktop Customerizing Softwares Free
Frnds Also try this one
ReplyDeleteAdd a Roseic Sticky Bar in Blogger (Same Like as Hello Bar)
I want To Add This But Not The One You Have Provided I want Exactly Same As Yours
ReplyDelete