How To Add Sticky Header Bar In Blogger

Hello! Dear Bloggers. Now I want to release my first Blogger Notifications Sticky Header Bar for 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.
Releasing Blogger Notification Bar, Add Blogger Sticky Header Bar In Your Blogger Blogs Free With Shadow Effect
For A Live Demo Visit Eg-Lab

Features of This Blogger Bar

  1. You can add any post/link as a notification for your blog readers,
  2. You blog posts will shared on major social media platforms,
  3. This bar is sticky so if your blog reader scroll down/up this bar will appear on top of your blog,
  4. You just need to copy paste some coding for adding it into your blog,

Adding Blogger Sticky Notifications Bar

  1. Go To
  2. Sign in and Select Your Blog
  3. Go To Its Layout Section and Click On Add A Gadget
  4. Now Select HTML/JavaScript
  5. 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;
    <div id="abtbar">
    <div style="float:right;padding:7px;">
    <a href='' 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'>
    <div style="float:right;padding:4px;">
    <g:plusone size="medium"></g:plusone>
    <div style="float:right;padding:4px;">
    <fb:like layout="button_count" show_faces="false" font=""></fb:like>
    <p><a href='' target='_blank'>Releasing Blogger Notification Bar</a></p>

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.

Final Words

If You Want To Make Changes In This Bar Then Let Me Help You Via Comments Below, If you got any problem while adding sticky bar into your blogger blog then let me know in comments I will give you a fix as fast as possible.
Share This

Previous Post
Next Post


It's free and takes only a minute to comment and show your love for this article, even if you want anything to be changed here or created as a blog post. You can suggest by commenting below.