Saturday, March 17, 2012

Add Social Media Sharing Buttons Below Each Post

In my previous post, we have added social Media buttons below each post title, now we are going to add social media sharing buttons at bottom of each post. These are not official like or share buttons.I have seen this sharing at many popular blogger so I also decided to designed for your blog. I made these buttons manually with round corners. In these I tried to give hover effects with Image opacity. This works really wonder it.

 If you think, Why we should use these buttons below each post, answer is very simple because after reading your all post generally reader leaves your blog but with the helps of these buttons it will force to share your post to others. To add these buttons follows these simple steps.


Steps to add Social Media Sharing buttons Below Each Post

  1. Go to Blogger > Design > Edit Html
  2. Backup your Template
  3. Click on Expand Widget Templates check-box
  4. Find this below code using CTRL+F
]]></b:skin>
     5. Just before it, Add the following 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;

}
     6. Now, Find this code
 <data:post.body/>
     7. Paste the following code, just below  <data:post.body/>
<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 Take 5 Seconds To Share It.</b></span><br/><br/>
<!-- PBT 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='http://3.bp.blogspot.com/-_mfYeBXVUL4/T2QenAltfTI/AAAAAAAABHY/2LhKT8_Wnm4/s1600/TECHNORATI.png ' width='64px'/></a>
<!--PBT 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='http://2.bp.blogspot.com/-T58b2MOu0p8/T2Qeimj1UCI/AAAAAAAABHA/_0-KksbxLjE/s400/DIGG.png ' width='80px'/></a>
<!--PBT 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='http://3.bp.blogspot.com/-0R-Sh9Mps9k/T2QeriEyKfI/AAAAAAAABHo/PwQXaIq07ns/s1600/stumble.png' width='100px'/></a>
<!--PBT 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='http://1.bp.blogspot.com/-ZwddKzIErdE/T2QeloeB4jI/AAAAAAAABHQ/XZz2o9xh4kE/s1600/REDDIT.png' width='100px'/></a>
<!--PBT 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='http://3.bp.blogspot.com/-cp-DriRslgY/T2QekKGWE1I/AAAAAAAABHI/7Yfu551w1Os/s1600/FACEBOOK.png' width='80px'/></a>
<!--PBT 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='http://2.bp.blogspot.com/-YieqVzYEzZM/T2QepSTtnaI/AAAAAAAABHg/64vLEIQ7ACo/s1600/TWITTER.png' width='64px'/></a></center>
</b:if>
     8. Save your Template.

Further Customization

You can edit the message, I have written If You Like This Post. Please Take 5 Seconds To Share It. And also change the Text color of this message by editing #0066CB 

Need Help?

If you are facing any problem, you can ask me here using comment. I will try to solve your problem. If you want any other widget, tell me.

1 comments :

confused??? Post a Comment

 

Recent Posts

About PBT

We design and develop Widget, Custom code , Template customization so that you can make your blog unique and cool. If you need any type of widget or custom code feel free to Contact. we happy to help you...