Thursday, 14 June 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/AVvXsEiWrN17vUdYafma36b_whPWkTgYcdby4E5Aj6hlT9jfTFiKhvX_LjKvcnqljcu-6o_RqarnsQ5nzwfuAZJzeuVA92YWg-A9I0QCy93aa_dNoj-zl5n9cYErId2eIPh_v2BQ8To-nttan2g/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/AVvXsEiGPtVaYcyLCi5BL7mrE5kY0YdiqNGAEiT8QsC5TZPoawtJYhGzmPGBEPQdYKS2eeur_7nnO8ft9YgHNW4tlqfwXRbcy0DC262FZr6S0m-el_Kjcd_s7JtbqYBbBjFotHv3PscAIEf8lsY/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/AVvXsEinP_BiUNCihagsLtt8jnEl9xIlNi3Ne1A_piQY4ZliFmU6IZ9_bNZGA_tAi7KUuUXL78Q0jSnYCFu_y7IHb6wObD467MO9NhuZ5XTLp6ldMBKBlyXlPx40S4o0AmFlMUACU4NFex3YOBE/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/AVvXsEgQ8wNlRxBIB-gY3iyJXhpwgZ0By3LGhTVpWwqPRkANORFDzldAz8lzqzvom9ISSudlSQ9RCR_Xq5T7tIp-EVPwnLFDnDsiwdyvI_NrQceRpurFOYuZYKpQZMDCEgxYJVlpfmqWq0_zAJE/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/AVvXsEgrMybgSYFZxQ_FgTK6D8eclVHIMdquJMyGrUOfYBiFEB9oWDC0k7pK-CmBt_rViHdCrlQfv64droSvlY_e1VCDAo_xyQ6pdGmYvGrE606BzNUA7Fa5qIR-XPhTRfeM9N1WLvRQxpZI3WM/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/AVvXsEi7LtKWSYV8TeBLk9ChDxuXsq5qfasI8Xz8DgzQcl1HOzGLiULp9eqanFzUWUPXEgUbd3tgLcm6D0AkbTLXV9k73OMQrZmX_DRZxuBQYmG7wiZ7hNrJp5nKSIvZKrV4rM0VbGyeWgvCwIg/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/AVvXsEgpxjlfTgCwJRDBfoxdrmozu1L4bRL-NC5KjmZPQM2mFUv4jxSAKjY8GGS-va9C8kY-HyLrFaZOr7m_4k1kVxBtJvjVf6iVE5e7FJU1CSAjaodsyPK4baaKxqMJusr49mZBI34sUz7e4KQ/s1600/rss.png' title='RSS Feed'/></a><a href='http://www.bloggertrix.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNyudzX3rAnugjoR3uCR7VaSdtU5XE7rQz8a3lh0PdGP8CnKAequzG6zh8ibLbSH6fWHkjZznLsw6MkjH-2LI7nsf0KplJfU9seuBrUV6_lZp8aDFN5rQxDmnrbnYTkrmZ2pryEhyphenhyphenMP_w/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/AVvXsEhV6YGkUzzzLaWlSp-2Hf9gQcjYki5NKGOzPWlwDAlq7HH0BS1vDNM9uJ5Ae1iAoxSSENtrUU42fGK7bSRzN5yNjhmT14Wdm5GGoVMzhhcPwZQGTpYymDPvbSvF9Pke-T0gu18adjzXVEQ/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/AVvXsEiGPtVaYcyLCi5BL7mrE5kY0YdiqNGAEiT8QsC5TZPoawtJYhGzmPGBEPQdYKS2eeur_7nnO8ft9YgHNW4tlqfwXRbcy0DC262FZr6S0m-el_Kjcd_s7JtbqYBbBjFotHv3PscAIEf8lsY/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/AVvXsEinP_BiUNCihagsLtt8jnEl9xIlNi3Ne1A_piQY4ZliFmU6IZ9_bNZGA_tAi7KUuUXL78Q0jSnYCFu_y7IHb6wObD467MO9NhuZ5XTLp6ldMBKBlyXlPx40S4o0AmFlMUACU4NFex3YOBE/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/AVvXsEgQ8wNlRxBIB-gY3iyJXhpwgZ0By3LGhTVpWwqPRkANORFDzldAz8lzqzvom9ISSudlSQ9RCR_Xq5T7tIp-EVPwnLFDnDsiwdyvI_NrQceRpurFOYuZYKpQZMDCEgxYJVlpfmqWq0_zAJE/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/AVvXsEgrMybgSYFZxQ_FgTK6D8eclVHIMdquJMyGrUOfYBiFEB9oWDC0k7pK-CmBt_rViHdCrlQfv64droSvlY_e1VCDAo_xyQ6pdGmYvGrE606BzNUA7Fa5qIR-XPhTRfeM9N1WLvRQxpZI3WM/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/AVvXsEi7LtKWSYV8TeBLk9ChDxuXsq5qfasI8Xz8DgzQcl1HOzGLiULp9eqanFzUWUPXEgUbd3tgLcm6D0AkbTLXV9k73OMQrZmX_DRZxuBQYmG7wiZ7hNrJp5nKSIvZKrV4rM0VbGyeWgvCwIg/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/AVvXsEgpxjlfTgCwJRDBfoxdrmozu1L4bRL-NC5KjmZPQM2mFUv4jxSAKjY8GGS-va9C8kY-HyLrFaZOr7m_4k1kVxBtJvjVf6iVE5e7FJU1CSAjaodsyPK4baaKxqMJusr49mZBI34sUz7e4KQ/s1600/rss.png' title='RSS Feed'/></a><a href='http://www.bloggertrix.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNyudzX3rAnugjoR3uCR7VaSdtU5XE7rQz8a3lh0PdGP8CnKAequzG6zh8ibLbSH6fWHkjZznLsw6MkjH-2LI7nsf0KplJfU9seuBrUV6_lZp8aDFN5rQxDmnrbnYTkrmZ2pryEhyphenhyphenMP_w/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/AVvXsEgFmKNn8Z_tFRwoPTOi3qHt0jIcp7Q4nWlcCOXVIFyADQT8Hg1nTndgR-vVQxZSrgNRAnroF58VOL8jTwBywWkqTVPVUy4HabI2VXquvmjVxj3z6tbUvbxDhWdEX9CHxhjNeISW4REYqyk/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/AVvXsEiGPtVaYcyLCi5BL7mrE5kY0YdiqNGAEiT8QsC5TZPoawtJYhGzmPGBEPQdYKS2eeur_7nnO8ft9YgHNW4tlqfwXRbcy0DC262FZr6S0m-el_Kjcd_s7JtbqYBbBjFotHv3PscAIEf8lsY/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/AVvXsEinP_BiUNCihagsLtt8jnEl9xIlNi3Ne1A_piQY4ZliFmU6IZ9_bNZGA_tAi7KUuUXL78Q0jSnYCFu_y7IHb6wObD467MO9NhuZ5XTLp6ldMBKBlyXlPx40S4o0AmFlMUACU4NFex3YOBE/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/AVvXsEgQ8wNlRxBIB-gY3iyJXhpwgZ0By3LGhTVpWwqPRkANORFDzldAz8lzqzvom9ISSudlSQ9RCR_Xq5T7tIp-EVPwnLFDnDsiwdyvI_NrQceRpurFOYuZYKpQZMDCEgxYJVlpfmqWq0_zAJE/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/AVvXsEgrMybgSYFZxQ_FgTK6D8eclVHIMdquJMyGrUOfYBiFEB9oWDC0k7pK-CmBt_rViHdCrlQfv64droSvlY_e1VCDAo_xyQ6pdGmYvGrE606BzNUA7Fa5qIR-XPhTRfeM9N1WLvRQxpZI3WM/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/AVvXsEi7LtKWSYV8TeBLk9ChDxuXsq5qfasI8Xz8DgzQcl1HOzGLiULp9eqanFzUWUPXEgUbd3tgLcm6D0AkbTLXV9k73OMQrZmX_DRZxuBQYmG7wiZ7hNrJp5nKSIvZKrV4rM0VbGyeWgvCwIg/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/AVvXsEgpxjlfTgCwJRDBfoxdrmozu1L4bRL-NC5KjmZPQM2mFUv4jxSAKjY8GGS-va9C8kY-HyLrFaZOr7m_4k1kVxBtJvjVf6iVE5e7FJU1CSAjaodsyPK4baaKxqMJusr49mZBI34sUz7e4KQ/s1600/rss.png' title='RSS Feed'/></a><a href='http://www.bloggertrix.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNyudzX3rAnugjoR3uCR7VaSdtU5XE7rQz8a3lh0PdGP8CnKAequzG6zh8ibLbSH6fWHkjZznLsw6MkjH-2LI7nsf0KplJfU9seuBrUV6_lZp8aDFN5rQxDmnrbnYTkrmZ2pryEhyphenhyphenMP_w/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/AVvXsEhTZZak3E3uOj3_rTgQYLSxBb8X8iT8Tmno08yYOB24czEzhxFybZ4E0RcfAMkRj5WS1TnS72rXO9bpdy0AuQ5lZQW64tKaaKVAowJwJp2yJkWedWQEADewca70J67Gzrlo1xJv9O1i9tE/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/AVvXsEiGPtVaYcyLCi5BL7mrE5kY0YdiqNGAEiT8QsC5TZPoawtJYhGzmPGBEPQdYKS2eeur_7nnO8ft9YgHNW4tlqfwXRbcy0DC262FZr6S0m-el_Kjcd_s7JtbqYBbBjFotHv3PscAIEf8lsY/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/AVvXsEinP_BiUNCihagsLtt8jnEl9xIlNi3Ne1A_piQY4ZliFmU6IZ9_bNZGA_tAi7KUuUXL78Q0jSnYCFu_y7IHb6wObD467MO9NhuZ5XTLp6ldMBKBlyXlPx40S4o0AmFlMUACU4NFex3YOBE/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/AVvXsEgQ8wNlRxBIB-gY3iyJXhpwgZ0By3LGhTVpWwqPRkANORFDzldAz8lzqzvom9ISSudlSQ9RCR_Xq5T7tIp-EVPwnLFDnDsiwdyvI_NrQceRpurFOYuZYKpQZMDCEgxYJVlpfmqWq0_zAJE/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/AVvXsEgrMybgSYFZxQ_FgTK6D8eclVHIMdquJMyGrUOfYBiFEB9oWDC0k7pK-CmBt_rViHdCrlQfv64droSvlY_e1VCDAo_xyQ6pdGmYvGrE606BzNUA7Fa5qIR-XPhTRfeM9N1WLvRQxpZI3WM/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/AVvXsEi7LtKWSYV8TeBLk9ChDxuXsq5qfasI8Xz8DgzQcl1HOzGLiULp9eqanFzUWUPXEgUbd3tgLcm6D0AkbTLXV9k73OMQrZmX_DRZxuBQYmG7wiZ7hNrJp5nKSIvZKrV4rM0VbGyeWgvCwIg/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/AVvXsEgpxjlfTgCwJRDBfoxdrmozu1L4bRL-NC5KjmZPQM2mFUv4jxSAKjY8GGS-va9C8kY-HyLrFaZOr7m_4k1kVxBtJvjVf6iVE5e7FJU1CSAjaodsyPK4baaKxqMJusr49mZBI34sUz7e4KQ/s1600/rss.png' title='RSS Feed'/></a><a href='http://www.bloggertrix.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNyudzX3rAnugjoR3uCR7VaSdtU5XE7rQz8a3lh0PdGP8CnKAequzG6zh8ibLbSH6fWHkjZznLsw6MkjH-2LI7nsf0KplJfU9seuBrUV6_lZp8aDFN5rQxDmnrbnYTkrmZ2pryEhyphenhyphenMP_w/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.

No comments:

Post a Comment