Vertical Social Floating Bar With Pinterest For Blogger

Vertical Social Floating Bar With Pinterest For Blogger 

 

his is also cool gadget for your blog.This vertical
floating gadget show in every page in your blog.
There have lot of vertical floating gadget, but in
this gadget, i include with Printrest social network
sharing button. So, this will helps to pin your post
Earlier i posted about same floating menu with
different style, check it from here. How To Add
Vertical Floating Social Sharing Bar To Blogger.
Hope both are helpful to you. Follow these steps
to add it to your blog.

GreenGeeks Review

1. Log in to blogger account and Go to Design >> Edit HTML
    (make sure backup your template first)

2. Put checked marked in Expand Widget Templates

3. Find this code by using Ctrl+F    <b:includable id='post' var='post'>

4. Paste below code, After <b:includable id='post' var='post'>  code

<style type='text/css'>
#Bloggertrix-share {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px 0;z-index:10;}
</style>
<div id='Bloggertrix-share' title='Share with your friends'>
<script type='text/javascript'>var switchTo5x=true;</script>
    <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
    <script type='text/javascript'>stLight.options({onhover:false});</script>
    <div style='margin:10px 0 0px 6px;'>
    <span class='st_fblike_vcount' displaytext=''/>
</div>
<span class='st_twitter_vcount' displaytext='' st_via='bloggertrix'/>
<div style='margin:10px 0 0px 0;'>
 <center><a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;);
e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);}
</script> </center>
</div>
<div style='margin:0px 0 0 5px;'>
<span class='st_plusone_vcount' displaytext=''/>
<div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px -2px 4px;'>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
     ui_cobrand: &quot;Bloggertrix&quot;,
ui_header_color: &quot;#ffffff&quot;,
     ui_header_background: &quot;#0080FF&quot;}
</script> 
</div>
<br/>
<div style='clear: both;font-size: 8px;text-align:center;'><a href='http://www.bloggertrix.com/2012/07/vertical-social-floating-bar-with.html' style='text-decoration: none;' target='_blank'><font color='#816D77' decoration='none'>Get widget</font></a></div><!-- Do not remove this link -->
</div>

5. Now click Save Template.
   Cheers you are done.