Pep's Top Blog

It is no wonder with the explosion of Social Media Networkings, which are called web 2.0 as well in recent years.
Google, Facebook, Twitter, Flickr, Digg, and etc.
Many of them have become a very important part of our lives.

By adding social media buttons to your blog, your readers will easily share your posts with their friends. And it will truly enhance their experience and definitely boost your blog’s traffic.

Adding social media buttons to Blogger is not as hard as you imagine.
There are only three simple steps:

1. Open Blogger template and find out where to add social media buttons.

Go to Blogger’s Dashboard, find “Layout” section, then click on “Edit HTML” link.
After that, click on “Expand Widget Templates” checkbox.
Now find (CTRL + F) following line:
<div class='post-footer'>

2. Immediately after that line, add these codes:

<div class='post-footer-line post-footer-line-0'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
Share This:
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src='REPLACE YOUR IMAGE URL HERE'/></a>

<a expr:href='&quot;http://twitter.com/home?status=Check this Out: &quot; + data:post.url + &quot; | &quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Twitter' src='REPLACE YOUR IMAGE URL HERE'/></a>
</b:if>
</div>

3. Just replace “REPLACE YOUR IMAGE URL HERE” with your own social media icons’ url.

Click “SAVE TEMPLATE” button and refresh your blog page to see the effect.

Frequently Asked Questions.

Q: Where can I find free social media icons?
A: Visit my picasa album which is a category about social media buttons.

Q: I want to show these social media buttons not only below my posts, but also in my homepage.
A: Just remove line “<b:if cond=’data:blog.pageType == &quot;item&quot;’>” and “</b:if>” in that codes.

Q: Can I move these social media buttons position?
A: Yes, You can.
In Blogger’s “Edit HTML” textbox, added codes are just above “<div class=’post-footer-line post-footer-line-1′>”, you can move those codes to where above “<div class=’post-footer-line post-footer-line-2′>” or “<div class=’post-footer-line post-footer-line-3′>”.