Add Social Media Share Widget To Blogger/blogspot With Cool Hover Effect

Social sharing is a most important thing to all blogger. It increases traffic on your blog. I gave many widgets about social sharing,but today's widgets is totally different from them. I added a cool mouse hover effect you can add this in very simple steps. Let's see How to install this widget....

Adding The Social Connect Widget To BlogSpot

1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Search for ]]></b:skin>  and paste the following code just above it.

/*  -------------BTSNTS SOCIAL SHARE WIDGET-------------------- */ 
#search{width:350px; border:1px solid #E0DFD9;background:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFAv7gD9DgpDc-nrsuLc8JBX5znsL0wJqYCZkcbuYk5_fyxUHr7aY_Fo4g2XELb-2s1b00LbczEYagoPXFFOKodrcINNFUQHdSxGmwrSR-Uos-Og3xc-nKPMefXfhlwFOTxJRlify2mJA/s1600/search-bg.png) left top repeat-x;height:32px;padding:0;text-align:left;overflow:hidden} 
#search #s{width:80%; background:none;color:#3F3F3F;border:0;padding:4px;margin:3px 0 0 12px;float:left} 
#search .search-image{border:0;vertical-align:top;float:right;margin:8px 4px 0 2px} 
#search-wrap{padding:15px 0} 
.topsearch #search{margin-top:0;margin-bottom:10px}

.social-connect-widget{background:#FFF;border:1px solid #E7E6DE;padding:10px} 
.social-connect-widget:hover{border:1px solid #CBCBC2;background:#F5F4EF} 
.social-connect-widget a{text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E} 
.social-connect-widget a:hover{text-decoration:underline;color:#F77C04} 
.social-connect-widget img{vertical-align:middle;margin-right:5px} 

To Change width of search box edit width:350px
To change width of search input area edit width:80%

Then Search for <div id='sidebar-wrapper'>

Now Paste the following code just below it .

PS: In this part most of you will face problems as the coding for each template differ. If you could not find this code then do not panic and simply post your Blog URL in the comments

<div class='topsearch'> 
<div class='clerfix' id='search'> 
<form action='/search' id='searchform' method='get'> 
<input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search here...&quot;;}' onfocus='if (this.value == &quot;Search here...&quot;) {this.value = &quot;&quot;}' type='text' value='Search here...'/> 
<input class='search-image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaVFwZNl4wb2Iu8ZLVYWPqJ9IgRBvAn0lh0IsgzTO2tBZcCdNd4rUY9-180Npsu4d4_H37aNBnhSjNZgQxH5VcDQBzcj1a5maFmXXzzloiDUpo0cuQWEhQe2y8njEjE-jsdZQQCYeQfWs/s1600/search.png' title='Search' type='image'/> 
</form> 
</div> 
</div> 
<div style='clear:both;'/>
<div class='social-connect-widget' style='margin-top:0px;margin-bottom:10px;'> 
<a expr:href='data:blog.homepageUrl   &quot;feeds/posts/default&quot;'><img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2hd4x_agF4UhiUekTPuIYnkNWgxjLbl3XuTa6_smjxoXsuWmH5Tw1Jto4eLJ2NoYHTgHA7ra3P6SQacSHcVOY41C8N7qySc_LDdzH5sVPbtrEBMYG4MHQKm51iH_xXwrKkUwbRgPG837F/s1600/social-connect-rss.png' title='RSS Feed'/></a><a expr:href='data:blog.homepageUrl   &quot;feeds/posts/default&quot;'>Subscribe to our RSS Feeds!</a> 
</div> 

<div class='social-connect-widget' style='margin-bottom:10px;'> 
<a href='http://twitter.com/USERNAME'><img alt='Follow Us on Twitter!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXaVdjimSnTxeSi2j7OfBSBBAx2QiVqWxwjX3JR2bmqUxx48mZ0HIg4BqPkYtqymsAPEck9VhQxDWuzIcynhlX55Q-E_zj58BqUa9CC0aOt5r5SoPXeqNHhqZ5DHWU83a9LTb5f1jLdyxB/s1600/social-connect-twitter.png' title='Follow Us on Twitter!'/></a><a href='http://twitter.com/USERNAME'>Follow Us on Twitter!</a> 
</div>
<div class='social-connect-widget' style='margin-bottom:10px;'> 
<a href='http://facebook.com/USERNAME'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlQ2gDJU7r9pxQltTERaV5fiqI_9bxFejB-it5T-2CYSFOz-pcNyoNhSD2TveQo_aRakKLujJY2fQUCDtfrP6Vq4K5q7S8eKjdytrUrE2c9bAGt5SGk7k7M6L8fW3Dg-qB2MsnnmhM_leu/s1600/social-connect-facebook.png' title='Be Our Fan'/></a><a href='http://facebook.com/USERNAME'>Follow us on Facebook!</a> 
</div>
<div style='clear:both;'/>
<div class='addthis_toolbox'>   
<div class='custom_images'> 
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZDx8WuUp-OQuyPEjgxpCQk7HlDJjlzV7c2MeJFM8TwZYg1YdGsjeUkve_wXNw22e93GNM4ybHFJyOqNUOZnuwY1St5J_jbrVXO1dKDrOc1JOjwZr8QE63p_jGCE8tor7UEkBESXfOhJw/s1600/twitter.png' width='32'/></a> 
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOJ0t2lz_S7ls0NDRmboxeG_YirfY4miFvGkgOyKNhX0X6IElsoUYlq9ISj8PT_j1u1JcLEj2Emp3g3kdrmJ_sxP5jEC8HyF_3flOg-inoXepqp8BjcPMOmzZ41_6vzqvUqh3nU9pZcGQ/s1600/delicious.png' width='32'/></a> 
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPDhMoO_9CMD5F7XMOqk0dWBBqNavT9PmbyI4ES4irfZp82rFXAIg3KSG8nfwesNYgp2bOdptoUV3S-Hoo7BfEzvD4Qkwo-y9J0uot_zUgJzfavwmztNl6vYz1KZ-8fJPRM_ly3i55qm0/s1600/facebook.png' width='32'/></a> 
<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC-u49Hdc4dwcnQ2sQd0gx3y12AqjPejrOW3Rk-V7jDCU3PAK3OIvIc7LMi9NlpMD5lwok_N89_t9qBltdoBJ2rPApf16ou0TvvkEvqtElRUKva0s3ZkwzV-89odH3v_uUtWsLy5ENiak/s1600/digg.png' width='32'/></a> 
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5szJZbPv6vAvtjZ1fn5ffHBRLR4yIs-YBPpyCZrbDXnn_Qx35uzzy-UFD1k58k1-9B5_rqg7FwgUHJleSSK8AUUxEZ3wFYSTqIJgKiNp6QI4Sm1ZhNa499Hn1osyY4pJczOUpbv4y8YY/s1600/stumbleupon.png' width='32'/></a> 
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6qfhbIGt_Gb-0xLo9Xt5PFrAFfM0_cm5LO-usyaS5eLfZlyxYyWErNJdndoVKNHl6Qk2qAljIof4UDUY09wJwSkivAxaC0ILexipmNxxFr7aSoQrydUpgo3Lxs1sQ8Cj-n-tqHF88yP8/s1600/favorites.png' width='32'/></a> 
<a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5xRdSgx3l0Z9eFUZlnr7MN5zmoZZ2uVUVmfnv9L0-rVyYwFT2GW103kYKyb7ZGda5FZGwhba-GwRC1lFhppsHIa2I_qB-YM5uZAWxa0iTFGR_eX5OqJlNFF9-Sf7PLOyGXdoPZp-DiDw/s1600/more.png' width='32'/></a> 
</div> 
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/> 
</div> 
<div style='clear:both;'/> 

Replace http://twitter.com/USERNAME with your twitter profile link.
Replace http://facebook.com/USERNAME with your Facebook Profile link
Now save your template and refresh your blog to see your new widget.
Thanks Mohammad Sir......