Most of you liked the new sticky notification bar which is an important way of seizing visitor attention towards an important headline, news or any update or announcement you may wish to share. Today we will take a step further by adding Facebook like button to the sticky bar. This is a great way of increasing your fans on FB. All visitors will be able to see the bar at the top of your blogger header and it will stay fixed their and would scroll as the user scrolls down. It will always be attracting your visitors to like your blog. Lets first see a demo.
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,
background:#FF0000 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;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
}
#tw-stickybar a{
text-decoration:none;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: arial,"Helvetica",sans-serif;
line-height: 24px;
}
#tw-stickybar a:hover{
text-decoration:underline;
}
#tw-stickybar p {margin:0; list-style:none;}
#tw-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.
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 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 and replace
Replace BLOG LINK with your blog homepage URL.
6. Save your template and you are all done!
Visit your blog to see it hanging either at top or at bottom as you may have set it up. Have fun buddies. do let me know if you needed any help. :>
No comments:
Post a Comment