Add 6 cool search box to your blogger blog

We all know how a search box is important for a blog. It helps visitor to find the keyword he want.

At first learn How do you add this search box to your blogger blog.

For adding searcbox to your blogger blog first >> then go to Layout >> Add a Gadget
and then pest the searc box code you want from below .

1. Simple ash colour search box for blogger blog

<style>#searchbox {    background: #d8d8d8;    border: 4px solid #e8e8e8;    padding: 20px 10px;    width: 250px;}
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/AVvXsEgXEK0Ptm6qjYErg9bmKDn5AJNHqFQ3xQphnxPfbS852o3drMAlJXWdleO1ciIK0S5dmODSvb0tT13HkYo42cgz10keeaHAPzhd5ADvloL4dvyWbjBLfFUdN5hfBVAh9Fan_F19n05RDlVe/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: #bebebe;    width: 55%;    padding: 8px 15px 8px 30px;}
#button-submit {    background: #6A6F75;    border-width: 0px;    padding: 9px 0px;    width: 23%;    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"><input name="q" type="text" size="15" placeholder="Type here..." /><input id="button-submit" type="submit" value="Search" /></form>

2. Stylish ash colour search box for blogger blog.

<style>#searchbox {width: 240px;}#searchbox input { outline: none;}input:focus::-webkit-input-placeholder { color: transparent;}input:focus:-moz-placeholder { color: transparent;}input:focus::-moz-placeholder { color: transparent;}#searchbox input[type="text"] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXEK0Ptm6qjYErg9bmKDn5AJNHqFQ3xQphnxPfbS852o3drMAlJXWdleO1ciIK0S5dmODSvb0tT13HkYo42cgz10keeaHAPzhd5ADvloL4dvyWbjBLfFUdN5hfBVAh9Fan_F19n05RDlVe/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;border: 2px solid #f2f2f2; font: bold 12px Arial,Helvetica,Sans-serif; color: #6A6F75; width: 160px; padding: 14px 17px 12px 30px; -webkit-border-radius: 5px 0px 0px 5px; -moz-border-radius: 5px 0px 0px 5px; border-radius: 5px 0px 0px 5px; text-shadow: 0 2px 3px #fff; -webkit-transition: all 0.7s ease 0s; -moz-transition: all 0.7s ease 0s; -o-transition: all 0.7s ease 0s; transition: all 0.7s ease 0s;}#searchbox input[type="text"]:focus {background: #f7f7f7;border: 2px solid #f7f7f7;width: 200px;padding-left: 10px;}
#button-submit{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpXJXehDfzQTe7f2amESNpPkhAPSL5ealwmsMZ24J3O7nZXcaW2169kc31NDrqnYWIcfHUfGq0QBqL4Oh2Z1A_DQbCC60qOqBnIt_PLBtnPE2tYp58_spOstQ2koxT1e_HshUpeolNcLL0/s1600/slider-arrow-right.png) no-repeat;margin-left: -40px;border-width: 0px;width: 43px;height: 45px;}</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="Enter keywords here..." /><input id="button-submit" type="submit" value=" "/></form>

3. Hover effect ash colour search box for you blog

<style>#searchbox { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGG0pxFd6GcEg4j4zrDqQLM8gggFJnbaAafcT5DgsqqI04zeLmLxWtpmSON0mfdJSLam5XvnHK2lDbaUW7-eJCkFjBGffLjbP3UJLrEPLbFhmYrcMYQ82o9_iopdjg-oqKgZfmG8dym0SZ/s1600/searchbar.png) no-repeat; width: 208px; height: 29px;}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: transparent; margin: 3px 0px 0px 20px; padding: 5px 0px 5px 0px; border-width: 0px; font-family: "Arial Narrow", Arial, sans-serif; font-size: 12px; color: #828282; width: 70%; display: inline-table; vertical-align: top;}#button-submit { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZwhEURFL4A1sI8IRtCPBELc-rMIwgEkqJxlc0_rMfAtwXnoBFqJqkXKZSW_jNtYB-o8_VWx_BqrkJw_AGz0P37YsztfQBSrLTjeQD7QYVZd8XkqrejBbaqKMoi31bYQWXlYvKcKpQhAA-/s1600/magnifier.png) no-repeat; border-width: 0px; cursor: pointer; margin-left: 10px; margin-top: 4px; width: 21px; height: 22px;}#button-submit:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJZWYu_gJE_GolhoiP8nnh7tGqZ7F6ilSNl6A_2P9u-Q23wJOs0GGwUNxP9gOUBkCqM78kmIeJs4Zvskx7_5Sl1sL7jOXu3nSHNMsngiGI2xBKxTZlyeDrdR7gp8HQyDeh_kdX8T0uTTRT/s1600/magnifier-hover.png) no-repeat;}#button-submit:active { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJZWYu_gJE_GolhoiP8nnh7tGqZ7F6ilSNl6A_2P9u-Q23wJOs0GGwUNxP9gOUBkCqM78kmIeJs4Zvskx7_5Sl1sL7jOXu3nSHNMsngiGI2xBKxTZlyeDrdR7gp8HQyDeh_kdX8T0uTTRT/s1600/magnifier-hover.png) no-repeat; outline: none;}#button-submit::-moz-focus-inner { border: 0;}</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"> <input name="q" type="text" size="15" placeholder="search..." /> <input id="button-submit" type="submit" value="" /></form>

4. Hover style black colour search box

<style>#searchbox {    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFOwRHAc-U_TLj2nGqfrcuxeWGm9kyUtnRLeO60bZFiwVim5wQ1s8Cj8JAf9PgnwLJYPl9LHtZz-MoxdzexryiM47_egX1QJBIYg8l_XrKweE-6DYnDxu7C7DWDCrwcUl1WdZ4Jg6Axobg/s1600/search-box.png) no-repeat;    height: 27px;    width: 202px;}
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: transparent;    margin: 0px 0px 0px 12px;    padding: 5px 0px 5px 0px;    border-width: 0px;    font-family: "Arial Narrow", Arial, sans-serif;    font-size: 12px;    font-style: italic;    width: 77%;    color: #828282;    display: inline-table;    vertical-align: top;}
#button-submit {    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgItAt-zHR4BXnWZyRIPR1B9IzJAIHxEXPvXxPUnUMC1bUJ2P37MPK4rNlZ8QWrocuMc3MmDCQbEtgJ1EQnVRMHMjmpXTZHlv009gVgtT8eSasIpQAGiiQJRqJK5c9BERSeCTPtZ0w54L8X/s1600/search-button.png) no-repeat;    border-width: 0px;    cursor: pointer;    width: 30px;    height: 25px;}
#button-submit:hover {    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLBxzB_jKTiF_YLAuJAWTbdClf8QCOLB1_BjwOwgqJ8HZvtOVZBZj-oGhrBmrdtzJa4T6HpOdImyyQY7zv_nnASpORRzEo1oX2K61hyphenhypheng-2uOPe4bz4aRPu079goGlwVF9uVErzluONrb-Q/s1600/search-button-hover.png) no-repeat;}
#button-submit::-moz-focus-inner {    border: 0;}</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="search..." /><input id="button-submit" type="submit" value="" /></form>

5. Crazy pencil art search box for blogger.

<style>#searchbox {    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivZqSR4GQlEyzBjRaexPHjz2Xi_nD7l2uVu1czQcKGdpQTsCH4vcNa-Lm8RAZvb0Y4bCJGOapubRm8RpIf8SnKYPGU7IKAWw0Co9CxGSkpJlB0HR0WLCswTORZcDtq88JgnZBiGyQy0Lzy/s1600/search-box1.png) no-repeat;    width: 250px;    height: 65px;}
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: transparent;    padding: 5px 0px 5px 20px;    margin: 10px 15px 0px 0px;    border-width: 0px;    font-family: "Brush Script MT", cursive;    font-size: 12px;    color: #595959;    width: 65%;    font-weight: bold;    display: inline-table;    vertical-align: top;}
#button-submit {    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0oFu-ZPHqvku5qebusyKKT0Hq_H-7CLjLL6qxYv5wCOq7S_oiwWt7g3L_KZWGjtSkaco6fN6WjOOPk803uDi6x65TXOZv2SBhUZQigY4v0Lrm6CORQ1B5pTGUAvQ9jA_ygxosskkJdOqv/s1600/magnifier.png) no-repeat;    border-width: 0px;    cursor: pointer;    margin-top: 10px;    width: 19px;    height: 25px;}
#button-submit:hover {    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAvLVD2WYSrA-AfE3FwWUdMTQDj-c7FUSuKocjeWn-bU1ST-p1yMy69gxenuv_UReaI0Lf1_1zov0sR1J4vH2hkaXcMCIi-mlFL0TRTm0nJ3_5ry6UEzaZVwKlTe8WIm5XgTM8vgsCk3CP/s1600/magnifier-hover.png) no-repeat;}
#button-submit:active {    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAvLVD2WYSrA-AfE3FwWUdMTQDj-c7FUSuKocjeWn-bU1ST-p1yMy69gxenuv_UReaI0Lf1_1zov0sR1J4vH2hkaXcMCIi-mlFL0TRTm0nJ3_5ry6UEzaZVwKlTe8WIm5XgTM8vgsCk3CP/s1600/magnifier-hover.png) no-repeat;    outline: none;}
#button-submit::-moz-focus-inner {    border: 0;}</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">    <input class="textarea" name="q" type="text" size="15" placeholder="Search here..." />    <input id="button-submit" type="submit" value="" /></form>

6. Awsome black colour search box for blogger

<style>#searchbox {width: 280px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGC5j-4k-gAK_w5zrSXCVd3PpsKPP6nlw-wxFpX5pt2doSdiwpIyqfZvmVbaIR3-ARB2jyjozFxDxes_6NJUvYHxBb5agpAObSUkkYcy9855aQ_Ma7w1FiWSRnA_qAGraF1SjYrkoKWoC1/s1600/search-box.png) no-repeat;}
#searchbox input {    outline: none;}
input:focus::-webkit-input-placeholder {    color: transparent;}
input:focus:-moz-placeholder {    color: transparent;}
input:focus::-moz-placeholder {    color: transparent;}#searchbox input[type="text"] {background: transparent;border: 0px;font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;font-size: 14px;    color: #f2f2f2 !important;    padding: 10px 35px 10px 20px;    width: 220px;}#searchbox input[type="text"]:focus {color: #fff;}
#button-submit{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZnGkHy1UkzAMU-DzZpinKrKzPRY0uKv384uMeWeTvRwyrEWO3XJCELvIRglW4FsG-VopKKbBacBy6O71DJOZedHW8gLyB7UkHvnQ7xGbNaBds9cn4R1WTBEeFu6VGSJrZ9yIFxWDFDf73/s1600/search-icon.png) no-repeat;margin-left: -40px;border-width: 0px;width: 40px;height: 50px;}
#button-submit:hover {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGxcYmCb7ptRx5YvgQKKh3zBfmaiq1YIdnTiYWIjGgh9I7JmFF6RZLNLjnY2DupA5NyaJO1tAohLZWEc-l0lnaFxme_CWfl9xiuZ_J8i0UfxiUk7VT8IpHfSj2jfWY1keESiT28TvCHY0X/s1600/search-icon-hover.png);}</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="Enter keywords here..." /><input id="button-submit" type="submit" value=" "/></form>

Copy any one code and have fun with your search box . Don't forget to like us on FaceBook

Labels: Blogger, Web Devlopment