31 May 2016

In by // 9:37 pm // Leave a Comment

Verticle Floating Share Widget For Blogger Blogs

Sharing is the best method to increase blog traffic so after publishing our blog posts we share them to social media and in return we get a lot of traffic. When our visitors landed on our blog's page and like our post then they thought to say thanks to the the blogger (author) so they do comment on the post but there is one another way by which visitors can say thanks to us i.e. sharing. By this method visitors can share the post to their favourite social media and we get a lot of visitors and pageviews. So, here we are discussing about a great floating sharing widget for blogger which floats vertically with the page. This widget contains all major social media on which your visitors can easily share or like your posts in a click. This widget contains Facebook like and share, google +1, Pinterest Pin buttons. So if you like this widget and wants to add it to your blog just follow the easy 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;

Final Words:

So this is the easy steps to add this professional floating share buttons to your blogger blog. If you have any query or to give your feedback use the comment box. Keep sharing this post with your friends till then Peace, Blessings and Happy Sharing.

You Might Like:

Share:

0 comments:

Post a Comment

Designed With ❤ By The Vip.

© 2017 VipTechWorld