Sticky Bar With Share Buttons for Blogger

A sticky bar is a fixed bar which is visible at the top of the header or at the footer. This sticky bar looks similar to the "Hello Bar" for WordPress blogs. A sticky bar is widely used by all blogs today and hence I’ve created this sticky bar embedded with share buttons for Blogger with which visitors can easily share posts directly from the bar.

You can even add other stuff like featured post or notify visitors of important updates/notifications through this widget.

Live Demo

Steps to add Sticky bar to Blogger/BlogSpot.

1. Login to your Blogger Dashboard > Design >Edit HTML


2. Take a backup of your template before you proceed.


3. Go to your Blogger Dashboard > Layout > Add a Gadget > HTML/JavaScript and paste the following code in the editor.
   
   <style type='text/css'>
   #tnsbar {
   background: none repeat scroll 0 0 #AC0101;
   border-bottom: 2px solid #F3F3F3;
   box-shadow: 0 2px 7px #000000;
   color: #FFFFFF;
   font-size: 10px;
   height: 30px;
   margin: 0;
   overflow: hidden;
   padding: 0;
   position: fixed;
   right: 0;
   top: 0;
   width: 100%;
   z-index: 100;
   }
   #tnsbar a {
   color: #FFFFFF;
   font-family: 'Droid Sans',sans-serif;
   font-size: 12px;
   font-weight: bold;
   line-height: 30px;
   list-style: none outside none;
   text-decoration: none;
   margin:50px;
   }
   </style>
   
   <div id="tnsbar">
   <div style="float:right;padding:4px;">
   <a href='http://twitter.com/share' class='twitter-share-button' expr:data-url='data:post.url' expr:data-text='data:post.title' data-via='technetsavvy' data-lang='en'></a>
   <b:if cond='data:post.isfirstpost'>f
   </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='#' target='_blank'>Your Text Here</a></p>
   </div>
   
4. Now add the following JavaScript's above the </body> tag to your template only if you haven’t added the Like, Tweet and Google+ button to your blog. If you have already done so, you don’t need to add these JavaScript's.
   
   <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
   
   <script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>
   
   <script src='//platform.twitter.com/widgets.js' type='text/javascript'/>
   


5. You can easily change the background color of the sticky bar by replacing #AC0101  with your preferred color.


6. To change the text replace Your Text Here with your desired text/featured post/announcement etc. and replace # with the link it corresponds to.


7. Replace technetsavvy with your twitter handle.
   

For Further Reading:

• SEO Tips and Tricks for Blogger / BlogSpot Users

If you’re facing problems with the spacing between the header and the sticky bar, you may drop a comment and I will try to fix it at the earliest.

If you have any other problem with the code drop your comment below and I will try to fix each issue. Any suggestions are welcome.

Labels : Blogger, Blogger Widgets   | Posted by Sahil Patel   | 23:48