Blogger Share Buttons not Showing Up - Fix Now

Few days back I tried to add share buttons on my blog, but I was shocked to see that it didn't work. I tried several share button providers, but I got same result. so I decided to try other ways, I got some good results. Then I decided to share it with you guys, I am sure it will help you in a unique way. I am sure it will help you to teach so many things as well. So lets start...

Add New Share Buttons

Lets add new share buttons, these share buttons may not have button count with them. This is the only bug that you may hate in it, but I think something is better than nothing. I will tell you step by step in this tutorial. If you face any problem then you can comment below.

Free Keyword Research Tricks to Boost Traffics

• Login to your Blogger account
• Select that blog you want to add
• Goto Template from the left side bar menu.
• Here you will find a box edited with .xml coding, this is your template in .xml text format.
• Click on the box and search for the tag shown below.

<div class='post-footer-line post-footer-line-1'>

• You will find two such codes, I think you should go for the second line. Add this code under that line.

<div class='icons-social'><span>Share:</span>
<ul class='social-icons' id='social-iconss'>
<li class='facebook'>
<a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' onclick='window.open(this.href,&quot;sharer&quot;,&quot;toolbar=0,status=0,width=626,height=436&quot;); return false;' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a>
</li>
<li class='twitter'>
<a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a>
</li>
<li class='Google'>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href,   &quot;&quot;, &quot;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600&quot;);return false;' rel='nofollow' title='Share this on Google+'><strong>Google+</strong></a>
</li>
<li class='stumbleupon'>
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a>
</li>
<li class='digg'>
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Digg this!'><strong>Digg</strong></a>
</li>
<li class='delicious'>
<a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a>
</li>
<li class='linkedin'>
<a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' title='Share this on LinkedIn'><strong>LinkedIn</strong></a>
</li>
<li class='reddit'>
<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a>
</li>
<li class='technorati'>
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a>
</li>
</ul>
</div>
</b:if>

Adding Styles to Buttons

Now lets add some CSS in to Share Buttons, because these share buttons are nothing without CSS.

• Press Ctrl+F and Find the code shown below

</head>

• Now paste that code just before the Head tag.

<style type='text/css'>
ul#social-iconss li{float:left;position:relative;list-style:none}
#social-iconss a{width:19px;height:20px;display:block;margin:0 3px;background-image:url(http://3.bp.blogspot.com/-GnsWJY-Hblo/UIbck16A3BI/AAAAAAAAGJM/qdog-XGwwQE/h20/sprite+images.png);background-position:0 0;background-repeat:no-repeat}
ul#social-iconss li.facebook a{background-position:-19px 0}
ul#social-iconss li.twitter a{background-position:-116px 0}
ul#social-iconss li.Google a{background-position:-39px 0}
ul#social-iconss li.stumbleupon a{background-position:-97px 0}
ul#social-iconss li.digg a{background-position:0 0}
ul#social-iconss li.delicious a{background-position:-136px 0}
ul#social-iconss li.linkedin a{background-position:-58px 0}
ul#social-iconss li.reddit a{background-position:-78px 0}
ul#social-iconss li.technorati a{background-position:-155px 0}
#social-iconss strong{display:block;width:auto;padding:4px 7px;position:absolute;background-color:#333;color:white;left:200%;bottom:40px;-webkit-transition:all 0.3s ease 0s;-o-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s;-moz-transition:all 0.3s ease 0s;-khtml-opacity:0;-moz-opacity:0;opacity:0;visibility:hidden}
#social-iconss li:hover strong{left:20%;-khtml-opacity:1;-moz-opacity:1;opacity:1;visibility:visible}
.icons-social{height:32px;position:absolute;bottom:0;left:0}
.icons-social span{float:left;font-size:150%;text-transform:uppercase;font-family:&#39;Oswald&#39;,sans-serif;padding:5px 5px 2px;background:#359bed;margin-right:5px;color:white}
ul#social-iconss{float:left;margin:7px 0 0;padding:0}
</style>

• Now if you have done everything properly, then it will go fine. Your Share buttons will be be shown instantly as soon as you put the code.

Backup ypu Blogger Blog and Template, Read now

Why it Causes Problem?

I think as the time is passing, so many people are joining the Blogger. I have so many friends who are successful bloggers, but sometimes I am unable to visit their blog. When I try to open their blogger web address, it redirects me to Google.com. Maybe Blogger is facing server down problem. Anyway, we got to stick with it unless it starts charging fee.