Saturday, April 14

How to add Social Media Sharing Buttons Below Every Blog Post on Blogger

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 .

social sharing widget,blogger widgets


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

]]></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 == &quot;item&quot;'>
<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='&quot;http://technorati.com/faves?add=&quot; + 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='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + 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='&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' 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='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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='&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' 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='&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' 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.

1 comment:

  1. Thanks but prefer something like the one you have added...

    ReplyDelete

Disqus for Students Crunch