Sevenstar Blog: 5 Amazing Designs Of Search Form With Social Media Icons for Your Blog Or Website

Saturday 21 March 2015

5 Amazing Designs Of Search Form With Social Media Icons for Your Blog Or Website

Search Form is one of the important thing in every Blog or Website. It helps visitors to search your website. Default blogger search form is so simple and dull and you cannot afford to put it into your blog especially when you have stylish theme/template.
For this purpose i designed 5 stylish search form designs for your blog or website which will give extra gorgeous look to your Blog.

  1. First Login into your Blogger Account.
  2. Select your Blog.
  3. Now Click on Layout.
  4. Click on 'add gadget' option where you want to place your 'Custom Search Box'.
  5. Now Click on HTML/Javascript Option as shown in Figure.



1.Now for 'Design 1' Paste the below code in HTML/Javascript.



<style>
#searchbox {
    border:3px solid #eee;
    padding: 20px 4px;
    width: 265px;
    padding-bottom:30px;
    padding-top:22px;
}
#searchbox {
padding-left:38px;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input {
    outline: none;
}
#searchbox input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3FF_2QZAbGsrmYjixfes8eonsFdBSzoCfX569gO44LbFPT10t4ipjcEBb9xg-pcCE10b-ffkr2agj1dh88YDOMUBw7YKGav1DpsJCLHIJXKZlPKe0Yqm-KLTqJoyVMMqg8FKb_w7BO77h/s1600/search-dark.png) no-repeat 10px 6px #fff;
    border-width: 1px;
    border-style: solid;
    border-color: #fff;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: black;
    width: 70%;
    padding: 8px 15px 8px 30px;
    margin-top:0px;
    border:1px solid #eee;
}
#button-submit {
    background: #222222;
    border-width: 0px;
    padding: 9px 10px;
    width: 25%;
    cursor: pointer;
    font: bold 12px Arial, Helvetica;
    color: #fff;
    text-shadow: 0 1px 0 #555;
}
#button-submit:hover {
    background: #4f5356;
}
#button-submit:active {
    background: #5b5d60;
    outline: none;
}
#button-submit::-moz-focus-inner {
    border: 0;
}
</style>
<form id="searchbox" method="get" action="/search">
<a href='http://feeds.feedburner.com/StarsBlogging' rel='nofollow' target='_blank'> <img alt='Click Me' onmouseout='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUTnljJDERf3b4z_hmigCQyTHtlFdHb55bI2i7SreKCdJYMPld-Fv1JcWZOx50T_CmprfuaycL9VAj_zWG1rIxxtnpko753Cm_KXwYNF4ofoeFLf1UY7vwyedU7xTnmrMyrTwiUclhSc9J/s1600/rss-inactive.png&apos;' onmouseover='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuKE-c2x-dCa7rdxgx6PKGFKVMALtXn0P75nLTaSb8j43SjOF3xEeSjHnj-PHTVGtxLztjqQTLo5YaPtBrZMz4qcLjcinsFFn38baLLJS8XpB0-GQ0JIQ8XHveSJSXz2gZK43bHlDe2FeX/s1600/rss.png&apos;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUTnljJDERf3b4z_hmigCQyTHtlFdHb55bI2i7SreKCdJYMPld-Fv1JcWZOx50T_CmprfuaycL9VAj_zWG1rIxxtnpko753Cm_KXwYNF4ofoeFLf1UY7vwyedU7xTnmrMyrTwiUclhSc9J/s1600/rss-inactive.png'/></a>
<a href='#' rel='nofollow' target='_blank'><img alt='Click Me' hieght='100' onmouseout='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3prGZotJD0tmU0405X3XYOTEqa83906y_FaFANwypXhCGkOpmofeMpahiJ15sBWawsEe8AVr_oiHzVmo4-xt6HVwGZhA9FCEIgDZtWmRn_xcvoPvFytECUeABil4oK7JBdvFZeQ1lzDyS/s1600/facebook-inactive.png&apos;' onmouseover='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzVmdo_3xipqOWaYT-xHiU0CmiLSvRJ9EG2TadigtvbIAdRTh_cg8mUic2VDeVwSoP0lVbyWlz_4c9ygja5YueXDZcIt5UD4Zrwy0r5qLZ1LeATzKFK9N8b5JNLYpBNpZQuGPwPS17U7RC/s1600/facebook.png&apos;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3prGZotJD0tmU0405X3XYOTEqa83906y_FaFANwypXhCGkOpmofeMpahiJ15sBWawsEe8AVr_oiHzVmo4-xt6HVwGZhA9FCEIgDZtWmRn_xcvoPvFytECUeABil4oK7JBdvFZeQ1lzDyS/s1600/facebook-inactive.png'/></a>
<a href='#' rel='nofollow' target='_blank'><img alt='Click Me' onmouseout='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy9FJK8u9dBpkikxwSdDwj5oi5c-kv484ejgnBCVgK3qjKRpm0QifyXPwgBi7va3Jbc9XXdrKvXawr8LpqatnKi_-qTtaX4Jr2iLL4zV_q8qnOhqtk80sQuOvcSp-01P4GzxoH5Iul4vVs/s1600/twitter-inactive.png&apos;' onmouseover='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimX1YXnYK6rJ8H3T-vTT45jz_Paf8kd-HtUzFmMC9dZjHsRmNZkuWUoo3Nsk26qDGkx3xjEq1n63fUqNRtnaTyGE2LcLyryCl6oYcah0jn5O6-KmS70I-e06Qs92FWvz-alReJthKaXsaJ/s1600/twitter.png&apos;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy9FJK8u9dBpkikxwSdDwj5oi5c-kv484ejgnBCVgK3qjKRpm0QifyXPwgBi7va3Jbc9XXdrKvXawr8LpqatnKi_-qTtaX4Jr2iLL4zV_q8qnOhqtk80sQuOvcSp-01P4GzxoH5Iul4vVs/s1600/twitter-inactive.png'/></a>
<a href='#' rel='nofollow' target='_blank'><img alt='Click Me' hieght='160' onmouseout='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaLmnX0zBj7eMadFl5vBkH2Qz_btlAoPZIygXg5bnxLEn7BaoN2ga9da8bBB4RgB-WfZu2Bcf0n4V_Iy_mMA1dYKk8-ShRjjBNoUIJVvzvuCrAO6zlFb5GmPTNiiOTgFz5EqVp-BPTMC4C/s1600/google-plus-inactive.png&apos;' onmouseover='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXS_mXSS0CTb-Y2X3mmqWHmz8_AQbrhD4k9m-vy7R5jzGoz6ROBDNvTu28KIumsDKvQoP6grSfA7oc1x4zd9FfqjFhjv3khIgjrSfH7CirXOB0lytpwn6t_BIAHGZbrwOl45WGTON_h712/s1600/google-plus.png&apos;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaLmnX0zBj7eMadFl5vBkH2Qz_btlAoPZIygXg5bnxLEn7BaoN2ga9da8bBB4RgB-WfZu2Bcf0n4V_Iy_mMA1dYKk8-ShRjjBNoUIJVvzvuCrAO6zlFb5GmPTNiiOTgFz5EqVp-BPTMC4C/s1600/google-plus-inactive.png'/></a>
<a href='#' rel='nofollow' target='_blank'><img alt='Click Me' onmouseout='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaMl0qvnPrEc78_daIBxrzQNiruJw_uNjWf8oWou60FlQTrOeESobpgCwrTpvLWTKkJW5Ohm4-AQRQ9Qt888SSPGtV9pEri64MJpuNs1958qadKQ56lMNhgLjjSuDCuOtbUqGt58KYcuJG/s1600/pinterest-inactive.png&apos;' onmouseover='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPOjbR4PBHZgpBGMWtHR9uUJ_DskO8UZkYYjfy7pW3UwblwmbqFeW3NeVyrrbmAVBerPTDd2eh0y1FU5lsbNLId_KWby26OX6sTQYPT86IX9eAzyqn54D6265CtCjuTFCLyI1_ACxplNCK/s1600/pinterest.png&apos;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaMl0qvnPrEc78_daIBxrzQNiruJw_uNjWf8oWou60FlQTrOeESobpgCwrTpvLWTKkJW5Ohm4-AQRQ9Qt888SSPGtV9pEri64MJpuNs1958qadKQ56lMNhgLjjSuDCuOtbUqGt58KYcuJG/s1600/pinterest-inactive.png'/></a></p>
<input name="q" type="text" size="15" placeholder="Type here..." />
<input id="button-submit" type="submit" value="Search" />
</form> 

2. For Design "2" Paste the following code into HTML/Javvscript.


<style>
#searchbox {
    border:3px solid #eee;
    padding: 20px 4px;
    width: 265px;
    padding-bottom:30px;
    padding-top:22px;
}
#searchbox {
padding-left:38px;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input {
    outline: none;
}
#searchbox input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3FF_2QZAbGsrmYjixfes8eonsFdBSzoCfX569gO44LbFPT10t4ipjcEBb9xg-pcCE10b-ffkr2agj1dh88YDOMUBw7YKGav1DpsJCLHIJXKZlPKe0Yqm-KLTqJoyVMMqg8FKb_w7BO77h/s1600/search-dark.png) no-repeat 10px 6px #fff;
    border-width: 1px;
    border-style: solid;
    border-color: #fff;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: black;
    width: 70%;
    padding: 8px 15px 8px 30px;
    margin-top:0px;
    border:1px solid #eee;
-webkit-box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75);
box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75);
}
#searchbox input[type="text"]:hover {
-webkit-box-shadow: 0px 0px 15px 5px rgba(0, 185, 233, .75);
box-shadow: 0px 0px 15px 5px rgba(0, 185, 233, .75);
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
#button-submit {
    background: #4845FC;
    border-width: 0px;
    padding: 9px 10px;
    width: 25%;
    cursor: pointer;
    font: bold 12px Arial, Helvetica;
    color: #fff;
    text-shadow: 0 1px 0 #555;
}
#button-submit:hover {
    background: #4f5356;
}
#button-submit:active {
    background: #4845FC;
    outline: none;
}
#button-submit::-moz-focus-inner {
    border: 0;
}
</style>
<form id="searchbox" method="get" action="/search">
<a href='http://feeds.feedburner.com/SevenstarBlog/#' rel='nofollow' target='_blank'> <img alt='Click Me' height='40'onmouseout='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib3hAhv4QJtYfiNujYvLjDrU0rg0j2nufH2bq22VW44gejIVM_0lNQyVozfZPnJxoKVxRpLoLEyWPxETXIUIv7Zy7YxFlhUcBLVnLGxr4Gkp7CoNWwOMDSY3N60yGgGqJQPCCGnuUcIAyA/s1600/rss.png&apos;' onmouseover='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuKE-c2x-dCa7rdxgx6PKGFKVMALtXn0P75nLTaSb8j43SjOF3xEeSjHnj-PHTVGtxLztjqQTLo5YaPtBrZMz4qcLjcinsFFn38baLLJS8XpB0-GQ0JIQ8XHveSJSXz2gZK43bHlDe2FeX/s1600/rss.png&apos;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUTnljJDERf3b4z_hmigCQyTHtlFdHb55bI2i7SreKCdJYMPld-Fv1JcWZOx50T_CmprfuaycL9VAj_zWG1rIxxtnpko753Cm_KXwYNF4ofoeFLf1UY7vwyedU7xTnmrMyrTwiUclhSc9J/s1600/rss-inactive.png'/></a>
<a href='#' rel='nofollow' target='_blank'><img alt='Click Me'height='40'onmouseout='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSEoCRx2P1Z_HDrp4AFr5gM76pbY0Kcvp8tnMCQm6VIrvOTnX6kh9mPRFByx_vdluitkNhvGthdsOxNVRqafZUmhWCGezRyo_Hr0VTUSMKCvKWC-h1XW3z-jUuBFfYW9ifC-r0PbQ72PCp/s1600/Facebook+Round.png&apos;' onmouseover='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzVmdo_3xipqOWaYT-xHiU0CmiLSvRJ9EG2TadigtvbIAdRTh_cg8mUic2VDeVwSoP0lVbyWlz_4c9ygja5YueXDZcIt5UD4Zrwy0r5qLZ1LeATzKFK9N8b5JNLYpBNpZQuGPwPS17U7RC/s1600/facebook.png&apos;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3prGZotJD0tmU0405X3XYOTEqa83906y_FaFANwypXhCGkOpmofeMpahiJ15sBWawsEe8AVr_oiHzVmo4-xt6HVwGZhA9FCEIgDZtWmRn_xcvoPvFytECUeABil4oK7JBdvFZeQ1lzDyS/s1600/facebook-inactive.png'/></a>
<a href='#' rel='nofollow' target='_blank'><img alt='Click Me' height='40'onmouseout='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDif7SBQXbzYndaR4tZfPyJas6iB85cANwaqVT5llUw3ePao3fg-X64p0TqJX2JXPF0WaCV7tlEet49wqd4z3v1weyBGqbwXfiwrDWsnpCtwCYBaUXySGpL75GanK42un_stNBBwBd29wv/s1600/Twitter+round.png&apos;' onmouseover='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimX1YXnYK6rJ8H3T-vTT45jz_Paf8kd-HtUzFmMC9dZjHsRmNZkuWUoo3Nsk26qDGkx3xjEq1n63fUqNRtnaTyGE2LcLyryCl6oYcah0jn5O6-KmS70I-e06Qs92FWvz-alReJthKaXsaJ/s1600/twitter.png&apos;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy9FJK8u9dBpkikxwSdDwj5oi5c-kv484ejgnBCVgK3qjKRpm0QifyXPwgBi7va3Jbc9XXdrKvXawr8LpqatnKi_-qTtaX4Jr2iLL4zV_q8qnOhqtk80sQuOvcSp-01P4GzxoH5Iul4vVs/s1600/twitter-inactive.png'/></a>
<a href='https://plus.google.com/b/114769007034838551722/#' rel='nofollow' target='_blank'><img alt='Click Me' height='40' onmouseout='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV2Dllxq_3oXmhyphenhyphen8AWdAqDU0m4fcagr800-msct0x2Z4bDvqmuTkTmcUqP2X73Bx4R7bxVT-o0GlL7VnR8pTDgpkVt-KdqLuAXXfgX58mtcJgkKbToLVX_y0NbyqCjYmxVGr6tfhAkqwEc/s1600/Google+plus+round.png&apos;' onmouseover='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXS_mXSS0CTb-Y2X3mmqWHmz8_AQbrhD4k9m-vy7R5jzGoz6ROBDNvTu28KIumsDKvQoP6grSfA7oc1x4zd9FfqjFhjv3khIgjrSfH7CirXOB0lytpwn6t_BIAHGZbrwOl45WGTON_h712/s1600/google-plus.png&apos;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaLmnX0zBj7eMadFl5vBkH2Qz_btlAoPZIygXg5bnxLEn7BaoN2ga9da8bBB4RgB-WfZu2Bcf0n4V_Iy_mMA1dYKk8-ShRjjBNoUIJVvzvuCrAO6zlFb5GmPTNiiOTgFz5EqVp-BPTMC4C/s1600/google-plus-inactive.png'/></a>
<a href='#' rel='nofollow' target='_blank'><img alt='Click Me' height='40'onmouseout='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhifyl9eri0v2l0STqF2F5PwXLVovpQPsyox4SUhRPgT24qBdf5tYSuhI2Y2gtFbh6p4YsdPshm7BoaZQo3HGL5yHe0sx0rvtUk1owy_mhT7Hdbh6BZrw4IlA6silhasTJaMvQ92B0206IZ/s1600/Pinterest+round.png&apos;' onmouseover='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhifyl9eri0v2l0STqF2F5PwXLVovpQPsyox4SUhRPgT24qBdf5tYSuhI2Y2gtFbh6p4YsdPshm7BoaZQo3HGL5yHe0sx0rvtUk1owy_mhT7Hdbh6BZrw4IlA6silhasTJaMvQ92B0206IZ/s1600/Pinterest+round.png&apos;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaMl0qvnPrEc78_daIBxrzQNiruJw_uNjWf8oWou60FlQTrOeESobpgCwrTpvLWTKkJW5Ohm4-AQRQ9Qt888SSPGtV9pEri64MJpuNs1958qadKQ56lMNhgLjjSuDCuOtbUqGt58KYcuJG/s1600/pinterest-inactive.png'/></a></p>
<input name="q" type="text" size="15" placeholder="Type here..." />
<input id="button-submit" type="submit" value="Search" />
</form> 
3. and forDesign "3" Paste the below code into HTML/Javascript.


<style>
#searchbox {
    border:3px solid #eee;
    padding: 20px 4px;
    width: 265px;
    padding-bottom:30px;
    padding-top:22px;
}
#searchbox {
padding-left:10px;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input {
    outline: none;
}
#searchbox input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3FF_2QZAbGsrmYjixfes8eonsFdBSzoCfX569gO44LbFPT10t4ipjcEBb9xg-pcCE10b-ffkr2agj1dh88YDOMUBw7YKGav1DpsJCLHIJXKZlPKe0Yqm-KLTqJoyVMMqg8FKb_w7BO77h/s1600/search-dark.png) no-repeat 10px 6px #fff;
    border-width: 1px;
    border-style: solid;
    border-color: #fff;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: black;
    width: 70%;
    padding: 8px 15px 8px 30px;
    margin-top:0px;
    border:1px solid #eee;
}
#button-submit {
    background: green;
    border-width: 0px;
    padding: 9px 10px;
    width: 25%;
    cursor: pointer;
    font: bold 12px Arial, Helvetica;
    color: #fff;
    text-shadow: 0 1px 0 #555;
}
#button-submit:hover {
    background: #3342ED;
}
#button-submit:active {
    background: #5b5d60;
    outline: none;
}
#button-submit::-moz-focus-inner {
    border: 0;
}
</style>
<form id="searchbox" method="get" action="/search">
<a href="#" target="blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkvBnWSzButnl6wf-32GvXTCn78kd70Dw6zsgBEyCbMihoIscf4oedZop0FDDJ4SmSwamQqxnK5lb2HynRHLrzyF3Cf_tE3o1w3i-K2f0eZn9mCzNUkUktF22x_776pmqjLsF5IyyaDccS/s1600/Google+plus+square.png" width="40" height="40"/>
</a>
<a href="#" target="blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlm_3z8guCQCUB0bKnEXUOmlYNgdTgO4R9OuwaSjjHBPIr6JSnf0v7szb-7eQ5IXhNqXS1DomOon_A3bI3QHF3uyhZUr3eIxxFHL1NBOALquS_wsFLcsQPelmr3xOUZ_SSswaLCh0Z27fZ/s1600/Facebook+Square.png" width="40" height="40"/></a>
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcOCXZNQQPvkAaBBoKfuCL8326O_K5T61u18V7BTnPYpXR6WkfiH8KGbTcVySN3-_Yjc_r8T2haIoD978K9mhMp3-qE_1wK73NOMCdlCB3W01A7TIf8fv_9G0qNQMedp0GrxbfpNc_7i08/s1600/Linkedin+square.png" width="40" height="40"/>
<a href="#" target="blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWTfLkte7s0wDWmC13ZoGO6BKlXlTMULQXqjzdjcEfzAXX0rSQ1oFheAISW7McCCjs66V1sSdO4C2Z2B4xfLNVSU40jEoNgsQL0Wwzhk-2Q-XfvyysDui3jgOf0CsBzhiul56dnBqxKRw1/s1600/Pinterest+square.png" width="40" height="40"/></a>
<a href="#" target="blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhHuWF5oPi6vLXjalFqqm8OeydPaRFQyvcEqD7VDUCYICZmNzPmsHiRr9mqY629N865p_Ns8o0EcavhxC8xJgUJ-aLBWMowzfMEkxjhr9wjcY0iR4mQ_NCi-4_YA7CG3NGUez36g8cf9pW/s1600/Twitter+square.png" width="40"/></a>
<a href="#" target="blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz_LREyPETa14l86lNG-pdmjI4jTKi_s8TNKyn3RrvsYRts6ySTK-z1ZhflmS7wPrgN4wKlJ-yZU2vDGiELXBfXP3Vnt02IxO420cDOycrj0gMZZXkVzk2GAUTxBcRebYEklg_sd8K81t4/s1600/social_media_iconssss.jpg" width="40"/></a>
<br>
<input name="q" type="text" size="15" placeholder="Type here..." />
<input id="button-submit" type="submit" value="Search" />
</form> 

4. Now for Design '4'  Paste the below code into Html/Javascript.


<style>
#searchbox {
    border:3px solid #eee;
    padding: 20px 4px;
    width: 275px;
    padding-bottom:30px;
    padding-top:22px;
}
#searchbox {
padding-left:20px;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input {
    outline: none;
}
#searchbox input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3FF_2QZAbGsrmYjixfes8eonsFdBSzoCfX569gO44LbFPT10t4ipjcEBb9xg-pcCE10b-ffkr2agj1dh88YDOMUBw7YKGav1DpsJCLHIJXKZlPKe0Yqm-KLTqJoyVMMqg8FKb_w7BO77h/s1600/search-dark.png) no-repeat 10px 6px #fff;
    border-width: 1px;
    border-style: solid;
    border-color: #fff;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: black;
    width: 50%;
    padding: 8px 15px 8px 30px;
    margin-top:0px;
    border:1px solid #eee;
-webkit-box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75);
box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75);
}
#searchbox input[type="text"]:hover {
-webkit-box-shadow: 0px 0px 15px 5px rgba(0, 185, 233, .75);
box-shadow: 0px 0px 15px 5px rgba(0, 185, 233, .75);
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
#button-submit {
    background: orange;
    border-width: 0px;
    padding: 9px 10px;
    width: 25%;
    cursor: pointer;
    font: bold 12px Arial, Helvetica;
    color: #fff;
    text-shadow: 0 1px 0 #555;
}
#button-submit:hover {
    background: #4f5356;
}
#button-submit:active {
    background: #4845FC;
    outline: none;
}
#button-submit::-moz-focus-inner {
    border: 0;
}
</style>
<form id="searchbox" method="get" action="/search">
<a href='http://feeds.feedburner.com/StarsBlogging' rel='nofollow' target='_blank'> <img alt='Click Me' onmouseout='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUTnljJDERf3b4z_hmigCQyTHtlFdHb55bI2i7SreKCdJYMPld-Fv1JcWZOx50T_CmprfuaycL9VAj_zWG1rIxxtnpko753Cm_KXwYNF4ofoeFLf1UY7vwyedU7xTnmrMyrTwiUclhSc9J/s1600/rss-inactive.png&apos;' onmouseover='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuKE-c2x-dCa7rdxgx6PKGFKVMALtXn0P75nLTaSb8j43SjOF3xEeSjHnj-PHTVGtxLztjqQTLo5YaPtBrZMz4qcLjcinsFFn38baLLJS8XpB0-GQ0JIQ8XHveSJSXz2gZK43bHlDe2FeX/s1600/rss.png&apos;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLj-1ZS0EKAP9VdB4hMl-TRfI1lNyfXMVB3nptkoZQKG0fpDfpsy3Ka4n7wMYgzX3v1T7BGP1YOc06o3lydvqBnIYegc5isxdp5WB796mRT3pp8yWzVHq6VTP_oRbyEG5BVZKzRAkHXH0/s1600/rss.png'/></a>
&nbsp
<a href='#' rel='nofollow' target='_blank'><img alt='Click Me' hieght='100' onmouseout='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3prGZotJD0tmU0405X3XYOTEqa83906y_FaFANwypXhCGkOpmofeMpahiJ15sBWawsEe8AVr_oiHzVmo4-xt6HVwGZhA9FCEIgDZtWmRn_xcvoPvFytECUeABil4oK7JBdvFZeQ1lzDyS/s1600/facebook-inactive.png&apos;' onmouseover='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzVmdo_3xipqOWaYT-xHiU0CmiLSvRJ9EG2TadigtvbIAdRTh_cg8mUic2VDeVwSoP0lVbyWlz_4c9ygja5YueXDZcIt5UD4Zrwy0r5qLZ1LeATzKFK9N8b5JNLYpBNpZQuGPwPS17U7RC/s1600/facebook.png&apos;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHSf6MQdbAI7apxtuIxugVKI1VnVvpD5Gtyo7YlxDtlep2OkeZp-ANh016qsCLJtEu4SPV4NvKfhHvcUjLo9_sX-cT8Q7paCUJm1CXbQwy6swiEF8cA0gq0FoPYdGc9cwsQhSNbIIUXj4/s1600/facebook.png'/></a>
&nbsp
<a href='#' rel='nofollow' target='_blank'><img alt='Click Me' onmouseout='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy9FJK8u9dBpkikxwSdDwj5oi5c-kv484ejgnBCVgK3qjKRpm0QifyXPwgBi7va3Jbc9XXdrKvXawr8LpqatnKi_-qTtaX4Jr2iLL4zV_q8qnOhqtk80sQuOvcSp-01P4GzxoH5Iul4vVs/s1600/twitter-inactive.png&apos;' onmouseover='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimX1YXnYK6rJ8H3T-vTT45jz_Paf8kd-HtUzFmMC9dZjHsRmNZkuWUoo3Nsk26qDGkx3xjEq1n63fUqNRtnaTyGE2LcLyryCl6oYcah0jn5O6-KmS70I-e06Qs92FWvz-alReJthKaXsaJ/s1600/twitter.png&apos;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvnQoqMp6PlGncPza26IttEGkuFfhG4DKZB0nQdvRtSGX7G2mG-Te2zkzUUFYpJdYSfMBsOVIMe7ssV40BAjEsdtHQ0YAbd_YCG7B8BHwDIePsnuBPt4FphI-OWcyi0oFcEqWUElLrJ64/s1600/twitter.png'/></a>
&nbsp
<a href='#' rel='nofollow' target='_blank'><img alt='Click Me' hieght='160' onmouseout='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaLmnX0zBj7eMadFl5vBkH2Qz_btlAoPZIygXg5bnxLEn7BaoN2ga9da8bBB4RgB-WfZu2Bcf0n4V_Iy_mMA1dYKk8-ShRjjBNoUIJVvzvuCrAO6zlFb5GmPTNiiOTgFz5EqVp-BPTMC4C/s1600/google-plus-inactive.png&apos;' onmouseover='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXS_mXSS0CTb-Y2X3mmqWHmz8_AQbrhD4k9m-vy7R5jzGoz6ROBDNvTu28KIumsDKvQoP6grSfA7oc1x4zd9FfqjFhjv3khIgjrSfH7CirXOB0lytpwn6t_BIAHGZbrwOl45WGTON_h712/s1600/google-plus.png&apos;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghAWVRdZfa0jcCnkAdKon1wqXrA7p62DbeZ37PsV9tmSNAEeWRrqzlfXVg07J5Yy_OkbA3IOP3xWIyu2xDdZPzGwitlKD7hucHOGa2AO5UdXT3h4QfqiD_xIcVedwjEQQTG4GcJuAG_sQ/s1600/googleplus.png'/></a>
&nbsp
<a href='#' rel='nofollow' target='_blank'><img alt='Click Me' onmouseout='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaMl0qvnPrEc78_daIBxrzQNiruJw_uNjWf8oWou60FlQTrOeESobpgCwrTpvLWTKkJW5Ohm4-AQRQ9Qt888SSPGtV9pEri64MJpuNs1958qadKQ56lMNhgLjjSuDCuOtbUqGt58KYcuJG/s1600/pinterest-inactive.png&apos;' onmouseover='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPOjbR4PBHZgpBGMWtHR9uUJ_DskO8UZkYYjfy7pW3UwblwmbqFeW3NeVyrrbmAVBerPTDd2eh0y1FU5lsbNLId_KWby26OX6sTQYPT86IX9eAzyqn54D6265CtCjuTFCLyI1_ACxplNCK/s1600/pinterest.png&apos;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5CNOcPHu1tF9j6YJd4Lc_Ild8JUqZheDnuS2LzYhobYFekJgPCWd216FOQilVm6N8mutCMk7cW4B5MqCScSI1ZPloLHabzkxkGk0jpQQiUI-WoQHIrbs8oPYQmYxQ_WZ9EHc3svCc-5E/s1600/pinterest.png'/></a>
</p>
<input name="q" type="text" size="15" placeholder="Type here..." />
<input id="button-submit" type="submit" value="Search" />
</form> 

5. and for last Design '5' Paste the below code into html/javascript.


<style>
#searchbox {
    border:3px solid #eee;
    padding: 20px 4px;
    width: 275px;
    padding-bottom:30px;
    padding-top:2px;
}
#searchbox {
padding-left:20px;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input {
    outline: none;
}
#searchbox input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3FF_2QZAbGsrmYjixfes8eonsFdBSzoCfX569gO44LbFPT10t4ipjcEBb9xg-pcCE10b-ffkr2agj1dh88YDOMUBw7YKGav1DpsJCLHIJXKZlPKe0Yqm-KLTqJoyVMMqg8FKb_w7BO77h/s1600/search-dark.png) no-repeat 10px 6px #fff;
    border-width: 1px;
    border-style: solid;
    border-color: #fff;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: black;
    width: 50%;
    padding: 8px 15px 8px 30px;
    margin-top:0px;
    border:1px solid #eee;
-webkit-box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75);
box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75);
}
#searchbox input[type="text"]:hover {
-webkit-box-shadow: 0px 0px 15px 5px rgba(0, 185, 233, .75);
box-shadow: 0px 0px 15px 5px rgba(0, 185, 233, .75);
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
#button-submit {
    background: orange;
    border-width: 0px;
    padding: 9px 10px;
    width: 25%;
    cursor: pointer;
    font: bold 12px Arial, Helvetica;
    color: #fff;
    text-shadow: 0 1px 0 #555;
}
#button-submit:hover {
    background: #4f5356;
}
#button-submit:active {
    background: #4845FC;
    outline: none;
}
#button-submit::-moz-focus-inner {
    border: 0;
}
</style>
<form id="searchbox" method="get" action="/search">
<a href='http://feeds.feedburner.com/StarsBlogging' rel='nofollow' target='_blank'> <img alt='Click Me' onmouseout='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUTnljJDERf3b4z_hmigCQyTHtlFdHb55bI2i7SreKCdJYMPld-Fv1JcWZOx50T_CmprfuaycL9VAj_zWG1rIxxtnpko753Cm_KXwYNF4ofoeFLf1UY7vwyedU7xTnmrMyrTwiUclhSc9J/s1600/rss-inactive.png&apos;' onmouseover='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuKE-c2x-dCa7rdxgx6PKGFKVMALtXn0P75nLTaSb8j43SjOF3xEeSjHnj-PHTVGtxLztjqQTLo5YaPtBrZMz4qcLjcinsFFn38baLLJS8XpB0-GQ0JIQ8XHveSJSXz2gZK43bHlDe2FeX/s1600/rss.png&apos;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyBNMnpZDRKV_pK3j0C_nm_ySyhz90Lj-Lm6j0Ev0FHBvwLISBBWKgH3gjT7gRluAWzNz_bmmk-MPvDLm8DTqELwerInZ53w1fePIca44AkLZ0djEltnDk4-Twt1m0dqD_Wkv71a76gUU/s1600/RSS.png'/></a>
<a href='#' rel='nofollow' target='_blank'><img alt='Click Me' hieght='100' onmouseout='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3prGZotJD0tmU0405X3XYOTEqa83906y_FaFANwypXhCGkOpmofeMpahiJ15sBWawsEe8AVr_oiHzVmo4-xt6HVwGZhA9FCEIgDZtWmRn_xcvoPvFytECUeABil4oK7JBdvFZeQ1lzDyS/s1600/facebook-inactive.png&apos;' onmouseover='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzVmdo_3xipqOWaYT-xHiU0CmiLSvRJ9EG2TadigtvbIAdRTh_cg8mUic2VDeVwSoP0lVbyWlz_4c9ygja5YueXDZcIt5UD4Zrwy0r5qLZ1LeATzKFK9N8b5JNLYpBNpZQuGPwPS17U7RC/s1600/facebook.png&apos;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH9Q7H6ew7VRpVC4Aj7n5w0g5tHB_B37Mya4VM3VhfBybrg0rx0kqQyBzFFvLeukoKbFip3Z3WRcqbQJxL2JLvkEJBqdt7b_FTff3N8Am9y6IC7kzl-MMcxDryMawwsiFVCjG5aurPAoA/s1600/Facebook.png'/></a>
<a href='#' rel='nofollow' target='_blank'><img alt='Click Me' onmouseout='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy9FJK8u9dBpkikxwSdDwj5oi5c-kv484ejgnBCVgK3qjKRpm0QifyXPwgBi7va3Jbc9XXdrKvXawr8LpqatnKi_-qTtaX4Jr2iLL4zV_q8qnOhqtk80sQuOvcSp-01P4GzxoH5Iul4vVs/s1600/twitter-inactive.png&apos;' onmouseover='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimX1YXnYK6rJ8H3T-vTT45jz_Paf8kd-HtUzFmMC9dZjHsRmNZkuWUoo3Nsk26qDGkx3xjEq1n63fUqNRtnaTyGE2LcLyryCl6oYcah0jn5O6-KmS70I-e06Qs92FWvz-alReJthKaXsaJ/s1600/twitter.png&apos;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNnr477DZJxVTsKkWDbwlc13oYw3UK4vwYGFpgNmvulpBxd5qsEto7kqZKh5PqV-uJmpDrRAmTv4edJFhJDSNQD6PrtjGuvJA0PW-s4HDCti95tAtpC1jvx9OysRQdOutt-WYwvDgtrVE/s1600/Twitter.png'/></a>
<a href='#' rel='nofollow' target='_blank'><img alt='Click Me' hieght='160' onmouseout='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaLmnX0zBj7eMadFl5vBkH2Qz_btlAoPZIygXg5bnxLEn7BaoN2ga9da8bBB4RgB-WfZu2Bcf0n4V_Iy_mMA1dYKk8-ShRjjBNoUIJVvzvuCrAO6zlFb5GmPTNiiOTgFz5EqVp-BPTMC4C/s1600/google-plus-inactive.png&apos;' onmouseover='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXS_mXSS0CTb-Y2X3mmqWHmz8_AQbrhD4k9m-vy7R5jzGoz6ROBDNvTu28KIumsDKvQoP6grSfA7oc1x4zd9FfqjFhjv3khIgjrSfH7CirXOB0lytpwn6t_BIAHGZbrwOl45WGTON_h712/s1600/google-plus.png&apos;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivstyHnhdh_ID36mJndfh-EYWXFqb3Kx0-XkxmMHyTBMg_B-S2eBMStMa56O89DHhyn279Iip34IUfHtCbyDbMXEtB45TilhdsJR2t3UOYjmfhnOJBkgVPynwyRa_ys_N5wv_RR-bS47Y/s1600/Google+plus.png'/></a>
<a href='#' rel='nofollow' target='_blank'><img alt='Click Me' onmouseout='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaMl0qvnPrEc78_daIBxrzQNiruJw_uNjWf8oWou60FlQTrOeESobpgCwrTpvLWTKkJW5Ohm4-AQRQ9Qt888SSPGtV9pEri64MJpuNs1958qadKQ56lMNhgLjjSuDCuOtbUqGt58KYcuJG/s1600/pinterest-inactive.png&apos;' onmouseover='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPOjbR4PBHZgpBGMWtHR9uUJ_DskO8UZkYYjfy7pW3UwblwmbqFeW3NeVyrrbmAVBerPTDd2eh0y1FU5lsbNLId_KWby26OX6sTQYPT86IX9eAzyqn54D6265CtCjuTFCLyI1_ACxplNCK/s1600/pinterest.png&apos;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHAZ7FK8brzpvGqYzIuP3oUkga6I9p10akq_iTcDpgqjX_ItYu9RO_GS72jLC4TtjvShXRvd_BCViOMxM_7bjMxNPmoy5k2dpmr-hmeoibGPq_wIGYeDxalPJaMslgynIKuUdmh50YuHY/s1600/Pinterest.png'/></a>
</p>
<input name="q" type="text" size="15" placeholder="Type here..." />
<input id="button-submit" type="submit" value="Search" />
</form> 












Share this article :
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)