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.
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 Blogger.com
  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;
    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.

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.

COMMENTS

Subscribe to our Newsletter

Get Free Tips and Guides to Make Money Online!

Name

2016,13,2017,7,2018,18,2019,1,Adsense,8,Advertising,4,Affiliate Marketing,5,Alexa,1,Alternatives,2,Android,1,Announcements,1,Apps,6,Ask Me,8,Back linking,9,Backup,1,Bing,1,Black Friday,1,Blockquote,1,Blog Names,4,Blogging,25,Blogging Mistakes,6,Books,1,Branding Ideas,1,Business Tips,15,Career Advice,1,Case Study,6,Content Marketing,21,CSS,4,Customization,20,Digital Marketing,6,Domains,6,Downloads,1,eCommerce,2,Email Marketing,4,Entrepreneurship,14,Essay Writing,1,Event Blogging,2,Exclusive,38,Facebook,7,Facts,2,Featured Snippet,1,Finance Tips,1,Forums,2,Freebies,3,Freelancing,4,Giveaways,1,Google,11,Google Adwords,1,Guest Contributions,89,Health Tips,2,Hosting,9,How To,133,Ideas,4,Images,1,Influencer Marketing,2,Info graphic,21,Inspiration,4,Instagram Marketing,1,Interviews,4,Jobs,3,Keywords Research,1,Make Money,53,Motivation,1,Newbie's Guide,80,News,28,NLB,9,Offline Business Ideas,2,Page Rank,4,Paid Reviews,1,PayPal,1,Pictorial,2,Posts,5,PSD Files,1,Quotes and Sayings,39,Reddit Marketing,1,Referral Earning,6,Relationship Tips,1,Review & Guide,14,Roundups,3,Save Money,1,Self Improvement,2,Selling,1,SEO,48,SMO,4,SMS - Messages,1,Social Media,19,Social Media Marketing,5,Sponsors,5,Startups,1,Technology,2,Templates,8,Tips and Tricks,56,Tools,5,Tops and Lists,52,Traffic,15,Twitter,2,Video Marketing,1,Viral,2,Vlogging,4,Web Designing,10,Widgets,24,Wishes and Greetings,1,WordPress,11,Work at Home,6,Writing,30,YouTube,2,
ltr
item
AllBlogThings.com - Make Money Online, Blogging, Digital Marketing: How To Add Sticky Header Bar In Blogger
How To Add Sticky Header Bar In Blogger
Now you can add an awesome styled blogger notifications bar on your all blogger powered blog, Just read this article for more help on How To Add Sticky Header Notifications bar in blogger blogs.
http://1.bp.blogspot.com/-4MeHDnFTg7E/UqQ9UFTp16I/AAAAAAAADIU/i4NvBb9jcQI/s640/Blogger+Sticky+Bar.PNG
http://1.bp.blogspot.com/-4MeHDnFTg7E/UqQ9UFTp16I/AAAAAAAADIU/i4NvBb9jcQI/s72-c/Blogger+Sticky+Bar.PNG
AllBlogThings.com - Make Money Online, Blogging, Digital Marketing
https://www.allblogthings.com/2014/03/BloggerNotificationBar-BloggerStickyHeaderBar.html
https://www.allblogthings.com/
https://www.allblogthings.com/
https://www.allblogthings.com/2014/03/BloggerNotificationBar-BloggerStickyHeaderBar.html
true
8869657471256965778
UTF-8
Viewing All Posts Bad, Try Again VIEW ALL Read More Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED! LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back To Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec Just now About 1 minute ago $$1$$ minutes ago 1 hour ago About $$1$$ hours ago Yesterday About $$1$$ days ago About $$1$$ weeks ago More than some weeks ago Followers Follow PREMIUM and Locked Please share to unlock this content Copy All Code Select All Code All coding here were copied to your clip-board If You can't copy the coding or text here, please press CTRL+C or CMD+C with Mac to copy now