How to Add Stylish Vertical Floating Sharing Buttons to Blogger

Sharing our blog posts published b Lest we share them on social media And in return, we receive a lot of traffic Blog is the best way to increase traffic. Our visitors and our post to our blog On the way, he landed on the If srh say thank you to the author, but we share the visitors another way by which you can say no. By this method the visitors can share their favorite social media posts and we get a lot of visitors and pageviews. So, here we are with the page vertically floating floats, which share a great blogger widget are discussed. This widget so your visitors easily share posts you like or you can click on all the major social media contains. This widget +1, Pinterest Pin Button Google, Facebook like and contain. Like this widget in your blog and wanted to just follow the simple steps below.

How to add the new floating share buttons to blogger

•  Log in to your Blogger account and go to Template > Edit HTML
•  Search for <html , leave a space and add xmlns:fb=”http://ogp.me/ns/fb#” just after it. The resulting code should lok like this:

<html xmlns:fb=”http://ogp.me/ns/fb#”

If this is already there, you don’t need to do it again.

•  Search for <data:post.body/>. If you have more than one of it in your template, search for <div class='post-footer-line post-footer-line-1'/>
•  And just below that paste the following code:

<b:if cond=’data:blog.pageType == &quot;item&quot;’>

<!–Start Floating Share Buttons with Pinterest–>

<style type=’text/css’>

#dc-float {position:fixed; bottom:15%; right:10px; float:left;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

border:1px solid #BBBBBB;

background-color:#FFFFFF;

-webkit-box-shadow: #B3B3B3 5px 5px 5px;

-moz-box-shadow: #B3B3B3 5px 5px 5px;

box-shadow: #B3B3B3 5px 5px 5px;

padding:0 0 2px 0;z-index:10;}

#dc-float .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>

<div id=’dc-float’ title=’Share with your friends’>

<div class=’sbutton’ id=’rt’>

<a class=’twitter-share-button’ data-count=’vertical’ href=’http://twitter.com/share’>Tweet</a><script src=’http://platform.twitter.com/widgets.js’ type=’text/javascript’/>

</div>

<div class=’sbutton’ id=’su’>

<script src=’http://www.stumbleupon.com/hostedbadge.php?s=5′/>

</div>

<div class=’sbutton’ id=’digg’ style=’margin-left:3px;width:48px’>

&lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;

&lt;script&gt;(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 = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&amp;appId=167544263382192&quot;;

  fjs.parentNode.insertBefore(js, fjs);

}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));&lt;/script&gt;

<div class=’fb-like’ data-layout=’box_count’ data-send=’false’ data-show-faces=’false’ data-width=’48′/>

</div>

<div class=’sbutton’ id=’gplusone’>

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

<g:plusone size=’tall’/>

</div>

<div class=’sbutton’ id=’gb’>

<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>

</div>

<div class=’fb_button_share’>

&lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;

&lt;script&gt;(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 = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&amp;appId=112973755438933&quot;; // appId must be valid

fjs.parentNode.insertBefore(js, fjs);

}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));&lt;/script&gt;

&lt;fb:share-button type=&quot;box_count&quot;&gt;

&lt;/fb:share-button&gt;

</div><br/>

<!–End Floating Share Buttons with Pinterest–>

</b:if>

• Hit the Save Template button and view your blog.

To make the share butons float to the left instead of right, search for this code:

dc-float {position:fixed; bottom:15%; right:10px; float:left;

Replace with this:

dc-float {position:fixed; bottom:15%; left:10px; float:left;