Hi blogger’s In this post I will give you a tutorial about adding Social Media subscribing Widget With Search Bar and Cool Hover Effect to Blogger/Blogspot. Social sharing is a most important thing to all blogger. It increases traffic on your blog, Now lets see how to add  this Widget to your blog.

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

/*  -------------SOCIAL SHARE WIDGET-------------------- */
#search{width:350px; border:1px solid #E0DFD9;background:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQRKy1t-akKT9GsCR7MsF9dxN4HUBbj1FoSZnyqVPZnooa6vJQsmei03-bzZoNDc2fD1A80wqswu7GCv4N3yNRRI-gDNL-70syzUAtVICCh7CH9zmQkc505WZvpQbtYZBNNsdKMCzS4TY/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%

<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/AVvXsEiQ1KyuEgNk5eD7MTeIaMTG8uald50eEP81lLu6wsCmca87di99TDOWIUj6EWxvBUTHS-m9xrbMCMT-nyAGYxnkZ4cd_poGk8cT3U-s9elnN8dSA7EggSk7HkeAHoaskGyVC3s6qReRbR8/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/AVvXsEjRKjfNtCporJeEhhigp_rgMhyphenhyphenJ0VCDY-SHfRr5yuj_Mjcxus_VuzpZdklMWImvqfpiv26IXj3fC0n4ZyPu9BFrFbc1sC0r98OR6KqpZowFBVkAGwpeSKfW6sqq-t0rIgBYWOmWH5zh5pZA/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/AVvXsEgBixyl8kYC6Rav3YW2x3nSWZgNadqJqiIKJwHtBIlHe1ykxIgfT5EyG7RVndCYowt1qrKwfwrFBGJrVYEhq-AJqpPids4y-cCEhr438xNULZQpl26NWXdUI0UVoRm-W5CuJzQyyml-Buud/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/AVvXsEiLUqXlN6vSywNmek9TYeE4WLQcdJWbq0eI9XylMsK4I2jGs5bBu_NhbMftaExwRp0XWA8HJRokY09qZ_cxCdmJaJ6zAB_-XkHwR23ts3PLUGjkj1rybVMJF1vUJRwLft7BJ6IcDTWG9ZNr/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;'/>

 >> Change USERNAME with your Twitter username
>> Change USERNAME with your Facebook page username

• Save Your Template and You Are Done !