add share box to blogger

add share box to blogger

In this tutorial, i'm getting to show a way to add a helpful share box for your blogger. This share box contains official Tweet button with counter, official Facebook share button with counter, official Google and button with counter, official Stumbleupon button with counter, Pinterest button, Linkedin button, Print button and Facebook like button. I actually have assemble all this button for Blogger blogs, therefore you'll be able to add this share box quickly to your blogger.

Now follow the steps given below to feature this share box for your blogger .

1.Go to "Template and Edit HTML" of your blogger.

2.Click on "Expand Widget Templates"

3.Add this code above <head>  tag:


<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script> </a>
 4.Search This code by pressing Control + f computer keyboard:

<div class='post-header-line-1'/>
5.Copy Share Box code given below and paste it just the higher than code.

NOTE: If you cannot find this code <div class='post-header-line-1'/> in your template ,paste your "Share Box" code before <data:post.body/> . 

  <b:if cond='data:blog.pageType == "item"'> <style type='text/css'> .multisharebox{background:none repeat scroll 0 0 #EFEFEF;float:right;margin:5px 0 3px 10px;padding:0 5px 0;text-shadow:0 1px 0 #FFF;width:260px;border:4px solid #d8dfea} .multisharebox table{margin-bottom:0 !important} .multisharebox td{padding:4px 3px !important} .fb-like-boxtop{background:none repeat scroll 0 0 #EDEFF4;border:1px solid #D8DFEA;color:#000;float:right;font-size:11px;margin:0 0;padding:5px 10px;text-align:left;width:230px} .fb-like-boxtop a{color:#000;text-decoration:none} .fb-like-boxtop a:hover{color:#000;text-decoration:underline} .fb-like-box{background:none repeat scroll 0 0 #EDEFF4;border:1px solid #D8DFEA;color:#000;float:right;font-size:11px;height:60px;margin:5px 0;overflow:hidden;padding:5px 10px;text-align:left;width:230px} </style> <!-- Perfect Share Box : Created by www.bloggertipandtrick.net --> <div class='multisharebox'> <table> <tr> <td><table> <tr> <td><a class='twitter-share-button' data-count='vertical' data-lang='en' data-related='' data-via='' 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><script expr:src='"http://www.stumbleupon.com/hostedbadge.php?s=5&r=" + data:post.url'/></td> <td><g:plusone size="tall" expr:href="data:post.canonicalUrl"/></td> <td><a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/> <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></td> </tr> </table> </td> </tr> <tr> <td><div class='fb-like-boxtop'> <a class='pin-it-button' count-layout='none' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'>Pin It Now!</a> <a href='javascript:void(run_pinmarklet())' style='height:20px; display:inline-block;'/> <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/> <script type='text/javascript'> function run_pinmarklet() { var e=document.createElement('script'); e.setAttribute('type','text/javascript'); e.setAttribute('charset','UTF-8'); e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random()*99999999); document.body.appendChild(e); } </script> <script src='http://platform.linkedin.com/in.js' type='text/javascript'/><script data-counter='right' expr:data-url='data:post.url' type='in/share'/> <a href='javascript:window.print();'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSAK_7OYpRFXJG389IK3RBYpuhl0LiaL9h5ZqHEsGh6CEJIVTliB1FtZ8P89VbJFtFRGXTgWrmH9bmxaKGAGXyy0y7F7wRS12zGzIPIPWMHdZrTd4RdQNa3sAxOjDCHzwC_0fnl5yRlC8/s1600/printbutton.png'/></a></div> </td> </tr> <tr> <td><div class='fb-like-box'> Do you like this post? <iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=230&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:230px; height:40px;'/> </div> </td> </tr> </table> </div> <!-- Perfect Share Box : Created by www.bloggertipandtrick.net --> </b:if> </a>
6. Preview template and Click to Save .