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 color of background and overall look of this widget. It plays a important role in boosting your Blog traffic.Lets start to add this beautiful share button in your Blog.
Social Sharing Button below Post :- We also created some different type of
sharing widget as Share is nice widget in Wordpress style for Blogger, Complete this Sharing Widget for your Blogger Blog.
1.Go to Blogger Dashboard / Edit HTML.
2.Check "Expand Widget Templates".
3.Then search for
<data:post.body/>.4.Paste the following code just above it.
<b:if cond='data:blog.pageType == "item"'> <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='"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:0px; width:100px; height:20px;'/> </td>
<td><div style='margin-right:25px;'><!-- STUMBLE UPON -->
<script expr:src='"http://www.stumbleupon.com/hostedbadge.php?s=1&r=" + 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: "MY BLOGGER TRICKS", ui_header_color: "#ffffff", ui_header_background: "#0080FF" } </script>
<!-- AddThis Button END --></td> </tr> </table></div> </b:if><br/>
Remember That:Make Following Modification
To Change the container Background Color simply change
#FEE6E6;.
If you find any difficulty in placing the code then make comment. I will help you.
THANKS
:-}