Thursday, June 6, 2013

Add New Social Sharing Widget Below Every Post In Blogger

Author: Gagan Masoun
Add New Social Sharing Widget Below Every Post In BloggerI have just shared social sharing buttons which you can use below every post in your blogger blog. But this widget has only 4 buttons - Twitter, Facebook Like, Google+ and StumbleUpon. But if you want to add some other popular social sites as a social sharing buttons then follow this tutorial. In this tutorial I am going to share new social sharing widget below every post in Blogger.

It contains Fb, Twitter, G+, Pinterest, StumbleUpon, Digg and LinkEdin. Follow the given below steps and add this amazing widget to your blog. Let's start the guide:

Live Demo

Add Social Sharing Widget Below Every Post In Blogger

  • Go to Blogger Dashboard >> Template >> Edit HTML
  • Press Ctrl+F & Find ]]></b:skin> Tag.
  • Copy-Paste Given Below Code Before ]]></b:skin> Tag.
ul.social_BD {
list-style:none;
display:inline-block;
margin:15px auto;
}
ul.social_BD li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul.social_BD li a {
display:block;
width:50px;
height:50px;
padding-right:10px;
position:relative;
text-decoration:none;
}
ul.social_BD li a strong {
font-weight:400;
position:absolute;
left:20px;
top:-1px;
color:#fff;
z-index:9999;
text-shadow:1px 1px 0 rgba(0,0,0,0.75);
background-color:rgba(0,0,0,0.7);
-moz-border-radius:3px;
-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);
-webkit-border-radius:3px;
-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);
border-radius:3px;
box-shadow:0 0 5px rgba(0,0,0,0.5);
padding:3px;
}
ul.social_BD li.abfacebook {
background-image:url(http://3.bp.blogspot.com/-moSc6FeEkEU/UbBhUevko5I/AAAAAAAA4LU/dFuldZjb00k/s1600/blogsdaddy-facebook-icon.png);
}
ul.social_BD li.abtwitter {
background-image:url(http://4.bp.blogspot.com/-OYLKPp99lTY/UbBhU9Vyr0I/AAAAAAAA4Lo/bLosIATh_EQ/s1600/blogsdaddy-twitter-icon.png);
}
ul.social_BD li.abgoogleplus {
background-image:url(http://4.bp.blogspot.com/-KyWBztnYXzE/UbBhUX8iQ_I/AAAAAAAA4Lg/Rxx8vGvjvD0/s1600/blogsdaddy-google-icon.png);
}
ul li.abpinterest {
background-image: url(http://4.bp.blogspot.com/-sPCpAWSoB3o/UbBhTkqtthI/AAAAAAAA4LA/s-P8kpSZd6k/s1600/blogsdaddy-Pinterest-icon.png);
}
ul.social_BD li.abstumbleupon {
background-image:url(http://3.bp.blogspot.com/-0ylpxJHpi-w/UbBhUE8Nn8I/AAAAAAAA4LY/WPyZLgWhTWg/s1600/blogsdaddy-StumbleUpon-icon.png);
}
ul.social_BD li.abdig {background-image:url(http://3.bp.blogspot.com/-a4MYn_8KBcc/UbBhTjuKE3I/AAAAAAAA4K8/tX_t7eRFx5E/s1600/blogsdaddy-Digg-icon.png);
}
ul.social_BD li.ablinkedin {
background-image:url(http://3.bp.blogspot.com/-Bl04NrFgAyQ/UbBhTkdXZPI/AAAAAAAA4LE/zLyUxxchAlk/s1600/blogsdaddy-Linkedin-icon.png);
}
#animation_BD:hover li {
opacity:0.2;
}
#animation_BD li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
}
#animation_BD li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}
#animation_BD li:hover {
opacity:1;
}
#animation_BD li:hover a strong {
opacity:1;
top:-10px;
}
  • Now, Find <data:post.body/> or in some blogger template it look like this <p><data:post.body/></p> and Paste the below code after it.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='font-size: 22px;'><b>Kindly Bookmark and Share it</b></div>
    <ul class='social_btrix' id='animation_btrix'>
    <li class='abfacebook'>
    <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow'><strong>Facebook</strong></a>
    </li>
    <li class='abtwitter'>
    <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
    </li>
    <li class='abgoogleplus'>
<a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>
    </li>
    <li class='abpinterest'>
<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>
    </li>
    <li class='abstumbleupon'>
    <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>
    </li>
    <li class='abdig'>
      <a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><strong>Dig</strong></a>
    </li>
    <li class='ablinkedin'>
    <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>
    </li>
    </ul>
</b:if>
  • Now, Save Your Blogger Template and Its All Done :)
If you need any type of help regarding this widget then ask us without any hesitation. If you like our work then please share this article with your friends. Thanks :)

Author
Author - is the owner of Blogs Daddy Blog. Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can follow him on twitter @BlogsDaddyYou can also follow him on Google+.

0 comments:

Post a Comment