add social sharing widget below the 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/AVvXsEhJdUCaSRTjhzcXJxgiCVVS44-aY0zzoX2YjezHkm3WXTyFosqtiwYTJcbZlfsOgFXpV6AKE2R1-aVxCjZlhIPeRRTL7ibGZE1lf0QSalCaXcP_robMYXW5r-uAULJEgo21-tFbNBttaE0/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/AVvXsEiRbBQk8q8VCJiTmU_huTpJw2qYRfCRYg0CllTG1J8POdPMrQAlxy7Z7Iqhbp0ijjpftBiU3zljB47W3UJNgQHTkuzrGj1b5ZpqxQBTtTqu-ztE98SHDZGgUPR0g8aeX8TW5WtVzvzLhCU/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/AVvXsEgxVgb2cXN1tLG9k8iH4TT686gnJC7iiE3Zo8uXmSG0OPS0BdN2c0seU-HHq5Led5vUwSCjZlLl8pggbibqGYn4EWDrWbrTmnwBJ1KNzcwKTPM7FcpYRpUPjFCHJSWdlGQ_Zd8gAVNekcY/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/AVvXsEgfcOR2aEHs13cRtoquKBg6rjIeAhqfv1Vm-GrIZTPtSW67iZkM6_lk5_Q5nd-DlctA3nKEdo2VQ0pJl7tL2tXUdCW3NQ41gBPWvcA9uJfaq-X-5uHjduSHJd8DPCT1y8C01IPe91nqLkw/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/AVvXsEgTUabkaVew_dUVD_Po3qX3O01iGKBMFbmjifKnVcgBZWaPO13QW7yvi2NQQOw22a3jr7f2chJA7Gd30aygbkKm4kZRlTns6MO9ZKgRmhP77_R9QFirud_QxWfpkZPvToM5nd2IURaaq3E/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/AVvXsEgVA3_yaD9C5t1Rw7UPWDDIM9Ivu_tDfW6JrR8uHzMoyeiwNvpuD1KvmnEB2hmu1FGcXsMgFSGUIgBppS7O2d4VVIWfVq7cm6B4BeqKUXtyGvXQ2DrPNemb60K1gxrdeV92uEz0C7xgm9Y/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
Source :
www.mybloggertricks.com