A Great Point to Learn Tutorials

[an error occurred while processing the directive]

Thursday, December 25, 2014

How to Add Stylish Set of Share Buttons to Blogs

If you want your blog to be popularly known among the vast numbers of blogs on the internet, you need to use social bookmarking site.As a blogger, you need to add a social sharing widget to your blog so that your blog visitors would be able to share your blog contents with friends on their network easily with a single click. So today, I want to share a stylish set of share buttons that bloggers can easily install and use on their blog. The image below shows how it will appear on your blog. 

How to Add the Share Buttons to Blogger

Stylish set of share button

1.    Sign in to your blogger dashboard
2.    Go to Template >> Edit HTML >> Check the Expand Widget Template box
3.    Now search for <head> in your template and paste the code below above </head>

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>
4. Search for  <data:post.body/> in your template and paste the code below above it if you want the share button to show after your blog title or paste it below it if you want the share button to appear after your post.

Also Read: Get Social Bookmarking Button to Blog

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:4px;'>
<table border='0'>
<div style='margin-right:10px;'>
 <a class='twitter-share-button' data-count='horizontal' data-via='justnaira' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<div style='margin-right:10px;'>
 <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url +
action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden;
margin-left:0px; width:100px; height:20px;'/>
</div> </td>
<div style='margin-right:10px;'>
<g:plusone expr:href='data:post.url' size='medium'/>
<div style='margin-right:10px;'>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>   <script
src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/> </div>
<td> <a href="http://www.helpnagaruntari.com">Grab It </a></td>

If you’re good at CSS, you can change the color code and you can a well re arrange the order of the button or remove the ones you don’t need.

Also Read: Installing Pligg CMS to hosting server for Social

5. Finally, Save your template

If you encounter any difficulty in the process of adding this widget to your blog, don't hesitate to use the comment box below.

Posted by Akhilesh Kumar
I am a blog scientist and a professional blogger. we writes on this blog about Tech, Blogging, SEO, Social Networking Site, News, Search Engines Traffic, Make Money Online, Life Hack and Making Life Successful. our blog NagarUntari receives 10k Pageviews per month. I do share on this blog regularly.

Let's Get Connected: Twitter | Facebook | Google Plus


Post a Comment

Comment FAQs

     * All Comments are Moderation.

     * Please Do Not Spam Us.

     * Please Don't Use any Link or HTML Code with Comment.


774 People
6584 People
654 Fans
574 People


  • Blog Tips (88)
  • Blog Widget (7)
  • Computer Tips (1)
  • make money (33)
  • Mobile Tips (13)
  • nagar untari city (12)
  • Other Tips (16)
  • SEO (41)
  • Social (5)
  • wordpress tips (22)


Subscribe for our all latest news and updates
[an error occurred while processing the directive]