Search Box With Social Media Sharing Widget

Search Box With Social Media Sharing Widget
In this tutorial i'm going to explain how to add search box with social media sharing widget for blogger.However Social Bookmarking is always a best way to get traffic to your website or blog.This widget help you to grow your followers in social media networking i.e Facebook,Rss Feed and Twitter.It is very easy to use and a very clean look,to add this widget just follow the steps mentioned below.


1. Log in to blogger account.
2. Now select "Layout"
3. Click Add Gadget and select 'HTML/Javascript
4. Paste below code
<style type="text/css">
#search{width:268px; border:1px solid #E0DFD9;margin: 0 0 0 0;background:url( 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}
<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='' title='Search' type='image'/>
</form> </div> </div> <div style='clear:both;'/>
<div class='social-connect-widget' style='margin-top:0px;margin-bottom:10px;'>
<img alt='RSS Feed' src='' title='RSS Feed'/><div class='Widget_text' style='margin-left:45px;margin-top:-30px;margin-bottom:10px;'>
<a expr:href='data:blog.homepageUrl   &quot;feeds/posts/default&quot;'>Subscribe to our RSS Feeds!</a> </div>
</div> <div class='social-connect-widget' style='margin-bottom:10px;'>
<img alt='Follow Us on Twitter!' src='' title='Follow Us on Twitter!'/>
<div class='Widget_text' style='margin-left:45px;margin-top:-30px;margin-bottom:10px;'>
<a href=''>
Follow Us on Twitter!</a>
<div class='social-connect-widget' style='margin-bottom:10px;'>
<img alt='Be Our Fan!' src='' title='Be Our Fan'/>
<div class='Widget_text' style='margin-left:45px;margin-top:-30px;margin-bottom:-10px;'>
<a href=''> Follow us on Facebook! </a></div><a href=''><img src='' target='_blank'/></a></div></div>
  • Change bloggersstand with your Facebook username.
  • Change bloggersstand with your Twitter Username.
5. Now save your 'HTML/Javascript'.. Done !