How To Add Social Buttons Below Blogger Posts Horizontally?

We already saw how to add some nice social buttons/bookmarking buttons on Blogger posts. Today, we shall see how to add some of my favorite buttons together in one single post. We shall consider adding Facebook, Twitter, Google Plus, Digg and StumbleUpon buttons to Blogger. We will align the buttons horizontally below the Blogger post titles.

Straight to the tutorial

IMPORTANT:
Backup the template before proceeding.

Let’s implement the Social Media Buttons with below Blogger Post titles:
Step 1. Go to Dashboard > Choose Blog > Template > Edit HTML > Expand Template Widget.
Step 2. Search(Ctrl+F) for <data:post.body/>

            and just before that add the following code.Note: if you find multiple <data:post.body/> then consider the first code.

Step 3. Code for Social buttons to appear:

<div style='padding:4px;'><table  border='0'><tbody><tr></tr></tbody></table></div><!--Code For Social Button Ends-->

The above codes would produce the following Social media buttons:

Pink - StumbleUpon code

To reorder/remove the social buttons, just cut and replace it accordingly based on the color.

Step 4. Save the template!!!!! :-)

1. In the first code, change iTechColumn to your Twitter short name.2. For Google Plus one button, add the following code in your Blogger template:<<IMPORTANT

In your template HTML, search(CTRL+F) for ]]></b:skin> and just below it add the following code:

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

If you already have a plus one code on your Blog, then please skip this code.

Hope you liked this article. Thanks for reading. Catch you again later with more tutorials.

~iTechColumn

About The Author

Karan Vyas is the founder at itechcolumn.com, a 19 year old student pursuing his B.Tech in ECE.He is passionate blogger,Web Developer having vast knowledge on reverse engineering,hacking,software developement.Apart from this he is involved in witchcraft black magic and hypnotism.

Leave a Reply

Your email address will not be published.