Thursday, March 15, 2012

Add Social Media Sharing Buttons Below Post title

Social Networking Sites Like Facebook, Twitter, Google Plus, Digg  are the great traffic source for every blog. So we need to thing more about social media. You have seen it on many blogs they used sharing buttons below each post title. Here i am designed popular buttons for your blog. Its easy and simple. Just follows these simple steps.



How to Add sharing button below post title.

  1. First go to Blogger > Design > Edit Html
  2. Backup your template
  3. Search the following code 
<div class='post-header-line-1'/>
     4. Paste the following code below  <div class='post-header-line-1'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table border='0'>
<tr>
<td><div style='padding-top:6px;'>
<a class='twitter-share-button' data-lang='en' href='https://twitter.com/share'>Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
</div></td>
<td>
<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/>
</td>
<td><div style='margin-left:35px;'>
<script type='text/javascript'>
(function() {
var s = document.createElement(&#39;SCRIPT&#39;), s1 = document.getElementsByTagName(&#39;SCRIPT&#39;)[0];
s.type = &#39;text/javascript&#39;;
s.async = true;
s.src = &#39;http://widgets.digg.com/buttons.js&#39;;
s1.parentNode.insertBefore(s, s1);
})();
</script>
<a class='DiggThisButton DiggCompact'/>
</div></td>
<td>
<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:35px;  width:100px; height:20px;'/>
</td>
<td>
<a class='addthis_button_google_plusone' g:plusone:size='medium'/>
</td>
</tr>
</table>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<!--  PBT Button END --> </b:if>
       5. Save your template.
       6. You have done. Buttons will be display below each post title.

These buttons will be display when your on a post. If you are on Home page these will not display. With the help of this you can get more visitors for your blog.

Credit

These buttons are Customize by PBT. If you want to share these  buttons with your readers, you have to give credits to PBT by attaching a link back to this blog.


Need Help?

If you face any problem, feel free to ask, just do comment your view, I will try to give your reply in time. You can also ask here your individuals problems.

If you want any other type of buttons or anything, please tell us. I will try to full fill your choice.  

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...