Other Related Sticky Bar..
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,
#bm-stickybar{
background:#0080ff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkGiT5sxXiPyYJ2M5FAxiH6iUMxIBEJ5GXBaOJp3uqZRadswCWT1cLPeNMY7xvlAhyphenhyphennUblR6JMcNZTI5DYjynOeSPLZZXmOZoiYQZ0s6gju4LvOTo1kmmBLzec3EvT7Jky5qhyphenhyphenmfrzhhw/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;
}
#bm-stickybar a{
text-decoration:none;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: arial,"Helvetica",sans-serif;
line-height: 24px;
}
#bm-stickybar a:hover{
text-decoration:underline;
}
#bm-stickybar p {margin:0; list-style:none;}
#bm-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='bm-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='bm-stickybar'>
<img src='IMAGE LINK'/><a href='#'>ADD TEXT HERE</a>
</div>
Simply replace IMAGE LINK with the URL of your image, picture etc.
Confused? Feel free to ask
0 comments:
Post a Comment