Advertisements

How To Add Perfect Share Box to Blogger

Posted by Lasantha Bandara on January 22nd, 2013 File Under : bookmarks, button, email, facebook, twitter, widget39 Comments
Advertisements

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.

File Under : bookmarks, button, email, facebook, twitter, widget

39 Responses to “How To Add Perfect Share Box to Blogger”

  1. _RosarioZapien_ says:

    interesting right now proves it

  2. D.N.H says:

    Oh. Very cool. I like it! Thanks for share!

  3. Emma says:

    Great tips, thank you! How can I change the alignment?

  4. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    @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;
    }

  5. Bloggslk අයිතිකරු says:

    My comments are going to spam folder. Why is that

  6. ksmnt68 says:

    Thank you very much

  7. yogesh saroya says:

    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

  8. Ravi Saive says:

    Lasantha.

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

  9. iTechPlus says:

    Hi Lasantha,

    Please help me !

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

    Why ?

  10. Beben Koben says:

    so nice that's all collected to be one...hohoho

  11. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    @iTechPlus

    what is your blog url?

  12. Medicalebooks4u says:

    thanks...

  13. Fery says:

    is great bro...

  14. Mihai says:

    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?

  15. Adhie Mempawah says:

    thanks for you tips and trick, nice post.

  16. Nikita Mishra says:

    nice post,thanks for sharing.

  17. free-tech says:

    Great feature, thanks for sharing.

  18. Rishikesh says:

    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

  19. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    @Rishikesh

    add it just before <data:post.body/>

  20. Black Edition Crew says:

    hey...why so big...can it be smaller one...and at the bottom of post..can it be?

  21. vado says:

    thank you sir! check my blog for more stuff :)

  22. The "SpinDoctor" says:

    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

  23. Chuck says:

    Thank you

  24. Xtreamer says:

    hmmm thanks
    check
    and not perfect out of width :(
    http://prolearners.blogspot.com/

  25. Sevi_shine Princess says:

    thanks :)

  26. MooChenk says:

    Thanks for sharing.

  27. NJ_9 says:

    thanks thanks thanks i was looking for this! Superb man!

  28. Waryam says:

    Very Good Bro Can You Add +1 Instead Of Google Buzz

  29. yousefalnatsheh says:

    Thanks A lot good post

    Visit My Sites

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

  30. yasith says:

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

  31. Ravi @Technology Blog says:

    Thanks lasantha for another cool and awesome Blogger trick

  32. Sujon Paul says:

    Nice widget. I like it.

  33. PrimeMagazine says:

    I'm using a similar code, but this one seems better

    thanks for sharing.

  34. My Blogger Trick says:

    nice widget what do you think about Popup Like Box widget for blogger or wordpress

  35. Riya says:

    hi,
    how can i add this box below post
    and left side?

  36. San says:

    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 :)

Leave a Reply