Add Social Media Buttons Below Blogger Posts


Social Networking buttons
So Far we added social media 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 Media Sharing 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,


Need Quick Help within 24 Hours? ASK NOW



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 »

12 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. Assalam-o-Alaikum Brother. I Tried To Find This Code That Is Below. But I Found Nothing. What's Problem With Me???

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

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

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

    ReplyDelete
  6. 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
  7. 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
  8. Can you please tell me the code for this if I want to make pinterest as well. Thank you :)

    ReplyDelete
  9. 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
  10. Can you add a button for Google+1 ?
    Thanks!

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