Pin It

Widgets

How to Add Stylish Set of Share Buttons to Blogger 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.

Stylish-Share-Buttons

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


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.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div style='padding:4px;'> <table border='0'> <tbody><tr> <td> <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> </td> <td> <div style='margin-right:10px;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; 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> <td> <div style='margin-right:10px;'> <g:plusone expr:href='data:post.url' size='medium'/> </div> </td> <td><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>

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.

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.


Stay Informed, Inspired and Motivated With Our Free Daily Tips. Add Your Email Now, Don’t Worry, Your Email Address Is Secure:
Enter your email address:

Confirm Your Email Address After Subscribing
We hate spam just as much as you do.


Enjoyed This Article? Follow us on Facebook or Twitter or add us to your circle on Google+ for our new updates.

1 comments so far. What are your thoughts?

Olusegun Fapohunda said...
Reply To Comment

@Mtaki Rugina Gamba, it works, may be you don't get the configuration very well. Try using the sharing widget available here, as it doesn't require you editing the template.

Click Here to Leave a Comment

Don't just read and walk away, Your Feedback Is Always Appreciated..

Note:
Please do not spam, spam comments will be deleted immediately upon review.

Like US on Facebook