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,

]]></b:skin>

and just above it paste the Opacity code below,

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

.Fadein img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.Fadein:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}

 

     5.    Next search for this code,

<data:post.body/>

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>
<!--DIGG-->
<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>
<!--Stumble-->
<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>
<!--Reddit-->
<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>
<!--Facebook-->
<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>


</b:if>

 

    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,





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 ▼
PLEASE NOTE:
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.

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

    SEO

    ReplyDelete
  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.

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. This comment has been removed by the author.

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

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

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

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

    ReplyDelete
  10. Thanks for Sharing very useful information

    I've implemented this in my blog...

    Thanks,
    Wiki
    http://infodirectory.blogspot.com/
    www.wikiconsole.com

    ReplyDelete
  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.

    Thanks!

    ReplyDelete
  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/

    ReplyDelete
  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

    -jayryan09-

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

    ReplyDelete
  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.

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

    ReplyDelete
  17. nice widget, thanks for sharing this :)

    ReplyDelete
  18. This comment has been removed by the author.

    ReplyDelete
  19. Bro Doent Work For me
    http://www.webscythe.info

    ReplyDelete
  20. Will i able to rearrange these button ?

    ReplyDelete
  21. Thanks I added this widget to my blog
    looks great this will help publicize my blog
    http://profitclickingviewz.blogspot.com

    thanks once again for sharing

    ReplyDelete
  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
    sports-inside.blogspot.com

    ReplyDelete
  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 !!

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

    www.gis-techniques.blogspot.com

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

    http://www.gethdwallpapers.in

    ReplyDelete


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

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

    ReplyDelete
  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.

    ReplyDelete