How to Add Beautiful Sharing Buttons to Every Blogpost in Blogger

| ,

How to Add Beautiful Sharing Buttons to Every Blogpost in Blogger

I will teach you how to add a useful share box for your blogger blog. It has the 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 Bloggers, so you can add this share box instantly to your blog.

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='' type='text/javascript'>
{lang: 'en-US'}

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}

<!-- Perfect Share Box : Created by -->
<div class='multisharebox'>
<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='' rel='nofollow'/>
<b:if cond='data:post.isFirstPost'>
<script src='' type='text/javascript'>
<td><script expr:src='&quot;;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='' type='text/javascript'/></td>
<td><div class='fb-like-boxtop'><a class='pin-it-button' count-layout='none' expr:href='&quot;; + data:post.url'>Pin It Now!</a>
<a href='javascript:void(run_pinmarklet())' style='height:20px; display:inline-block;'/>
<script src='' 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;src&#39;,&#39;; + Math.random()*99999999);
</script> <script src='' type='text/javascript'/><script data-counter='right' expr:data-url='data:post.url' type='in/share'/> <a href='javascript:window.print();'><img src=''/></a></div></td>
<td><div class='fb-like-box'>
Do you like this post?
<iframe allowTransparency='true' expr:src='&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;'/>
<!-- Perfect Share Box : Created by -->


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 code in line 1 and line 48  from the code.
6. Save your template and you are done.


How to Hide Widgets in Homepage and Other Pages of Bloggers

How to Show Ads Below First Post in Blogger


1 thought on “How to Add Beautiful Sharing Buttons to Every Blogpost in Blogger”

Comments are closed.