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

DEMO

crtl  +  f  ]]></b:skin>

/*  -------------ScriptJabbers Social Share Widget----------------- */ 
#search{width:350px; border:1px solid #E0DFD9;background:urlundefined(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQoBEmCww6zy0uyh3tej3I5Xgh5wUeok4GKZj_Gl_E7o3jAf6NCZIiiibv4DA_r8WVYjq4BeGJOCBYxzCUBRNjPtpM0-1mm1drJQzMblmgTCbBgi8E_Bfs5G9-6k-Sb9d93KS4BshGwLg/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}

HTML

<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='http://i1304.photobucket.com/albums/s526/aditya29best/Widget%20Create/search_zpsa5bb4010.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='http://i1304.photobucket.com/albums/s526/aditya29best/Widget%20Create/social-connect-rss_zpsb476b1b8.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='http://i1304.photobucket.com/albums/s526/aditya29best/Widget%20Create/social-connect-twitter_zpsd7b1aef5.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='http://i1304.photobucket.com/albums/s526/aditya29best/Widget%20Create/social-connect-facebook_zps162d5155.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='http://i1304.photobucket.com/albums/s526/aditya29best/Widget%20Create/twitter_zpsa3dece11.png' width='32'/></a> 
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='http://i1304.photobucket.com/albums/s526/aditya29best/Widget%20Create/delicious_zpsdbe8541c.png' width='32'/></a> 
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='http://i1304.photobucket.com/albums/s526/aditya29best/Widget%20Create/facebook_zps221dd318.png' width='32'/></a> 
<a class='addthis_button_digg'><img alt='Digg' height='32' src='http://i1304.photobucket.com/albums/s526/aditya29best/Widget%20Create/digg_zps5bff6553.png' width='32'/></a> 
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='http://i1304.photobucket.com/albums/s526/aditya29best/Widget%20Create/stumbleupon_zpsb966d226.png' width='32'/></a> 
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='http://i1304.photobucket.com/albums/s526/aditya29best/Widget%20Create/favorites_zps07620dc3.png' width='32'/></a> 
<a class='addthis_button_more'><img alt='More' height='32' src='http://i1304.photobucket.com/albums/s526/aditya29best/Widget%20Create/more_zps50cf1bbc.png' width='32'/></a> 
</div> 
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/> 
</div> 
<div style='clear:both;'/>