Subscribe For Free Updates!

We'll not spam mate! We promise.

Thursday

How To Add Sexy Share Button Below Every Blog Post

This widget is very popular today, you can see this widget just below the post title of many Blogs. It includes popular social networking buttons like Twitter, Facebook like, Google +1 and StumbleUpon. You can easily customize background color  and overall look of the widget. It has a great importance in boosting your Blog traffic.So lets start to add this gorgeous share button to the Blog.
                   

Add Social Sharing Button below Post :-

  1. Go to Blogger Dashboard /  Edit HTML.
  2. Backup your Template, it is very necessary.
  3. Click "Expand Widget Templates".
  4. Then search for <data:post.body/>.
  5. Paste the following code just above it.
<b:if cond='data:blog.pageType == &quot;item&quot;'> <div style='background:#FEE6E6; border:1px solid #ddd; -moz-border-radius:9px; -webkit-border-radius:9px; border-radius:9px; padding:5px; box-shadow: 3px 3px 3px #CCCCCC;'> <table border='0'> <tr>
<td><!-- Twitter -->
<a class='twitter-share-button' data-count='horizontal' data-lang='en' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/> <b:if cond='data:post.isFirstPost'> <script src='http://platform.twitter.com/widgets.js' type='text/javascript'> </script> </b:if> </td>
<td><!--Facebook-->
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:0px; width:100px; height:20px;'/> </td>
<td><div style='margin-right:25px;'><!-- STUMBLE UPON -->
<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/></div> </td> <td><div style='margin-right:5px;'><!-- GOOGLEPLUS --> <g:plusone expr:href='data:post.url' size='medium'/> </div> </td>
<td><!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '> <a class='addthis_counter addthis_pill_style'/> </div> <script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4de3b2d654f56f28' type='text/javascript'/> <script type='text/javascript'> var addthis_config = { ui_cobrand: &quot;MY BLOGGER TRICKS&quot;, ui_header_color: &quot;#ffffff&quot;, ui_header_background: &quot;#0080FF&quot; } </script>
<!-- AddThis Button END --></td> </tr> </table></div> </b:if><br/>

Note:Make Following Modification

  • To Change the Background color of the container simply change #FEE6E6;.
 If find any difficulty in placing the code then make comment I will launch you shortly.

Socializer Widget By My Blacklisthackers
SOCIALIZE IT →
FOLLOW US →
SHARE IT →

0 comments:

Post a Comment

Speak Your Mind. . . ! ! !