Tuesday, April 5, 2016

Add Stylish Vertical Floating Sharing Buttons to Blogger

      ,    Comment  
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 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.

SEE ALSO: Optimize Image for SEO by Adding Alt and Title Attributes

New Stylish Vertical Floating Share Button

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;

Thats it.


0 comments:

Post a Comment