Thursday, June 14, 2012

Add Sleek Search Box With Social Buttons For Blogger

Searching Bo box is useful gadget in blogger, because,
users can search post from the keywords, Its will easy way
to find the post, when we cant find the post from categories.
In this search box i include with  social network icons.It
Include with hover effect.So, you can link your social
network profile with this gadget.It will help you to increase
followers too.You can add this widget with few steps,
just using add gadget to, add to blogger.Follow below
Steps to add it to your blog.

1.  Log in to blogger account > Go to Design >> Page Element

2. Click Add Gadget and select 'HTML/Javascript'

3. Paste one  of below code.(select style)

Style 1
Search-box
<style type="text/css">
/*  ---------www.bloggertrix.com----------- */ 
#Bt-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtBl2UxPDQSTv14_NtY1hm9qz1zBnfiSrzKGkWWQGBF_qdjgeS301SiesGj37nstjDEx6S2ybEUYHlsWEdbiHZY_1iBYK-v9CcITfNQxY7lEki7LOacS3r0pfc7xyWwFZJ-GyQH-iUYg8/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSgqpxSZXU9-lWeC06ymK0OTguzOs4eT5IptXSruHH5-jFHM2tMUQIyKgzfJsU-YYn4yc2nOKnfkZamsyyXQ8i_AvpwTfRdEdi-oigUtKnZTsvfacs5nZsJb8Vqa3sPhyphenhyphenTzkX-bwXBd9M/s1600/twitter.png' title='Follow Us on Twitter!'/></a> 
<a href='http://facebook.com/username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTw_1YE4fZJnEeUIlOSDVUCIsO5Acml2l8hjrzL4-K5p4-IX9NXGp_mORjFZQxTnAs9ht1zsbroIBYhKhW0ShcOssoySqI94SJNQMW0TJOIcO9Pg4M_dOuAr1gC9syI4TSoMZCcvHX6u4/s1600/facebook.png' title='Be Our Fan'/></a>
<a href='http://stumbleupon.com/Username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVHdJdZVxy7E4nEnvJnfz9jZFeRxlVM_zOY8pAPIGyLWo9vQeOg4RHt__8AnaBZ5msdX1xit4c7BMFk8k2l9z60VpGr15FU4aIjLSN5_nOY2iCDwWjYhRSGNhYlhRij97dkeJ3LRCmjBE/s1600/stumbleupon.png' title='Follow Us'/></a><a href='https://plus.google.com/Username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMEOVlkhvKMFurInAD3tpiTFnJCF2JLMaHlwE89fFwGqZNJOvZsxdUps_LGjxI69Cz89Id1zi72N-ilI7h7tJzC6LFRF06CVM01Fh1IVjs7qIg6CiKjpMiRFc2R9H2MUPPADhSgkh5Llw/s1600/google.png' title='Follow Us'/></a>
<a href='http://digg.com/Username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIg5-t864I5sUwEVdpJ8NMLJlg1-Yj_I4C97Qe4tmpe4PRe-LKoszbqrJpDXH64cIIhoyHBCFOKYqVTy2RSMJQTovQt0dlh5pA1DEYzXid5_cvx-gmw1DprztWqRb3iLa5Zvw4tFygaOI/s1600/digg.png' title='Follow Us'/></a>
<a href='http://feeds.feedburner.com/feedname'><img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV000rKRuUguqrCHgOqVHcq-FR0rwHPaANo0fP9HyZRHw_WEQSLTL4j0Xb5SMmohKJEHdeX27OwEC7jnp2R5kyK_bEKANjQM3_a3HmINLWejTuut1YSYcx8gVHD1zW1F9CuqvRoFcVBTA/s1600/rss.png' title='RSS Feed'/></a><a href='http://www.bloggertrix.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW9s6vjff7pWTODTLAvONrKLnpgoqh_iHAoCPBx6mj8QJe7hOInq2m0wqGLDlohGsK7e4ZZHcGuqN5jAEAd6KsvjKhD6R5ymA90On10don0Z_5tM79x4KC4Gc87-Vp3FYUDNXF-BUMow0/s1600/image.png' target='_blank'/></a>
</div>

Style 2
Search-box
<style type="text/css">
/*  ---------www.bloggertrix.com----------- */ 
#Bt-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgStQWHQAmgwyOOpVpHq3_K74wQ_1f6p0ec0coZ0ZmtsitkVN0j2i0OO4-zNYMiWPd3L5Q0PmWhFj1DIg9rJRFwhv0ktKvAwBAxR75xa5Q3gCZZd3No8wreFttuznbjzUKk2129I5hoi9s/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSgqpxSZXU9-lWeC06ymK0OTguzOs4eT5IptXSruHH5-jFHM2tMUQIyKgzfJsU-YYn4yc2nOKnfkZamsyyXQ8i_AvpwTfRdEdi-oigUtKnZTsvfacs5nZsJb8Vqa3sPhyphenhyphenTzkX-bwXBd9M/s1600/twitter.png' title='Follow Us on Twitter!'/></a> 
<a href='http://facebook.com/username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTw_1YE4fZJnEeUIlOSDVUCIsO5Acml2l8hjrzL4-K5p4-IX9NXGp_mORjFZQxTnAs9ht1zsbroIBYhKhW0ShcOssoySqI94SJNQMW0TJOIcO9Pg4M_dOuAr1gC9syI4TSoMZCcvHX6u4/s1600/facebook.png' title='Be Our Fan'/></a>
<a href='http://stumbleupon.com/Username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVHdJdZVxy7E4nEnvJnfz9jZFeRxlVM_zOY8pAPIGyLWo9vQeOg4RHt__8AnaBZ5msdX1xit4c7BMFk8k2l9z60VpGr15FU4aIjLSN5_nOY2iCDwWjYhRSGNhYlhRij97dkeJ3LRCmjBE/s1600/stumbleupon.png' title='Follow Us'/></a><a href='https://plus.google.com/Username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMEOVlkhvKMFurInAD3tpiTFnJCF2JLMaHlwE89fFwGqZNJOvZsxdUps_LGjxI69Cz89Id1zi72N-ilI7h7tJzC6LFRF06CVM01Fh1IVjs7qIg6CiKjpMiRFc2R9H2MUPPADhSgkh5Llw/s1600/google.png' title='Follow Us'/></a>
<a href='http://digg.com/Username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIg5-t864I5sUwEVdpJ8NMLJlg1-Yj_I4C97Qe4tmpe4PRe-LKoszbqrJpDXH64cIIhoyHBCFOKYqVTy2RSMJQTovQt0dlh5pA1DEYzXid5_cvx-gmw1DprztWqRb3iLa5Zvw4tFygaOI/s1600/digg.png' title='Follow Us'/></a>
<a href='http://feeds.feedburner.com/feedname'><img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV000rKRuUguqrCHgOqVHcq-FR0rwHPaANo0fP9HyZRHw_WEQSLTL4j0Xb5SMmohKJEHdeX27OwEC7jnp2R5kyK_bEKANjQM3_a3HmINLWejTuut1YSYcx8gVHD1zW1F9CuqvRoFcVBTA/s1600/rss.png' title='RSS Feed'/></a><a href='http://www.bloggertrix.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW9s6vjff7pWTODTLAvONrKLnpgoqh_iHAoCPBx6mj8QJe7hOInq2m0wqGLDlohGsK7e4ZZHcGuqN5jAEAd6KsvjKhD6R5ymA90On10don0Z_5tM79x4KC4Gc87-Vp3FYUDNXF-BUMow0/s1600/image.png' target='_blank'/></a>
</div>

Style 3
Search-box
<style type="text/css">
/*  ---------www.bloggertrix.com----------- */ 
#Bt-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7ET6-HX9L_W9OslFGr7BHgc6B7YmRB4NKwtwYuJqym8tMZWUb7YIcEdhfahJ1SERZR8Tq8Z7dqXWXjsyk7KGcHGpBVda_loilyeAZqZPTLrGmcnG3ZqIqjYv3BqfG9JXYme86Z5Eekjw/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSgqpxSZXU9-lWeC06ymK0OTguzOs4eT5IptXSruHH5-jFHM2tMUQIyKgzfJsU-YYn4yc2nOKnfkZamsyyXQ8i_AvpwTfRdEdi-oigUtKnZTsvfacs5nZsJb8Vqa3sPhyphenhyphenTzkX-bwXBd9M/s1600/twitter.png' title='Follow Us on Twitter!'/></a> 
<a href='http://facebook.com/username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTw_1YE4fZJnEeUIlOSDVUCIsO5Acml2l8hjrzL4-K5p4-IX9NXGp_mORjFZQxTnAs9ht1zsbroIBYhKhW0ShcOssoySqI94SJNQMW0TJOIcO9Pg4M_dOuAr1gC9syI4TSoMZCcvHX6u4/s1600/facebook.png' title='Be Our Fan'/></a>
<a href='http://stumbleupon.com/Username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVHdJdZVxy7E4nEnvJnfz9jZFeRxlVM_zOY8pAPIGyLWo9vQeOg4RHt__8AnaBZ5msdX1xit4c7BMFk8k2l9z60VpGr15FU4aIjLSN5_nOY2iCDwWjYhRSGNhYlhRij97dkeJ3LRCmjBE/s1600/stumbleupon.png' title='Follow Us'/></a><a href='https://plus.google.com/Username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMEOVlkhvKMFurInAD3tpiTFnJCF2JLMaHlwE89fFwGqZNJOvZsxdUps_LGjxI69Cz89Id1zi72N-ilI7h7tJzC6LFRF06CVM01Fh1IVjs7qIg6CiKjpMiRFc2R9H2MUPPADhSgkh5Llw/s1600/google.png' title='Follow Us'/></a>
<a href='http://digg.com/Username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIg5-t864I5sUwEVdpJ8NMLJlg1-Yj_I4C97Qe4tmpe4PRe-LKoszbqrJpDXH64cIIhoyHBCFOKYqVTy2RSMJQTovQt0dlh5pA1DEYzXid5_cvx-gmw1DprztWqRb3iLa5Zvw4tFygaOI/s1600/digg.png' title='Follow Us'/></a>
<a href='http://feeds.feedburner.com/feedname'><img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV000rKRuUguqrCHgOqVHcq-FR0rwHPaANo0fP9HyZRHw_WEQSLTL4j0Xb5SMmohKJEHdeX27OwEC7jnp2R5kyK_bEKANjQM3_a3HmINLWejTuut1YSYcx8gVHD1zW1F9CuqvRoFcVBTA/s1600/rss.png' title='RSS Feed'/></a><a href='http://www.bloggertrix.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW9s6vjff7pWTODTLAvONrKLnpgoqh_iHAoCPBx6mj8QJe7hOInq2m0wqGLDlohGsK7e4ZZHcGuqN5jAEAd6KsvjKhD6R5ymA90On10don0Z_5tM79x4KC4Gc87-Vp3FYUDNXF-BUMow0/s1600/image.png' target='_blank'/></a>
</div>

Style 4
Search-box

<style type="text/css">
/*  ---------www.bloggertrix.com----------- */ 
#Bt-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicEA1Q42JFanVpw2H_RS2-p991ipH1FgUrAvKCDee_r3pHKxGuvX7X7uygugVf7g7zDHTgOYNmfmiwQYhCIbIoUl8bCo_Dg5ZXxDbei5R8nLpjKRboiFwOgz33UttfG5VN_Mzkn8bw63c/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSgqpxSZXU9-lWeC06ymK0OTguzOs4eT5IptXSruHH5-jFHM2tMUQIyKgzfJsU-YYn4yc2nOKnfkZamsyyXQ8i_AvpwTfRdEdi-oigUtKnZTsvfacs5nZsJb8Vqa3sPhyphenhyphenTzkX-bwXBd9M/s1600/twitter.png' title='Follow Us on Twitter!'/></a> 
<a href='http://facebook.com/username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTw_1YE4fZJnEeUIlOSDVUCIsO5Acml2l8hjrzL4-K5p4-IX9NXGp_mORjFZQxTnAs9ht1zsbroIBYhKhW0ShcOssoySqI94SJNQMW0TJOIcO9Pg4M_dOuAr1gC9syI4TSoMZCcvHX6u4/s1600/facebook.png' title='Be Our Fan'/></a>
<a href='http://stumbleupon.com/Username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVHdJdZVxy7E4nEnvJnfz9jZFeRxlVM_zOY8pAPIGyLWo9vQeOg4RHt__8AnaBZ5msdX1xit4c7BMFk8k2l9z60VpGr15FU4aIjLSN5_nOY2iCDwWjYhRSGNhYlhRij97dkeJ3LRCmjBE/s1600/stumbleupon.png' title='Follow Us'/></a><a href='https://plus.google.com/Username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMEOVlkhvKMFurInAD3tpiTFnJCF2JLMaHlwE89fFwGqZNJOvZsxdUps_LGjxI69Cz89Id1zi72N-ilI7h7tJzC6LFRF06CVM01Fh1IVjs7qIg6CiKjpMiRFc2R9H2MUPPADhSgkh5Llw/s1600/google.png' title='Follow Us'/></a>
<a href='http://digg.com/Username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIg5-t864I5sUwEVdpJ8NMLJlg1-Yj_I4C97Qe4tmpe4PRe-LKoszbqrJpDXH64cIIhoyHBCFOKYqVTy2RSMJQTovQt0dlh5pA1DEYzXid5_cvx-gmw1DprztWqRb3iLa5Zvw4tFygaOI/s1600/digg.png' title='Follow Us'/></a>
<a href='http://feeds.feedburner.com/feedname'><img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV000rKRuUguqrCHgOqVHcq-FR0rwHPaANo0fP9HyZRHw_WEQSLTL4j0Xb5SMmohKJEHdeX27OwEC7jnp2R5kyK_bEKANjQM3_a3HmINLWejTuut1YSYcx8gVHD1zW1F9CuqvRoFcVBTA/s1600/rss.png' title='RSS Feed'/></a><a href='http://www.bloggertrix.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW9s6vjff7pWTODTLAvONrKLnpgoqh_iHAoCPBx6mj8QJe7hOInq2m0wqGLDlohGsK7e4ZZHcGuqN5jAEAd6KsvjKhD6R5ymA90On10don0Z_5tM79x4KC4Gc87-Vp3FYUDNXF-BUMow0/s1600/image.png' target='_blank'/></a>
</div>


*Replace  USERNAME  With Twitter User name.
*Replace  USERNAME  With faceook User name.
*Replace  USERNAME  With stumbleupon User name.
*Replace  USERNAME  With digg User name.
*Replace  USERNAME  With feedburner name.

4. Save HTML/Javascript. you are done.

5 comments:

  1. hey, nice one! but i want to change the search button color to match my blog theme.How to do that? And one more thing, how to change the color of sidebar background in blogger.

    ReplyDelete
  2. @Setem
    Its image, you can do it by editing the image,
    If you cant,let me know your color, i will change it and send it to you.
    You can change the color of your sidebar, i can help. So,what is your blog URL??

    ReplyDelete
  3. Informative Post,Why can't you add a Speech Recognition tool to the Search engine

    ReplyDelete
  4. @saikiransama
    Thanks for the idea, i will work for it.

    ReplyDelete
  5. Hello Blogger tricks.
    Nice post.This widget is going to come very handy.I'm already following you,and I'm going to share this widget in my blog too(linking ur blog)
    Can you write on "how to make labels as tabs"to be placed on the top of the post.There are many such but the problem is the tabs automatically shows all the post under that label, menu falling right over the post. It should show individual post only when clicked.
    Thanks.

    ReplyDelete