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 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{
background:#0080ff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv1J2kG9k9STf5uBX0UlWGL-x17mQM_VbalJoco8g56-5QjHf2XopUjYcm_QppZzlnG8uZPcWZqzpoY6kshRUppmDcwuDKjMC1KPZslFQ09WExpHEtAG_rzFYYPx5OnN6-_FTTmYiGMPQ/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 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.
No comments:
Post a Comment