Learn How to Add social media sharing buttons in below every post on blogger ~ Welcome to Epannel

14 Oct 2013

Learn How to Add social media sharing buttons in below every post on blogger

02:45 Sajid Rahim No comments

As social media is growing day by day and is serving web loggers to extend traffic to their blog, it might be nice if we tend to create easier for our web log guests or followers to share our post simply on this social networking sites to drive additional traffic to our web log. thus these days during this post I"ll be able to show you to feature social media sharing contraption with Google+, Facebook, Twitter and StumbleUpon sharing button beside counter below each post on blogger. thus lets add this contraption to your web log.

1. visit Blogger Dashboard then click on Template> Edit HTML
2. Before writing template Backup your template
3. Tick "Expand Widgets Template" box (On prime Left Corner)
4. Now rummage around for the code given Below by pressing Ctrl + F

<data:post.body/>

5. just under <data:post.body/> paste following code.

<div style='clear: both;'/>
<b:if cond='data:blog.pageType == "item"'>
<div align='left'>
<p style='margin:0; border-bottom:2px solid #333;'><font color='#333' face='Arial Black' size='5'>Kindly Share This Post »»</font></p>
<table border='0' cellpadding='5' cellspacing='10'><tbody>
<tr>
<td style='padding-top:8px;'>
<g:plusone size='tall'/>
<script type='text/javascript'>
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</td>
<td style='padding-top:8px; '> <script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/>
</td>
<td style='padding-top:8px;'> <div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='box_count' send='false' show_faces='false'/></td>
<td style='padding-top:8px;'><a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/> </td>
<td>

<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>

</td>
</tr>
</tbody></table></div></b:if>
<div style='clear: both;'/>

    Replace Kindly Share This Post to what ever text you prefer.
    Replace #333 to alter font color.
    Replace #333 to alter border color below the text

If you discover any issue putting in this sharing contraption to your web or blog or have the other queries then leave a comment below.I"ll be able to be glad to assist you out.