Scroll to the bottom of this demo page to see it:
Add Notification bar to Blogger
- Go To Blogger > Design > Edit HTML
- Backup your template
- Search for this,
]]></b:skin>
4. Just above it paste the follow code,
#bm-stickybar{
background:#FF0000 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;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 color of the sticky bar, simply change #FF0000 with any hexadecimal color of your choice. Try our color chart.
5. If you wish to add the bar above header then search for this code
<body>
else if you wish to add the bar below footer then search for this code
</body>
and Just below it paste the following code,
<div id='bm-stickybar1'>
<div style='float:left; width:400px;'>
<a href='#'>Receive Free Updates Via Email. Subscribe Now!</a>
</div><div style='float:right; width:300px;'>
<table style='margin:0; padding:0;'>
<tr>
<td>
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='BLOG LINK' layout='button_count' send='false' show_faces='false' width='80'/>
</td>
</tr>
</table>
</div>
</div>
Replace with your RSS link
6. Save your template and you are all done!
Confused? Feel free to ask
0 comments:
Post a Comment