Pin It Now!
Here is the widget that will help you to increase your blogg traffic with social sharing buttons this widget includes Twitter,Facebook like,Stumble upon,Google + and sahre this buttons,You can also customize it's positon,you can put it below your post title or at the end of your post,
it's up to you where you want to place this widget
.As far as blog traffic is concerned when any visitor share your post to social media it will circulate in social media and which will help you to increase your blog traffic
LIVE DEMO
1.Go to your blogger dashboard
2.Now go to Templet>Edit HTML
3.Backup your Templet before making any changes to CSS code
4.Click on the box at Top left corner that says "Expand Widget Templets"
5.Now press Ctrl+F and find <data:post.body/>(if it appears more then once you will go with the first one in CSS code)
6.Copy the code below and paste it above <data:post.body/> if you want this widget below post title OR If you want this widget at the end of your post paste below given code below <data:post.body/>
<b:if cond='data:blog.pageType == "item"'> <div style='background:#FFFFFF; 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: "WAY2BLOGGERZ", ui_header_color: "#ffffff", ui_header_background: "#0080FF" } </script>
<!-- AddThis Button END --></td> </tr> </table></div> </b:if><br/>
Important Customization
Background Color
To change the background color of container change FFFFFF in line 1
Blog Title
change WAY2BLOGGERZ in line 9 with your Blog Title that will appear on share button on mouse hover . as shown below
7.NOTE:skip this step if you have already added a Google+ button somewhere in your blog. Search for ]]></b:skin> and just below it paste the following code
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script>
Save your templet.....................and Enjoy
No comments: