Add Social Sharing buttons Below Each Post
To make your post rach wider audience ,don't leave your visitors without a chance to share your posts on their social profile like Facebook,Twitter,Google+,Stumble Upon.
Last post in Blogging , i've shared How to add TechCrunch like Social Sharing Widget to Blogger . In this post i would like to share a Blogger Widget that will display Social Sharing widget below each blog post.
Thanks to PBT for sharing us this awesome Widget for Blogger . This will looks similar to the one seen on MybloggerTricks blog .
Last post in Blogging , i've shared How to add TechCrunch like Social Sharing Widget to Blogger . In this post i would like to share a Blogger Widget that will display Social Sharing widget below each blog post.
Thanks to PBT for sharing us this awesome Widget for Blogger . This will looks similar to the one seen on MybloggerTricks blog .
How to Display Social Sharing Widget Below Each Blog Post ?
Just follow the simple steps,
1. Goto Blogger > Design > Edit HTML ( Check Advanced )
2. With CNTRL+F search
3. Copy below Codes and Paste before the above Code.
4. Now find : <data:post.body/>
5. Copy & Paste below codes after the above code.
]]></b:skin>
3. Copy below Codes and Paste before the above Code.
.pbt-Fade img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;}
.pbt-Fade:hover img {
filter:alpha(opacity=60);
-moz-opacity: 0.60;
opacity: 0.60;
}
4. Now find : <data:post.body/>
5. Copy & Paste below codes after the above code.
<b:if cond='data:blog.pageType == "item"'>
<center><span style='color: #0066CB; font-size: 14px; font-family: Verdana;'><b>If You Like This Post Please mind to Share It.</b></span><br/><br/>
<!-- SCB Technorati -->
<a class='pbt-Fade' expr:href='"http://technorati.com/faves?add=" + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' height='64px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE7jwLoLSKJLK9iZqqrXpVPQ5eYAoSNiX-HEvNm_IQDfUNIbv1-Vyr03rAqDfzdKhxNkGCh0aPvt9EKD3iMetH9RqHvBrCI40juvIfS4pKYhlN637Wb6koGX9K6RfS3CQFzVKCtrSEnWwP/s1600/TECHNORATI.png ' width='64px'/></a>
<!--SCB DIGG-->
<a class='pbt-Fade' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url' rel='external nofollow' target='_blank'><img alt='Digg This' height='80px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWIJZI6v7HQGKKqFliwRDaFkTPOuKir7T88qZ7D2rFWUpvlSqdogI_cnkXpexxo5k7G4GhNkWO9xFwXxm_gNn6A5kQFFA6pMQFJsgHs8VYOMVqgVjzBPJf7wnVNcXhqJkr5X8AyYV_dXDc/s400/DIGG.png ' width='80px'/></a>
<!--SCB Stumble-->
<a class='pbt-Fade' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' height='100px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg5LTHJAAgA0IEF1Qk8juAayOP7I-ro-w5oQxkvKIWrWNv81NGYEILL9T_AYCq4ODRDcjjLMfDJYM_6_M_g9d_AUsHu7Pjyhi-TdLmUSJwPKKJbsLtBSYIIkUcHArLV58yCV8HukXwYHr1/s1600/stumble.png' width='100px'/></a>
<!--SCB Reddit-->
<a class='pbt-Fade' expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' height='100px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4wSVe67flxUL0OVq9EUgEmEHQVWYFgHmYnM3TZg4c0FupBaP2q6H_4WU2EOOddviz7pgaJrcaCDTNnG1gTyR-AuBnVoRgjvfZLYJbwiaHQA1LLGYyfMOXkcfeCkhEMGzNgWSoCVh_IskB/s1600/REDDIT.png' width='100px'/></a>
<!--SCB Facebook-->
<a class='pbt-Fade' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' height='80px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjidOyjx58OE9PWGIuMNcTGb4W6j4fzGIASRRSbujnQMbGsANIxc3PDuy87bchaYFNRJtWqk8gWUFxMvOVc9kGbTZvBujzpUybC0sdledzG32XqhzmLqFZRiAvkDvka31zhQ6FLkBavdrod/s1600/FACEBOOK.png' width='80px'/></a>
<!--SCB Twitter -->
<a class='pbt-Fade' expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Twitter' height='64px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj6xnQJbyC7xvMLcHIfiiobxkz1xUf-IjrogpkyYD4XOCyJpcdO2aC5uSwxY4YqAasSszNzKD3IBVYNMbJGJjQtSc3opUHDPCRIZJkz8d5Gi5oUd_zUI_u4ECxo7C7YCwakaAnmphnjbSl/s1600/TWITTER.png' width='64px'/></a></center>
</b:if>
6. Now, Preview & Save it.
Thats it .. You've added Social Sharing Widget to your blog .
You may also like our Free Premium Blogger Templates | Facebook Pop-Up widget for Blogger
If you've faced any errors and problems while installing it ,do comment below.
Thanks but prefer something like the one you have added...
ReplyDelete