Floating social media bar at bottom for blogger

Floating social media bar at bottom for blogger

 

Here is New floating social media bar which floats at bottom with various social share buttons of different social networks and also with facebook like button, tweet, google+ and stumble button.

While working on social widgets and on blogger widgets previously I have created and shared with you subscribe box with morphing effect, animated radial menu and some others. But in this post I have created a new floating social media bar which floats at bottom. 

I have also implement that widget on my own blog pakmax.net. Well guys, first I have created this widget for only my blog because I notice that it may prove beneficial if I provide an social options to the visitors at the bottom which floats along with the visitors and when they scroll down. So, for this I have created a floating social bar and implement on my blog 

First I have no plan to publish it but then I changed my mind and plan to share this widget with you guys. 

Reason is that when I see that with this social bar widget my social signals are improving then I plan that I also share it with you so you also get benefit from it.

Add it to blogger

1. Go to Blogger dashboard >> Template
2. Backup your template
3. click on EditHTML
4. Now search for the ]]></b:skin> tag
5. above the ]]></b:skin> tag paste the following code:

 #pmbottom
{
position:fixed;
bottom:0px;
}
#barcredits
{
text-align:right;
font-size:12px;
}

• Now, again search for <data:post.body/> and just above it paste the following code:

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='pmbottom'>
<div style='background:#ecf0f1; border:1px solid #ddd; -moz-border-radius:9px; -webkit-border-radius:9px; border-radius:9px; padding:5px; box-shadow: 3px 3px 3px #CCCCCC; height:30px;'> <table border='0'> <tr>
<td><!-- Twitter -->
<a class='twitter-share-button' data-count='horizontal' data-lang='en' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/> <b:if cond='data:post.isFirstPost'> <script src='http://platform.twitter.com/widgets.js' type='text/javascript'> </script> </b:if> </td>
<td><!--Facebook-->
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:0px; width:100px; height:20px;'/> </td>
<td><div style='margin-right:25px;'><!-- STUMBLE UPON -->
<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/></div> </td> <td><div style='margin-right:5px;'><!-- GOOGLEPLUS --> <g:plusone expr:href='data:post.url' size='medium'/> </div> </td>
<td><!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '> <a class='addthis_counter addthis_pill_style'/> </div> <script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4de3b2d654f56f28' type='text/javascript'/> <script type='text/javascript'> var addthis_config = { ui_cobrand: &quot;PakMax.net&quot;, ui_header_color: &quot;#ffffff&quot;, ui_header_background: &quot;#0080FF&quot; } </script>
  <!-- AddThis Button END --></td> <td><div id='barcredits'><a href ='http://www.pakmax.net/'>PakMax</a></div></td></tr> </table></div></div>
</b:if>

Further Customizations 

After doing above steps now its time to do some little customization in the code so that the widget can easily interegate with your template.

• This widget only appears on your posts not on homepage. To also make it appear on home page simply remove the Yellow colour bold code at top and bottom.
• To change the background colour of the widget according to your one simply replace the #ecf0f1 , with your colour.
• Don't forget to change the bestblogspotwidjets.blogspot.inwith your blog's Name.