Add Search Box With Social Media Buttons

0
In this tutorial i'm going to explain how to add search box with social media network buttons sharing widget for blogger,social media icons have very cool hover effect on it.from search box you can search keywords.it is very easy to add in your blogger website,just follow the steps mentioned below.

DEMO

Style (1)
Add Search Box With Social Media Buttons

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">
/*  ---------www.bloggersstand.blogspot.com----------- */
#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/bloggersstand'><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/bloggersstand'><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/bloggersstand'><img alt='RSS Feed' src='http://3.bp.blogspot.com/-ZFSOToEIH3k/T9maR7A2-dI/AAAAAAAAA4Y/TFqXHP9j1I8/s1600/rss.png' title='RSS Feed'/></a><a href='www.bloggersstand.blogspot.com/'><img src='http://1.bp.blogspot.com/-MiryOkTk9fs/T9nKXxy3riI/AAAAAAAAA5o/kMhpj-0aCAM/s1600/image.png' target='_blank'/></a>
</div>
Style (2)
Add Search Box With Social Media Buttons
<style type="text/css">
/*  ---------www.bloggersstand.blogspot.com----------- */
#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/bloggersstand'><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/bloggersstand'><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/bloggersstand'><img alt='RSS Feed' src='http://3.bp.blogspot.com/-ZFSOToEIH3k/T9maR7A2-dI/AAAAAAAAA4Y/TFqXHP9j1I8/s1600/rss.png' title='RSS Feed'/></a><a href='www.bloggersstand.blogspot.com/'><img src='http://1.bp.blogspot.com/-MiryOkTk9fs/T9nKXxy3riI/AAAAAAAAA5o/kMhpj-0aCAM/s1600/image.png' target='_blank'/></a>
</div>
Style (3)
Add Search Box With Social Media Buttons
 <style type="text/css">
/*  ---------www.bloggersstand.blogspot.com----------- */
#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/bloggersstand'><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/bloggersstand'><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/bloggersstand'><img alt='RSS Feed' src='http://3.bp.blogspot.com/-ZFSOToEIH3k/T9maR7A2-dI/AAAAAAAAA4Y/TFqXHP9j1I8/s1600/rss.png' title='RSS Feed'/></a><a href='www.bloggersstand.blogspot.com/'><img src='http://1.bp.blogspot.com/-MiryOkTk9fs/T9nKXxy3riI/AAAAAAAAA5o/kMhpj-0aCAM/s1600/image.png' target='_blank'/></a>
</div>
Style (4)
Add Search Box With Social Media Buttons
 <style type="text/css">
/*  ---------www.bloggersstand.blogspot.com----------- */
#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/bloggersstand'><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/bloggersstand'><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/bloggersstand'><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://www.bloggersstand.blogspot.com/'><img src='http://1.bp.blogspot.com/-MiryOkTk9fs/T9nKXxy3riI/AAAAAAAAA5o/kMhpj-0aCAM/s1600/image.png' target='_blank'/></a>
</div>

  • Change bloggersstand with your Feedburner ID .
  • Change bloggersstand with your Facebook username.
  • Change bloggersstand with your Twitter Username.
  • Change Username with your Digg Username.
  • Change Username with your Stumbleupon Username.

5. Now save your 'HTML/Javascript'. Done ! 
Add sleek search box with social media sharing buttons icons for blogger blogspot widget gadget,search box with social follow,be our fan,like,join us button included
In this tutorial i'm going to explain how to add search box with social media network buttons ...
SUMMARY

Add sleek search box with social media sharing buttons icons for blogger blogspot widget gadget,search box with social follow,be our fan,like,join us button included

You Might Also Like:

We hope this article helped you to learn Add Search Box With Social Media Buttons. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "Add Search Box With Social Media Buttons" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand