Friday, 20 April 2012

Social Sharing Buttons Below Every Post In Blogger

0 comments

We often share some valuables with our readers and now we are presenting   social sharing buttons present at the bottom of each post.As i already mentioned that nobody can deny the importance of social media to grow up in blogging world.Social media actually gathers more readers to your blog.What your aim is you have to make them to share your post,and sharing is not possible unless you add social media buttons.Adding social media buttons below post title is also a great idea.
How to add this widget – Making it Easy
Follow my simple steps to add this in your blog,
1.Log in to Blogger>Design>Edit HTML.
2.Find this code in your template ]]></b:skin>.Use Ctrl+F to find this code.
3.Add the following code just above ]]></b:skin>,
/*-------Fadein----*/
.Fadein img {
filter:alpha(opacity=100);
opacity: 1.0;
border:0;
}
.Fadein:hover img {
filter:alpha(opacity=30);
opacity: 0.30;
border:0;
}
4.Add the following code just below <data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'><center><span style='color: rgb(0, 153, 0);'>Thanks for making this possible! Kindly Bookmark and Share it.</span><br/><br/>
<a class='Fadein' expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLAkoRHYPXkRXnQbaVZTMIe9ee0k0QCq5tYB0kAX8He_GpnBvTZ5J2VDzxDtk_Znr7uXzmoVGNGjZ5QwxUOBr9bupYBdKPbb_vCGzO3Ke4qvT3DN_0PG77Vhku1ENvIlrUAIUxg7a6r_Cg/s1200/TAG-IT.gif '/></a>
<!--DIGG-->
<a class='Fadein' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank'><img alt='Digg This' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtPb4xvc_oNJK1QSEn5PttIB5UspbVK7J0LvznAnzYdpA73UOkYTMufeI7rXvGwT74pHKEGxW1VCqS4BpTlyfd3XuyJdCVlHYzfY1jG2kXlalLKAmUVrBhvM7zkT-7DswYxNsOJWYX6-Y/s400/Digg.gif '/></a>
<!--Stumble-->
<a class='Fadein' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTdazN-mdznDnzFsDR9bRoOF3Dle_lCrhzSI2FyozU6F0eOd-JU7rJR5Vo5dBvgGuny-KOx6rwlwqTaDz2BrkoZRKOm8jg5B3Nylw_qbKUvFG_1zrvNtBTzkYnCHxsuZJDfUNTWd-3l0rV/s400/STUMBLE-IT.gif'/></a>
<!--Facebook-->
<a class='Fadein' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_ib6LX-G_96DZQfMBZbbKavooryKFHj7JE91wNF6dq55UN9htH6h9vpOdvW5e6Ci92HFwMvFWg1mV8vaPi0MFeL-yAYU9udp8E-Nyzg9J00_ZrgpuxTFvqJEyb1gGE2lsdtkzZs-SIyA/s400/facebook.png '/></a>
<!-- Twitter -->
<a class='Fadein' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_YDlzPviTG0fU5hOi7uDemHbxp7t3Io_eNIg_DlT3EmLXlnF_xH9NxKGrE5tYO1kizxvIxvuwyfTrZY1n8mdYlm36YaxJ-TMHdH7tcdR9hM_5SwP3WVG5HlCGnJAWFMg5FObRqpO6Deiz/s400/TWEET-IT.gif'/></a></center></b:if>
Let’s move on to Customization
These are the customization for this widget,
  • You can change the color of the text by using desired color.
  • Change the default text to whatever you want!
  • Change the icons accordingly.
I hope you like this post.If you do please share your views and thoughts via comments,subscribe to get free email updates and directly in your inbox and last but not least please like us on Facebook

Leave a Reply