Add Social Networking Buttons Below Blogger Posts

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5RfNHeHfnqScvViBLZwvI6LpeB70ZStsng2fSq7yIYHOKay5qAT5JnasjUijrT5tY_D50eZnsVT8CMTlqwPDncQ6CjYHBM0EtNxW5USvxxqZKkEIKR85cve-6PTNXDC0VjxcrC5F8-XQ/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2XzGa2A4DIyeIbnP8_TDxnHmtgPoC5KHKNOCwgbe7XRbXbivHLmU9ZwX5deG6MHjpw_I6xhf_zf3UaP_HnWzuHW-BRpP_OaD_TSMHD3ik588yffwr0MbWRp49D0OR9lApE99cOoagyUI/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhraltO_nMenXBvKqXm8DefL1wi2s780cQ8VVHkwdc6TslBXPr8SS1HN87ERsLnHUsaJTS9icAY3GpBa6usKx0VOyqJ9gz34lOWDTkZi4CZY3YkyrFJYW3wcjHzYDO-aZ_1n_gfB4bTQ04/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEwlMRlpNL02tK9j50gM665eqwITifEkXJLUpfnUk2e9qN1whMzrQShEKnUVs0afqieDRr5TRu26Mewxgps6K0h5zYK17SQ3e9oc0v73qRg3F0BVdMoeGSDYh-cMb7qJ7IEvv-w8yv6Zg/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgudfXYd7lUpg5i_t0JbpHhSTV0EXhVptZF1vqmUrl0w7hBjbgvZgb_n6TGNcxiyhvRIyqXQPEk6fwBoC-xQeRGLiT98Eroy4rUrwgYgMdgQay3yKVTh7jhXdlA5lfXDBnw3S4pm8cXp6o/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4pJpz9CLplLEab0jfOqj8aFGc2ur1bgYNQa_hFUmSt-arftxGFvKP-bbFotALBt8ehfxUS87ubzZzZHYDl-exDAPkI-oFkCNPqjemv_TJp0PBZalV6z_4LYP5zAwNFj5GJHQnv7vjw4U/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,