It is no doubt that social network is another great way to drive traffic to blog, so the importance cannot be overlooked, so briefly am going to explain to us how to add important social network buttons like share, twitter, Facebook, stumbleupon and Google+ before or after our post, using the April 2013 updated Blogger template.
STEPS:
1. Go to your Blogger Template
2. Backup your templates.
3 .Click on Edit HTML =>Format Template =>Press CTR L+F
4. Copy <data:post.body/> into the Find bar as seen in the picture bellow and hit Enter on your keyboard.
5. The code (<data:post.body/>) will highlight in the Widget template
6. Copy and paste the code below immediately above it. (above <data:post.body/>)
<b:if cond='data:blog.pageType == "item"'>
<table border='0'>
<tr> <td> <a class='twitter-share-button' data-count='horizontal' data-lang='en' data-via='INPUT YOUR TWITTER NAME HERE' 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> <iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100& action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:20px; width:100px; height:20px;'/> </td>
<td><div style='margin-right:25px;'> <script expr:src='"http://www.stumbleupon.com/hostedbadge.php?s=1&r=" + data:post.url'/></div> </td>
<td><div style='margin-right:5px;'> <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' type='text/javascript'/>
<script type='text/javascript'> var addthis_config = { ui_cobrand: "INPUT YOUR BLOG NAME", ui_header_color: "#ffffff", ui_header_background: "#0080FF" } </script> <!-- AddThis Button END --></td>
</tr> </table>
</b:if><br/>
The network buttons will not show on your home page, but if you so want it to show on your home page as well as your post pages, then don't use the code above, but use this code bellow
<table border='0'>
<tr> <td> <a class='twitter-share-button' data-count='horizontal' data-lang='en' data-via='INPUT YOUR TWITTER NAME HERE' 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> <iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100& action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:20px; width:100px; height:20px;'/> </td>
<td><div style='margin-right:25px;'> <script expr:src='"http://www.stumbleupon.com/hostedbadge.php?s=1&r=" + data:post.url'/></div> </td>
<td><div style='margin-right:5px;'> <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' type='text/javascript'/>
<script type='text/javascript'> var addthis_config = { ui_cobrand: "INPUT YOUR BLOG NAME", ui_header_color: "#ffffff", ui_header_background: "#0080FF" } </script> <!-- AddThis Button END --></td>
</tr> </table>
<br/>
If you prefer to show the buttons bellow your posts then look at step 6 again, but paste the code immediately bellow <data:post.body/>
Note:
You have to replace INPUT YOUR TWITTER NAME HERE inside the code with your Twitter usename
Also replace INPUT YOUR BLOG NAME inside the code with the name of your blog i.e my blog is http://www.jindublog.com/ so am just going to replace with JINDUBLOG (CAPITAL LETTERS)
7. Save your templates and view your blog, if every thing is done without mistakes you will see the social network appearing in your blog,
If you are not clear about anything about this post you can use the comment form bellow to ask anything.
Kindly make use of the social network buttons bellow to share this post.
STEPS:
1. Go to your Blogger Template
2. Backup your templates.
3 .Click on Edit HTML =>Format Template =>Press CTR L+F
4. Copy <data:post.body/> into the Find bar as seen in the picture bellow and hit Enter on your keyboard.
5. The code (<data:post.body/>) will highlight in the Widget template
6. Copy and paste the code below immediately above it. (above <data:post.body/>)
<b:if cond='data:blog.pageType == "item"'>
<table border='0'>
<tr> <td> <a class='twitter-share-button' data-count='horizontal' data-lang='en' data-via='INPUT YOUR TWITTER NAME HERE' 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> <iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100& action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:20px; width:100px; height:20px;'/> </td>
<td><div style='margin-right:25px;'> <script expr:src='"http://www.stumbleupon.com/hostedbadge.php?s=1&r=" + data:post.url'/></div> </td>
<td><div style='margin-right:5px;'> <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' type='text/javascript'/>
<script type='text/javascript'> var addthis_config = { ui_cobrand: "INPUT YOUR BLOG NAME", ui_header_color: "#ffffff", ui_header_background: "#0080FF" } </script> <!-- AddThis Button END --></td>
</tr> </table>
</b:if><br/>
The network buttons will not show on your home page, but if you so want it to show on your home page as well as your post pages, then don't use the code above, but use this code bellow
<table border='0'>
<tr> <td> <a class='twitter-share-button' data-count='horizontal' data-lang='en' data-via='INPUT YOUR TWITTER NAME HERE' 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> <iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100& action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:20px; width:100px; height:20px;'/> </td>
<td><div style='margin-right:25px;'> <script expr:src='"http://www.stumbleupon.com/hostedbadge.php?s=1&r=" + data:post.url'/></div> </td>
<td><div style='margin-right:5px;'> <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' type='text/javascript'/>
<script type='text/javascript'> var addthis_config = { ui_cobrand: "INPUT YOUR BLOG NAME", ui_header_color: "#ffffff", ui_header_background: "#0080FF" } </script> <!-- AddThis Button END --></td>
</tr> </table>
<br/>
If you prefer to show the buttons bellow your posts then look at step 6 again, but paste the code immediately bellow <data:post.body/>
Note:
You have to replace INPUT YOUR TWITTER NAME HERE inside the code with your Twitter usename
Also replace INPUT YOUR BLOG NAME inside the code with the name of your blog i.e my blog is http://www.jindublog.com/ so am just going to replace with JINDUBLOG (CAPITAL LETTERS)
7. Save your templates and view your blog, if every thing is done without mistakes you will see the social network appearing in your blog,
If you are not clear about anything about this post you can use the comment form bellow to ask anything.
Kindly make use of the social network buttons bellow to share this post.
