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 :-
- Go to Blogger Dashboard / Edit HTML.
- Backup your Template, it is very necessary.
- Click "Expand Widget Templates".
- Then search for <data:post.body/>.
- 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/>
Note:Make Following Modification
- To Change the Background color of the container simply change #FEE6E6;.
0 comments:
Post a Comment
Speak Your Mind. . . ! ! !