How To Add Sticky Header Bar In Blogger
Hello! Dear Bloggers. Now I want to release my first Blogger Notifications Sticky Header Bar for blogger.com and also its free, after hard work i have create this awesome Blogger Sticky Bar so keep my credits. This notifications bar have some awesome features like Shadow Effects, You can change shadow colors and size for your blogs I have already design this Sticky Bar like a professional notifications bar, You can easily change your notifications with simple coding, If you want to change your blog's news (notification) then you have to do some steps just type your news and type any URL then save it your notification will be changed quickly, With another feature you will get more social sharing and likings on your all blog posts because I added major Social Sharing Networks buttons in this bar, So with Facebook like button you will get more likes on your all blog posts, With Google Plus +1 button you will automatically get more +1s and I have add tweet this button in this Awesome Blogger Sticky Bar so users of your blogger blog easily tweet your posts with a simple and fast tweet this button, So Friends if you want to add this Stunning Blogger Sticky Header Bar into your blogger blogs then read bellow.
For A Live Demo Visit Eg-Lab
Features of This Blogger Bar
- You can add any post/link as a notification for your blog readers,
- You blog posts will shared on major social media platforms,
- This bar is sticky so if your blog reader scroll down/up this bar will appear on top of your blog,
- You just need to copy paste some coding for adding it into your blog,
Adding Blogger Sticky Notifications Bar
- Go To Blogger.com
- Sign in and Select Your Blog
- Go To Its Layout Section and Click On Add A Gadget
- Now Select HTML/JavaScript
- Copy Below Code using Ctrl + F and Paste Into Widget HTML Body
<style type='text/css'>
#abtbar {
background: none repeat scroll 0 0 #00001B;
border-bottom: 2px solid #FEFEFE;
box-shadow: 0 2px 7px #433453;
color: #FFFFFF;
font-size: 11px;
height: 30px;
margin: 0;
overflow: hidden;
padding: 0;
position: fixed;
right: 0;
top: 0;
width: 100%;
z-index: 100;}
#abtbar a {color: #FFFFFF;
font-family: 'Droid Sans',sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 10px;
list-style: none outside none;
text-decoration: none;
margin:50px;}
</style>
<div id="abtbar">
<div style="float:right;padding:7px;">
<a href='http://twitter.com/share' class='twitter-share-button' expr:data-url='data:post.url' expr:data-text='data:post.title' data-via='UmerPrinceWorld' data-lang='en'></a>
<b:if cond='data:post.isfirstpost'>
<Script Language='Javascript'>
<!--
document.write(unescape('%3C%61%20%74%61%72%67%65%74%3D%22%5F%62%6C%61%6E%6B%22%20%72%6F%6C%65%3D%22%62%75%74%74%6F%6E%22%20%63%6C%61%73%73%3D%22%62%6C%6F%67%67%2D%62%75%74%74%6F%6E%22%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%77%77%77%2E%61%6C%6C%62%6C%6F%67%74%68%69%6E%67%73%2E%63%6F%6D%2F%32%30%31%34%2F%30%33%2F%42%6C%6F%67%67%65%72%4E%6F%74%69%66%69%63%61%74%69%6F%6E%42%61%72%2D%42%6C%6F%67%67%65%72%53%74%69%63%6B%79%48%65%61%64%65%72%42%61%72%2E%68%74%6D%6C%22%3E%41%42%54%3C%2F%61%3E'));
//-->
</script>
</b:if>
</div>
<div style="float:right;padding:4px;">
<g:plusone size="medium"></g:plusone>
</div>
<div style="float:right;padding:4px;">
<fb:like layout="button_count" show_faces="false" font=""></fb:like>
</div>
<p><a href='http://www.allblogthings.com/2014/03/BloggerNotificationBar-BloggerStickyHeaderBar.html' target='_blank'>Releasing Blogger Notification Bar</a></p>
</div>
Now Make Changes :
Change First Blue Colored URL With Your Notification Post URL,Change 2nd Blue Colored Text With Your Notification's Title,
Change Red Colored Text with your twitter username,
7. Now You Are All Done Save It.
