Blogger sticky notification bar with sharing buttons.

As you all know that sticky bar or notification bar is very important for many reasons. I have previously wrote about how to add a simple but great notification bar for blogger which appears when you scroll down your blog's page. This contains some important links, Email Subscription box, and Scroll to Top option. Today, I am writing about how to make this simple notification bar more advanced with Twitter and Googleplus sharing options.

Why to use social sharing tools in sticky bar:

Well, its a known fact that social media is very important for all bloggers and webmasters. It helps spreading news, new articles just in one click over the web. Social media is very powerful tool for search engine optimization. And with the help of these sharing tools on the sticky bar, we can share over content to these social site in one click. And because, Facebook, Twitter, and Google plus are the most powerful and popular social sites now a days. That's why we should take advantage of these social sites to publish our content over the web.

How to add notification bar:

• You must read Simple scrolling notification bar for blogger here. (v1)
• You will need this article to get the simple notification bar's code. For the new features, you just have to add some more code which is given below.

Add sharing tools in notification bar:

Well, in order to make your notification bar more advanced having social sharing tools, you need to follow these steps. These steps consist of adding some more functionality to the previous simple bar.

Steps to update the simple notification bar:

• Add the following scripts after the script section of older notification bar, or you can simply add these scripts just before </body> tag.

<script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;

js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";

fjs.parentNode.insertBefore(js, fjs)}(document, 'script', 'facebook-jssdk'));

</script>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'>

</script>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'>

</script> 

• If you have added plus one button, Facebook like button, twitter buttons on your page, then you don't need to add these scripts.
• Now you need to add the CSS for the sharing buttons sticky bar.
•  Search for ]]></b:skin> and place the following CSS code just above this tag.

#share-top-bar

{
margin: -4px 0 0 55px;
padding: 9px 0 2px 5px;
-moz-border-radius:3px;
-webkit-border-radius:3px;

background: #f9f9f9;
border:1px solid #dddddd;
line-height: 1;

border-radius:3px;
}

#share-top-bar li

{
margin-right: 0;

display: block;

}

• Now, You need to add the code for sharing tools element.
• Find the following code in your template for simple bar.

• <div id='PTB-Bar-Container'>
  <div id='PTB-Bar-Content'>
  <ul id='PTB-Bar-Left'>
  <li class='Home'> <a href='www.pctricksblog.com/'>Home</a> </li>  

• Now add the following code for sharing elements after the above code. 

<li class='Share'>
<div id='share-top-bar'>
<ul> <li> <a class='twitter-share-button' data-count='horizontal' href='http://twitter.com/share'>Tweet</a> </li>
<li> <g:plusone size='medium'></g:plusone> </li> <li> <div class='fb-like' data-font='verdana' data-layout='button_count' data-send='false' data-show-faces='false'> </div></li>
</ul>
<div style='clear:both;'></div></div></li>

• That's all done.

Make sure that this is the extra code to add sharing buttons to notification bar. You must use this code with the simple notification bar for blogger to make it advanced.

Thanks to stylifyyourblog for providing this great code.