20 Ways To Make $5000+ From Home. Earn Now!

Table of Content

Add Search Box With Social Media Buttons

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 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimUfY8mj1QezG5IuB1YRXk0eDjOZSzSDZKOE-5aAh6hGMAittGLqPrfpWpJoHt4UF38evaw9cgKHjBszgCGj_-WazuRT1tXial0wD19CpzLUqkWECkZKPZ0m60J1n62CbUUdKn88FOQn0/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8tGiYorBWhZVgLOl2Q_v30F5pA90YOjxWMUJBinP8NYRRYI5X0m7MLz3pk8M8RYstWYtW_WFQMeYMk8xX0MHtTgoYD_cHU75b4GyYusxqlHtnWMWkFvvzPrSxUlfHY7-t0EcMwzXZDYw/s1600/twitter.png' title='Follow Us on Twitter!'/></a>
<a href='http://facebook.com/bloggersstand'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsKZxq37uysQC576l_kjy-XtUIgQLlBm7vePca43jGYmMd2aNMR2-4dVmuh1h2jEIkRdhNGtKUGvshEuTjOJjv1q3SjI3-Fz3CMltQ1UbVIKbKVy_Viy3Va_NxP9SA2i1C7Vl6vRAtu3A/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/AVvXsEhRfXmv3jZFkIe5-7QV92RWjRCqhwF3xhmITfVm-rOgtWyF_wNuLJw8CD6HCb2Z-OKcx7PfqOLq_GnDodnF83p4OkkFfYbWRwsPh1AsWoDrdu9FO5f_j6uBGT1kw7vwFY7QfD7V4qvMyQg/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/AVvXsEi4I37CKfqTRH09PIaejUEuZThifpyhwsdu0t-kS8PJ_6WHGca_GTz5YTCwp9AKDPF6XAmcPCfGXAUVYdwUXcQzFpai5vKYKdkYu-VnZpWVyGyK3bv6QMcut4npwFNHrn9YSIt1FswL4JY/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/AVvXsEgIbVMI5mTpPt-qkYf7X9SH1LImobCUzCBHlIpEl15eECFmeP4c-xGVftFLVSMf66ZrSOqRnjZJbZlNPLrz-eUaD0IPqXF_UOxBF85YTjGnlbALmIB61oS-X-FDQTvquhcXHouILXVRrlY/s1600/digg.png' title='Follow Us'/></a>
<a href='http://feeds.feedburner.com/bloggersstand'><img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf6pzASAbbTXFGa_-peCEaZ9cekJBq3MOPL2kKSMzUNK1y7Qni7F7HrexEGeHj40EMQsvvRum3p2Za8aFe0C3zOqkp7hvBkZQ7RmFgqYNlu4ZELZcYs2cHeLdGbDW3Ukf7NrIq64f-2eE/s1600/rss.png' title='RSS Feed'/></a><a href='www.bloggersstand.blogspot.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-YcRBaDG4Mp44j-N_wjAZO0H7CXmtV_ZkwXkSctX3VK1NT822ixDbMDCncyommCBWgmJQJX5k1th6NZDF6f4JdrnpwXnagmwOnowe7fk3J41hTriPFAcwGBK-BJjit7sMsf_8LfgcafI/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGwqr4FiNFjN7nDaRmkiyr8SJnaJEKrM2rRf4yj4xy0RPGAcoQjTiKnfiH_XEu8Jbg78SoH2BFxa_k9wiURZXVaWJQE1ZI2z4V7kHc2wt4xzKV5McCDWNV7BQpL_TOb4Py0sWmIzLW1uw/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8tGiYorBWhZVgLOl2Q_v30F5pA90YOjxWMUJBinP8NYRRYI5X0m7MLz3pk8M8RYstWYtW_WFQMeYMk8xX0MHtTgoYD_cHU75b4GyYusxqlHtnWMWkFvvzPrSxUlfHY7-t0EcMwzXZDYw/s1600/twitter.png' title='Follow Us on Twitter!'/></a>
<a href='http://facebook.com/bloggersstand'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsKZxq37uysQC576l_kjy-XtUIgQLlBm7vePca43jGYmMd2aNMR2-4dVmuh1h2jEIkRdhNGtKUGvshEuTjOJjv1q3SjI3-Fz3CMltQ1UbVIKbKVy_Viy3Va_NxP9SA2i1C7Vl6vRAtu3A/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/AVvXsEhRfXmv3jZFkIe5-7QV92RWjRCqhwF3xhmITfVm-rOgtWyF_wNuLJw8CD6HCb2Z-OKcx7PfqOLq_GnDodnF83p4OkkFfYbWRwsPh1AsWoDrdu9FO5f_j6uBGT1kw7vwFY7QfD7V4qvMyQg/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/AVvXsEi4I37CKfqTRH09PIaejUEuZThifpyhwsdu0t-kS8PJ_6WHGca_GTz5YTCwp9AKDPF6XAmcPCfGXAUVYdwUXcQzFpai5vKYKdkYu-VnZpWVyGyK3bv6QMcut4npwFNHrn9YSIt1FswL4JY/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/AVvXsEgIbVMI5mTpPt-qkYf7X9SH1LImobCUzCBHlIpEl15eECFmeP4c-xGVftFLVSMf66ZrSOqRnjZJbZlNPLrz-eUaD0IPqXF_UOxBF85YTjGnlbALmIB61oS-X-FDQTvquhcXHouILXVRrlY/s1600/digg.png' title='Follow Us'/></a>
<a href='http://feeds.feedburner.com/bloggersstand'><img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf6pzASAbbTXFGa_-peCEaZ9cekJBq3MOPL2kKSMzUNK1y7Qni7F7HrexEGeHj40EMQsvvRum3p2Za8aFe0C3zOqkp7hvBkZQ7RmFgqYNlu4ZELZcYs2cHeLdGbDW3Ukf7NrIq64f-2eE/s1600/rss.png' title='RSS Feed'/></a><a href='www.bloggersstand.blogspot.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-YcRBaDG4Mp44j-N_wjAZO0H7CXmtV_ZkwXkSctX3VK1NT822ixDbMDCncyommCBWgmJQJX5k1th6NZDF6f4JdrnpwXnagmwOnowe7fk3J41hTriPFAcwGBK-BJjit7sMsf_8LfgcafI/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIRa60NTkLTFUEAcXm6gsg-t3YD8PeMUoWYucZYx6cQFQk1WXZiI64FElKCW13jSkxUIrCzrh0OAGZ2I58LvQC2I_QI2fxyqTqSG_oOx2llpq_ODV-sMKg-6NYymh5Dx0dqtyMhAQiVRI/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8tGiYorBWhZVgLOl2Q_v30F5pA90YOjxWMUJBinP8NYRRYI5X0m7MLz3pk8M8RYstWYtW_WFQMeYMk8xX0MHtTgoYD_cHU75b4GyYusxqlHtnWMWkFvvzPrSxUlfHY7-t0EcMwzXZDYw/s1600/twitter.png' title='Follow Us on Twitter!'/></a>
<a href='http://facebook.com/bloggersstand'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsKZxq37uysQC576l_kjy-XtUIgQLlBm7vePca43jGYmMd2aNMR2-4dVmuh1h2jEIkRdhNGtKUGvshEuTjOJjv1q3SjI3-Fz3CMltQ1UbVIKbKVy_Viy3Va_NxP9SA2i1C7Vl6vRAtu3A/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/AVvXsEhRfXmv3jZFkIe5-7QV92RWjRCqhwF3xhmITfVm-rOgtWyF_wNuLJw8CD6HCb2Z-OKcx7PfqOLq_GnDodnF83p4OkkFfYbWRwsPh1AsWoDrdu9FO5f_j6uBGT1kw7vwFY7QfD7V4qvMyQg/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/AVvXsEi4I37CKfqTRH09PIaejUEuZThifpyhwsdu0t-kS8PJ_6WHGca_GTz5YTCwp9AKDPF6XAmcPCfGXAUVYdwUXcQzFpai5vKYKdkYu-VnZpWVyGyK3bv6QMcut4npwFNHrn9YSIt1FswL4JY/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/AVvXsEgIbVMI5mTpPt-qkYf7X9SH1LImobCUzCBHlIpEl15eECFmeP4c-xGVftFLVSMf66ZrSOqRnjZJbZlNPLrz-eUaD0IPqXF_UOxBF85YTjGnlbALmIB61oS-X-FDQTvquhcXHouILXVRrlY/s1600/digg.png' title='Follow Us'/></a>
<a href='http://feeds.feedburner.com/bloggersstand'><img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf6pzASAbbTXFGa_-peCEaZ9cekJBq3MOPL2kKSMzUNK1y7Qni7F7HrexEGeHj40EMQsvvRum3p2Za8aFe0C3zOqkp7hvBkZQ7RmFgqYNlu4ZELZcYs2cHeLdGbDW3Ukf7NrIq64f-2eE/s1600/rss.png' title='RSS Feed'/></a><a href='www.bloggersstand.blogspot.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-YcRBaDG4Mp44j-N_wjAZO0H7CXmtV_ZkwXkSctX3VK1NT822ixDbMDCncyommCBWgmJQJX5k1th6NZDF6f4JdrnpwXnagmwOnowe7fk3J41hTriPFAcwGBK-BJjit7sMsf_8LfgcafI/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3HL5g4Z3xTZm2_HD7CksoMvhPpLVhi_J9d7K3rPXYzF4zex9Bm4qkfb-fEXzpAjGop8hEcZ8aeX76NXkbI6VDC8AvoY39RIXpjdCTTyVe7YVzA_O81tmE1XTBXic3zZqddxda1Vr_sGo/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8tGiYorBWhZVgLOl2Q_v30F5pA90YOjxWMUJBinP8NYRRYI5X0m7MLz3pk8M8RYstWYtW_WFQMeYMk8xX0MHtTgoYD_cHU75b4GyYusxqlHtnWMWkFvvzPrSxUlfHY7-t0EcMwzXZDYw/s1600/twitter.png' title='Follow Us on Twitter!'/></a>
<a href='http://facebook.com/bloggersstand'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsKZxq37uysQC576l_kjy-XtUIgQLlBm7vePca43jGYmMd2aNMR2-4dVmuh1h2jEIkRdhNGtKUGvshEuTjOJjv1q3SjI3-Fz3CMltQ1UbVIKbKVy_Viy3Va_NxP9SA2i1C7Vl6vRAtu3A/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/AVvXsEhRfXmv3jZFkIe5-7QV92RWjRCqhwF3xhmITfVm-rOgtWyF_wNuLJw8CD6HCb2Z-OKcx7PfqOLq_GnDodnF83p4OkkFfYbWRwsPh1AsWoDrdu9FO5f_j6uBGT1kw7vwFY7QfD7V4qvMyQg/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/AVvXsEi4I37CKfqTRH09PIaejUEuZThifpyhwsdu0t-kS8PJ_6WHGca_GTz5YTCwp9AKDPF6XAmcPCfGXAUVYdwUXcQzFpai5vKYKdkYu-VnZpWVyGyK3bv6QMcut4npwFNHrn9YSIt1FswL4JY/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/AVvXsEgIbVMI5mTpPt-qkYf7X9SH1LImobCUzCBHlIpEl15eECFmeP4c-xGVftFLVSMf66ZrSOqRnjZJbZlNPLrz-eUaD0IPqXF_UOxBF85YTjGnlbALmIB61oS-X-FDQTvquhcXHouILXVRrlY/s1600/digg.png' title='Follow Us'/></a>
<a href='http://feeds.feedburner.com/bloggersstand'><img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf6pzASAbbTXFGa_-peCEaZ9cekJBq3MOPL2kKSMzUNK1y7Qni7F7HrexEGeHj40EMQsvvRum3p2Za8aFe0C3zOqkp7hvBkZQ7RmFgqYNlu4ZELZcYs2cHeLdGbDW3Ukf7NrIq64f-2eE/s1600/rss.png' title='RSS Feed'/></a><a href='http://www.bloggersstand.blogspot.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-YcRBaDG4Mp44j-N_wjAZO0H7CXmtV_ZkwXkSctX3VK1NT822ixDbMDCncyommCBWgmJQJX5k1th6NZDF6f4JdrnpwXnagmwOnowe7fk3J41hTriPFAcwGBK-BJjit7sMsf_8LfgcafI/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 ! 

Post a Comment