July 1, 2011

Add Social Networking Buttons Below Blogger Posts

Social Networking buttons

So Far we added social networking buttons below posts in different forms and today we have yet another cool design with our Flapper Icons in it. These social icons are arranged in symmetrical order and size with image opacity effect added to each by default. The social buttons go fade on mouse hover and stick to the bottom of all your posts thus increasing the traffic to your blog. The steps of installing it are really simple.

Live Demo

How To Add Social Networking Icons In Blogger?

To add these icons below posts kindly follow these steps,

  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Click the "Expand Widgets Template" box
  4. Search for this,


and just above it paste the Opacity code below,

/*------------ MBT Image Opacity--------------*/

.Fadein img {
-moz-opacity: 1.0;
opacity: 1.0;
.Fadein:hover img {
-moz-opacity: 0.30;
opacity: 0.30;


     5.    Next search for this code,


and just below it paste the following code,

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<center><span style='color: #7AA1C3; font-size: 12px; font-family: Verdana;'><b>Thanks For Making This Possible! Kindly Bookmark and Share it.</b></span><br/><br/>
<a class='Fadein' expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' height='64px' src='http://4.bp.blogspot.com/_7wsQzULWIwo/SqGGYWGbF8I/AAAAAAAABxU/o5IHL_Ciwss/s400/TECHNORATI1.png ' width='64px'/></a>
<a class='Fadein' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank'><img alt='Digg This' height='80px' src='http://3.bp.blogspot.com/_7wsQzULWIwo/SqGGHk_dvrI/AAAAAAAABwk/kmAe1jCxrGA/s400/DIGG1.png ' width='80px'/></a>
<a class='Fadein' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' height='100px' src='http://4.bp.blogspot.com/_7wsQzULWIwo/Ssnw2ChIPXI/AAAAAAAAB5U/bgiT3bu2_xo/s400/stumble1.png' width='100px'/></a>
<a class='Fadein' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' height='100px' src='http://1.bp.blogspot.com/_7wsQzULWIwo/SqGGJWOkYZI/AAAAAAAABxE/_cOecHZDRsY/s400/REDDIT1.png' width='100px'/></a>
<a class='Fadein' 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' height='80px' src='http://4.bp.blogspot.com/_7wsQzULWIwo/SqGGIS5ncrI/AAAAAAAABw0/LaZwhbVchUQ/s400/FACEBOOK1.png ' width='80px'/></a>
<!-- Twitter -->
<a class='Fadein' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Twitter' height='64px' src='http://2.bp.blogspot.com/_7wsQzULWIwo/SqGGZCTqMOI/AAAAAAAABxk/eAIBpRqgJiE/s400/TWITTER1.png' width='64px'/></a></center>



    6.  Save your template and you are done!

Visit your blogs to see a beautiful change. :) You may also like these social networking buttons and widgets,

Need Quick Help within 24 Hours? ASK NOW

Free WordPress Installation Service!

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

33 comments : Post Yours! Read Comment Policy ▼
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Done :) Just added titles myself. And the img alt in Reddit is wrong :P

    Btw there is a news that Google has blocked all co.cc domains from search.

  2. This blog on has helped me in getting additional information about and also helped me see big picture context, which is valuable.


  3. I think many social networking sites in the search engine but some most important site available like facebook, twitter, digg, stumble upon, Google buzz, linked in, delicious, etc. Socialkik.

  4. This comment has been removed by the author.

  5. This comment has been removed by the author.

  6. Assalam-o-Alaikum Brother. I Tried To Find This Code That Is Below. But I Found Nothing. What's Problem With Me???

  7. Assalaam-O-Alaikum bro. This Didn't Work For Me? What I Have To Do Now?

  8. Can you help me how to change read more link to a beautifful "read more" button in wordpress

  9. Can you help me how to change read more link to a beautifful "read more" button in wordpress

  10. Thanks for Sharing very useful information

    I've implemented this in my blog...


  11. Hey!
    Been searching for awhile & I love this!
    Isnt there a way to make this show up on the home page under the posts too? Something about removing
    but I am not sure. I am in no way skilled at this. Just a rumor I heard.


  12. Thanks, It worked for me. My name is Muhammad also :) .I have some crawl errors in my blog: I wish you can help http://scienceuniverse101.blogspot.com/

  13. Thanks Buddy.

    this post is my guide on how to add my social buttons before the post body....;-)

    please visit my Blogsite: http://www.lifebeyondlimits.info/p/write-for-us.html


  14. Can you please tell me the code for this if I want to make pinterest as well. Thank you :)

  15. Asalam Alaykum, I will be using images that are 22x22 and only pinterest, twitter and facebook oh and google+ and I want them over to the right. I have been trying to do this for days I would really appreciate if you could help me, thank you.

  16. Can you add a button for Google+1 ?

  17. nice widget, thanks for sharing this :)

  18. This comment has been removed by the author.

  19. Bro Doent Work For me

  20. Will i able to rearrange these button ?

  21. Thanks I added this widget to my blog
    looks great this will help publicize my blog

    thanks once again for sharing

  22. Please provide us some more information how to set up a new blog under new rules of google like Penguain , Panda and other page lay outs

  23. How to search for the "]]>" and the "" codes ?? there is a lot of stuff and I am not able to search them !! Help me !!

  24. Excellent tips, keep it up. I use this sharing widget on my blog.


  25. Great post. It really worked on my site and also looking beautiful.



  26. Its must be an outstanding post ever i had never seen before and i really enjoy your

    Thanks for the post and have a great day..by PSY 201 Week 3 Assignment

  27. It’s finally happening: the ice is thawing, flowers are blooming, and birds are chirping. Spring is time for a fresh start.
    You’re getting motivated to de-clutter your garage or basement around this time of year.Please see to details click here.