Add Social Media Share Widget To Blogger - Mouse Hover Effect

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

 

     4.    Then Search for,

<div id='sidebar-wrapper'>

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 [a href="#comments"]comments[/a].

     5.   Now Paste the following code just below it,

<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/AVvXsEg2KGUgkBOK9z6xEasmla4Uk87FicWTF3HVF3DBpt_a073PjykBeoROHTwTtcOYfRhrV9aTp4W3uKmxRj1P4E8FgGgUE117lm7EbaAVqoGxYbG-CMB5alWRfHAziGPhPqUakVb2qLctvcw/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/AVvXsEhnzVi8RTSUz7RXyDSBMNgL6UVSDjWioFLGabXrn7QQxhI3oWeChURLltSatgKVpAiwTl78eFTv9cTCqSjeQr7d4lYmhUMbvO3_O42PkvsSDWjdoudXEuA-ydObV8vXCRkvfdc-hJYLUgWo/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/AVvXsEi7Ecr1Uu4BAR5VUFaWDSCTu3diSlubFdmRaU9nrihyZSB8BSmUVcogGlUWJU2JzuBNmvP_BgZfUAHtQVOhPaVkKt4YN_4T4_x6L4Ohk4yd9jJd9V-NtwRoYJrnnFCOXUy0R_aEXWUhBlv_/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/AVvXsEgkdew3LBYs_kPg1IfY0Xq3uPw9c3zbSVcW5ymx037pB75pSh6LJcx2ZO0l-_A_2yObinIxEAE0A7I8Pr24Sr-KB9cUDhzX1BVVqmBDdSY02sJTLKuSxSjJiWBuAd3U2uE47ne6oOKDlo1e/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/AVvXsEhVabwRKTareJkKhj9bD7nfb6TuURUmvjOIIYUVvfiVFCvm4kL8t4IC2zL_ZV7Gx0fin3M3PLnLLSq_iAlImlOtLq6JuP8Kok_9bMKUu918Uh8VIWwVdrP45CnBeeufFoC7cNXrfsmV3bI/s1600/twitter.png' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhODgXeDOxlSwYCL2Ki6nFQyT-sJZi-Ihz9_XU2RIKimk6P6mc4NFUi7W2ahCx07CBZcRCkwh7es6HpQRTnAAiHDRFirxktMpOB6A_hLtjLrkoD_pvabXKstKftHb9yr0nRXThQavgj_kY/s1600/delicious.png' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio0lpZ59EUBhmVIrY8E1cLpBh2gaKvwIOHyJU-RjtrGUVDeEzCoHpCgjBcSTYOqULCVi5-kFIPYcxHK5n12hZM_yv3oTtcc0WaTqqvS1nx2BLzmNTcI0hbLi3g-hHgtprld4220ZbEq6k/s1600/facebook.png' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHqLNl_1HTN_ntaY4Ws7iF66OUbgoo0UDmWgYET5u-umglBtrwYozvM4EoH2G0bgkG7gzZt5QBM7NBiZCMp2EYt743fpbX5UlHtzxmzm9iM7-5NGsJ6xlrleTKADVg67XN3ahk1q29m3k/s1600/digg.png' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvZbZ-RS0FJKn0qHhTkEHCOJ2d7AxHiAwgOnigtTK9TyvTIJR8HBIVL0CqRf7FZQvhzhGlTPaAb2TD_UhtLJZ2jdl_M_T9Or-k40IhVnC5RjXXYrSO_lBCtBbETs_kPEzxYIcyf7lkudM/s1600/stumbleupon.png' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6ZI42GL-FDnUmfdlYa9GL3OhbNAfYAg-zSgR6yyFYhRM4bbrYkZvJL1HDUAU6bSx-dIIrwZ_-erT-c1vEGE9riQYnyYYhVGOWeLXeNR9IaFj78-9DVGf4NcgQQ_gUIykyyy_4ApO0O90/s1600/favorites.png' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpjYQBDZsrG93oXK5QDZmcZHUEi3LXZurYXwVTQxk0aH0W-BEbFUaf63CgQotkoGmybisozcjj_FX54eMku14OuEvbK4HG4iJ8b5VgvU5rpGPrG-LYpVXX8p7gCIU92cYkQ0mi1YvNcAM/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;'/>

Make these changes:

• Replace http://twitter.com/USERNAME with your twitter profile link
• Replace http://facebook.com/USERNAME with your Facebook Profile link

      6.   Save your template and Bingo you are done! :>

Visit your blogs to see a beautiful new change. Hope you liked it. Questions are always welcomed.

You will also like to view the previous version,

• [a href="http://www.mybloggertricks.com/2011/05/create-wordpress-subscription-form.html" target="_blank"]Create Wordpress Style Subscription Form Widget[/a]

Source: http://www.mybloggertricks.com/2011/06/add-social-media-share-widget-to.html