Vertical Social Floating Bar With Pinterest For Blogger

By : Follow Trends

On : 9/02/2015

In : Blogger Tips

0 comments

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.