How To Add Perfect Share Box to Blogger

Posted by Lasantha Bandara File Under : bookmarks, button, email, facebook, twitter, widget 39 Comments

In this tutorial, I am going to show how to add a useful share box for your blogger blog. This share box contains official Tweet button with counter, official Facebook share button with counter, official Google plus button with counter, official Stumbleupon button with counter, Pinterest button, Linkedin button, Print button and Facebook like button. I have configure all this button for Blogger blogs, so you can add this share box quickly to your blog.

Tutorial Updated : 2013/01/22

Perfect Share Box for Blogger Blogs

Now follow the steps given below to add this share box for your blog.

1.Go to "Template" --> "Edit HTML" of your blog.

2.Click on "Expand Widget Templates"

3.Add this code just above <head> tag:

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'>
{lang: 'en-US'}
</script>

4.Now Scroll down to where you see below code:

<div class='post-header-line-1'/>
 

5.Copy Share Box code given below and paste it just below the above code.

NOTE: If you can't find <div class='post-header-line-1'/> in your template, paste your "Share Box" code just 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='&quot;http://www.stumbleupon.com/hostedbadge.php?s=5&amp;r=&quot; + 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='&quot;http://pinterest.com/pin/create/button/?url=&quot; + 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(&#39;script&#39;); e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + 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='http://4.bp.blogspot.com/-2gJyVWWzvxo/UP4jFrCs6-I/AAAAAAAAECY/WE5hMFoeSwA/s1600/printbutton.png'/></a></div></td>
</tr><tr>
<td><div class='fb-like-box'>
Do you like this post?
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=230&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' 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>

Note : This share box now will add to your Blogger post pages only. If you want to show it in every pages, then simply remove green lines from the code.

6. Save your template and you are done.

«
»

39 thoughts on “How To Add Perfect Share Box to Blogger”

  4. @Emma

    .multisharebox {
    background: none repeat scroll 0 0 #EFEFEF;
    float: right;
    margin: 5px 0px 3px 10px;
    padding: 0 5px 0;
    text-shadow: 0 1px 0 #FFFFFF;
    width: 260px;
    border:4px solid #d8dfea;
    }

    Replace above code with below one:

    .multisharebox {
    background: none repeat scroll 0 0 #EFEFEF;
    border: 4px solid #D8DFEA;
    float: left;
    margin: 5px 10px 3px 0;
    padding: 0 5px;
    text-shadow: 0 1px 0 #FFFFFF;
    width: 260px;
    }

    Reply

  7. nice tips.
    i want to create a light box in asp.net that show adsense ad. and this light box run at page_load time .. how to do this ?? plz help

    Reply

  8. Lasantha.

    I need a help from you, do u have any solution for page not found redirect to homepage.

    Reply

  9. Hi Lasantha,

    Please help me !

    Links : BLOGTHIS! | EMAILTHIS! | PRINTTHIS! is not working !

    Why ?

    Reply

  15. Hey, can you help me settle my new theme I just installed. It's actually your theme - NewsStation Blogger - and I have some problems with the Videos/Tags/Blog Archives js widget. It doesn't work and also I would like to transform it to show be something like Recent posts/Recent comments/Blog Archives. Can you give me some pointers?

    Reply

  19. Hello lasantha bro i having problem to inserting your code,i haven't find any (class='post-header-line-1) code in my template,plz help me......my blog address is http://gprsbay.blogspot.com

    Reply

  23. Hi, could you give me some advice on alignment on my blog www.golfcentraldaily.com. Ive tried everything to get the left column the same as the right but it just skews over. There's a big unused space to the left of the left column. Driving me crazy!!! Thanks

    Reply

  30. Thanks A lot good post

    Visit My Sites

    http://carspeakersandsubwoofers.blogspot.com
    http://everi-thing.blogspot.com

    Reply

  31. wow cool one again...thanks Lasantha.If u can please help me to grow my blog... Yasith from Sri lanka.

    Reply

  37. Hi,

    I used your "Elegant" blogger template today for my wedding blog. I have 2 questions I hope you can help.

    How can I make the header BIGGER? 460 X60 is too small.

    How can I move this multishare box to the bottom of my blog posts?

    Thank you so much!! Your site has been extremely helpful 🙂

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.