How to Add Sleek Search Box With Social Buttons For Blogger (blogspot)

Search box is useful gadget in any blogger blog or website. Its will easy way to find the post using by any keywords.  With this search box i include social network icon. So when you add this widget in your blog it Include with hover effect.So, you can link your social  network profile with this gadget. If you want it you have to follow below steps:



1. Login to your blogger account.
2. Than dashboard >>> Layout >>> Add a Gadget >>> and select 'HTML/Javascript'
3. Copy and Paste below code.







<style type="text/css">

#Bt-searchbox{background:url(http://4.bp.blogspot.com/-qQiOypCmwYc/T9nGQemZ2rI/AAAAAAAAA5U/JdokYZgKQkU/s1600/whitez+by+abt+-+Copy.png) no-repeat scroll center center transparent;width:290px;height:80px;display:block;border:1px solid #000000;}
form#Bt-searchform{display: block;padding: 10px 12px;margin:0;}
form#Bt-searchform #s{padding: 6px;margin-left:7px;width: 235px;font-size:14px;color:#000000;vertical-align: top;border:none;background:transparent;}
form#Bt-searchform #sbutton{margin-left:215px;margin-top: -30px;padding:0;height:30px;width:60px;vertical-align: top;border:none;background:transparent;}
.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}

.social-connect-widget img:hover{
opacity:0.4;
filter:alpha(opacity=40);
}</style>   
<div id="Bt-searchbox">
<form id="Bt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=" Search..." onfocus='if (this.value == "    search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form></div>
<div class='social-connect-widget' style='margin-top:-30px;margin-bottom:10px;margin-left:15px;'>  
<a href='http://twitter.com/username'><img alt='Follow Us on Twitter!' src='http://2.bp.blogspot.com/-mqqPvGPt7dI/T9maU7JKaRI/AAAAAAAAA4o/BPeRM6y7oxA/s1600/twitter.png' title='Follow Us on Twitter!'/></a> 
<a href='http://facebook.com/username'><img alt='Be Our Fan!' src='http://4.bp.blogspot.com/-8bWXS3t1S3g/T9maPS0F8HI/AAAAAAAAA4I/bwiZYy8Ri6o/s1600/facebook.png' title='Be Our Fan'/></a>
<a href='http://stumbleupon.com/Username'><img alt='Be Our Fan!' src='http://1.bp.blogspot.com/-uRuQesGA0r4/T9maULj720I/AAAAAAAAA4g/U3qsSaNtyf4/s1600/stumbleupon.png' title='Follow Us'/></a><a href='https://plus.google.com/Username'><img alt='Be Our Fan!' src='http://2.bp.blogspot.com/-AQVtTqyD7N8/T9maQRwpl6I/AAAAAAAAA4Q/Y9mltd_ZgtI/s1600/google.png' title='Follow Us'/></a>
<a href='http://digg.com/Username'><img alt='Be Our Fan!' src='http://4.bp.blogspot.com/-efaTu9e0je0/T9maOHhDEzI/AAAAAAAAA4A/9bFCMaNU1wc/s1600/digg.png' title='Follow Us'/></a>
<a href='http://feeds.feedburner.com/feedname'><img alt='RSS Feed' src='http://3.bp.blogspot.com/-ZFSOToEIH3k/T9maR7A2-dI/AAAAAAAAA4Y/TFqXHP9j1I8/s1600/rss.png' title='RSS Feed'/></a><a href='http://imomniscient.blogspot.com'><img src='http://1.bp.blogspot.com/-MiryOkTk9fs/T9nKXxy3riI/AAAAAAAAA5o/kMhpj-0aCAM/s1600/image.png' target='_blank'/></a>
</div>








<style type="text/css">
 
#Bt-searchbox{background:url(http://1.bp.blogspot.com/-IuIEVlwvfT0/T9nGPawSNCI/AAAAAAAAA5M/DIL_lfHYn44/s1600/pink.png) no-repeat scroll center center transparent;width:290px;height:80px;display:block;border:1px solid #000000;}
form#Bt-searchform{display: block;padding: 10px 12px;margin:0;}
form#Bt-searchform #s{padding: 6px;margin-left:7px;width: 235px;font-size:14px;color:#000000;vertical-align: top;border:none;background:transparent;}
form#Bt-searchform #sbutton{margin-left:215px;margin-top: -30px;padding:0;height:30px;width:60px;vertical-align: top;border:none;background:transparent;}
.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}

.social-connect-widget img:hover{
opacity:0.4;
filter:alpha(opacity=40);
}</style>   
<div id="Bt-searchbox">
<form id="Bt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=" Search..." onfocus='if (this.value == "    search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form></div>
<div class='social-connect-widget' style='margin-top:-30px;margin-bottom:10px;margin-left:15px;'>  
<a href='http://twitter.com/username'><img alt='Follow Us on Twitter!' src='http://2.bp.blogspot.com/-mqqPvGPt7dI/T9maU7JKaRI/AAAAAAAAA4o/BPeRM6y7oxA/s1600/twitter.png' title='Follow Us on Twitter!'/></a> 
<a href='http://facebook.com/username'><img alt='Be Our Fan!' src='http://4.bp.blogspot.com/-8bWXS3t1S3g/T9maPS0F8HI/AAAAAAAAA4I/bwiZYy8Ri6o/s1600/facebook.png' title='Be Our Fan'/></a>
<a href='http://stumbleupon.com/Username'><img alt='Be Our Fan!' src='http://1.bp.blogspot.com/-uRuQesGA0r4/T9maULj720I/AAAAAAAAA4g/U3qsSaNtyf4/s1600/stumbleupon.png' title='Follow Us'/></a><a href='https://plus.google.com/Username'><img alt='Be Our Fan!' src='http://2.bp.blogspot.com/-AQVtTqyD7N8/T9maQRwpl6I/AAAAAAAAA4Q/Y9mltd_ZgtI/s1600/google.png' title='Follow Us'/></a>
<a href='http://digg.com/Username'><img alt='Be Our Fan!' src='http://4.bp.blogspot.com/-efaTu9e0je0/T9maOHhDEzI/AAAAAAAAA4A/9bFCMaNU1wc/s1600/digg.png' title='Follow Us'/></a>
<a href='http://feeds.feedburner.com/feedname'><img alt='RSS Feed' src='http://3.bp.blogspot.com/-ZFSOToEIH3k/T9maR7A2-dI/AAAAAAAAA4Y/TFqXHP9j1I8/s1600/rss.png' title='RSS Feed'/></a><a href='http://imomniscient.blogspot.com/'><img src='http://1.bp.blogspot.com/-MiryOkTk9fs/T9nKXxy3riI/AAAAAAAAA5o/kMhpj-0aCAM/s1600/image.png' target='_blank'/></a>
</div>






<style type="text/css">

#Bt-searchbox{background:url(http://2.bp.blogspot.com/-SZvW1w-FRK0/T9nGN6bivSI/AAAAAAAAA5E/uD-CokOLYmA/s1600/orange.png) no-repeat scroll center center transparent;width:290px;height:80px;display:block;border:1px solid #000000;}
form#Bt-searchform{display: block;padding: 10px 12px;margin:0;}
form#Bt-searchform #s{padding: 6px;margin-left:7px;width: 235px;font-size:14px;color:#000000;vertical-align: top;border:none;background:transparent;}
form#Bt-searchform #sbutton{margin-left:215px;margin-top: -30px;padding:0;height:30px;width:60px;vertical-align: top;border:none;background:transparent;}
.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}

.social-connect-widget img:hover{
opacity:0.4;
filter:alpha(opacity=40);
}</style>   
<div id="Bt-searchbox">
<form id="Bt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=" Search..." onfocus='if (this.value == "    search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form></div>
<div class='social-connect-widget' style='margin-top:-30px;margin-bottom:10px;margin-left:15px;'>  
<a href='http://twitter.com/username'><img alt='Follow Us on Twitter!' src='http://2.bp.blogspot.com/-mqqPvGPt7dI/T9maU7JKaRI/AAAAAAAAA4o/BPeRM6y7oxA/s1600/twitter.png' title='Follow Us on Twitter!'/></a> 
<a href='http://facebook.com/username'><img alt='Be Our Fan!' src='http://4.bp.blogspot.com/-8bWXS3t1S3g/T9maPS0F8HI/AAAAAAAAA4I/bwiZYy8Ri6o/s1600/facebook.png' title='Be Our Fan'/></a>
<a href='http://stumbleupon.com/Username'><img alt='Be Our Fan!' src='http://1.bp.blogspot.com/-uRuQesGA0r4/T9maULj720I/AAAAAAAAA4g/U3qsSaNtyf4/s1600/stumbleupon.png' title='Follow Us'/></a><a href='https://plus.google.com/Username'><img alt='Be Our Fan!' src='http://2.bp.blogspot.com/-AQVtTqyD7N8/T9maQRwpl6I/AAAAAAAAA4Q/Y9mltd_ZgtI/s1600/google.png' title='Follow Us'/></a>
<a href='http://digg.com/Username'><img alt='Be Our Fan!' src='http://4.bp.blogspot.com/-efaTu9e0je0/T9maOHhDEzI/AAAAAAAAA4A/9bFCMaNU1wc/s1600/digg.png' title='Follow Us'/></a>
<a href='http://feeds.feedburner.com/feedname'><img alt='RSS Feed' src='http://3.bp.blogspot.com/-ZFSOToEIH3k/T9maR7A2-dI/AAAAAAAAA4Y/TFqXHP9j1I8/s1600/rss.png' title='RSS Feed'/></a><a href='http://imomniscient.blogspot.com/'><img src='http://1.bp.blogspot.com/-MiryOkTk9fs/T9nKXxy3riI/AAAAAAAAA5o/kMhpj-0aCAM/s1600/image.png' target='_blank'/></a>
</div>








<style type="text/css">

#Bt-searchbox{background:url(http://2.bp.blogspot.com/-U7nmuVYL9fw/T9nGMd_YspI/AAAAAAAAA48/0hgH7rh1g2g/s1600/black.png) no-repeat scroll center center transparent;width:290px;height:80px;display:block;border:1px solid #000000;}
form#Bt-searchform{display: block;padding: 10px 12px;margin:0;}
form#Bt-searchform #s{padding: 6px;margin-left:7px;width: 235px;font-size:14px;color:#000000;vertical-align: top;border:none;background:transparent;}
form#Bt-searchform #sbutton{margin-left:215px;margin-top: -30px;padding:0;height:30px;width:60px;vertical-align: top;border:none;background:transparent;}
.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}

.social-connect-widget img:hover{
opacity:0.4;
filter:alpha(opacity=40);
}</style>   
<div id="Bt-searchbox">
<form id="Bt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=" Search..." onfocus='if (this.value == "    search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form></div>
<div class='social-connect-widget' style='margin-top:-30px;margin-bottom:10px;margin-left:15px;'>  
<a href='http://twitter.com/username'><img alt='Follow Us on Twitter!' src='http://2.bp.blogspot.com/-mqqPvGPt7dI/T9maU7JKaRI/AAAAAAAAA4o/BPeRM6y7oxA/s1600/twitter.png' title='Follow Us on Twitter!'/></a> 
<a href='http://facebook.com/username'><img alt='Be Our Fan!' src='http://4.bp.blogspot.com/-8bWXS3t1S3g/T9maPS0F8HI/AAAAAAAAA4I/bwiZYy8Ri6o/s1600/facebook.png' title='Be Our Fan'/></a>
<a href='http://stumbleupon.com/Username'><img alt='Be Our Fan!' src='http://1.bp.blogspot.com/-uRuQesGA0r4/T9maULj720I/AAAAAAAAA4g/U3qsSaNtyf4/s1600/stumbleupon.png' title='Follow Us'/></a><a href='https://plus.google.com/Username'><img alt='Be Our Fan!' src='http://2.bp.blogspot.com/-AQVtTqyD7N8/T9maQRwpl6I/AAAAAAAAA4Q/Y9mltd_ZgtI/s1600/google.png' title='Follow Us'/></a>
<a href='http://digg.com/Username'><img alt='Be Our Fan!' src='http://4.bp.blogspot.com/-efaTu9e0je0/T9maOHhDEzI/AAAAAAAAA4A/9bFCMaNU1wc/s1600/digg.png' title='Follow Us'/></a>
<a href='http://feeds.feedburner.com/feedname'><img alt='RSS Feed' src='http://3.bp.blogspot.com/-ZFSOToEIH3k/T9maR7A2-dI/AAAAAAAAA4Y/TFqXHP9j1I8/s1600/rss.png' title='RSS Feed'/></a><a href='http://imomniscient.blogspot.com/'><img src='http://1.bp.blogspot.com/-MiryOkTk9fs/T9nKXxy3riI/AAAAAAAAA5o/kMhpj-0aCAM/s1600/image.png' target='_blank'/></a>
</div>



  • Replace  USERNAME  With Twitter User name.
  • Replace  USERNAME  With Facebook User name. 
  • Replace  USERNAME  With StumbleUpon User name. 
  • Replace  USERNAME  With Digg User name. 
  • Replace  FEEDNAME  With feed burner name.

4. Save HTML/Javascript. you are done.



0 comments:

Post a Comment