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('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;}
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 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 »
Mohammad
9/09/2011
blogger tricks
,
Widgets
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^^
@john
ReplyDeletePhotoshop bro. Read this post -> Photoshop basics
@beben
Thanks beben for those new custom styles. :)
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?
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??
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
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
It looks like "HelloBar". What is the difference between this bar and hellobar?
ReplyDeletebro some Sticky bars are removable but............not for this ?how to keep onto mark into it
ReplyDeleteMohammad 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?
ReplyDeleteHow can use Transparent Background
ReplyDeletehow to add two links like in your blog with seperator
ReplyDeleteI want To Add This But Not The One You Have Provided I want Exactly Same As Yours
ReplyDeleteYour just the best. This worked perfectly on my blog. Thanks for The Tip off............ http://softcreatives.blogspot.com
ReplyDeleteBRO I NEED THE SNOW FALLING CODE..! PLZ BRO GIVE ME...!
ReplyDeleteMohammad, do you think I could remove the standard "cookies bar" and add this one with the same information?
ReplyDeleteI see many pages displaying the cookies message on the footer, and it looks less intrusive :)