How to Add Stylish Search Box to Blogger with Pictures

Hello friends, welcome to the Tech4YOU Blogger tutorial today I will show you how to add insert Stylish Search Box to Blogger with pictures.

Today we add The Search Box, it gives profit for visitors, they can easily search any query in the Search Box which relates to the Blogger blog, and I have lots of posts in my Blogger blog then I also need a Search Box to find out my specify posts.

These are the Following Steps:-

Step 1: Go to Blogger Layout and click the Add a Gadget link.

Step 2: Select the Html/JavaScript Link.

Step 3: Paste the code in the Content area then click the Save button.

Step 4: Go to your Blogger Blog.

Top 5 Stylish Search Box widget Code for Blogger blog

Code 1: For this Style copy the code:-

<style>
#searchbox {
    background: #d8d8d8;
    border: 1px ;
    padding: 5px 5px;
    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/AVvXsEhL-oLqzdj4F1P89V0Zhp3UhAd8XJw7SWMbF_shwWH9ewMHFyc0lgdVLG0RNWt_5Rbrih06F18I5Xv6P8xBBRaUrE6Bl7oB5i6xf2hyNmdX44w9dDo1VCmcmPAgmjSMPdQvOgPc5-1DyM5s/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>

Code 2: For this Style copy the code:-

<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/AVvXsEhL-oLqzdj4F1P89V0Zhp3UhAd8XJw7SWMbF_shwWH9ewMHFyc0lgdVLG0RNWt_5Rbrih06F18I5Xv6P8xBBRaUrE6Bl7oB5i6xf2hyNmdX44w9dDo1VCmcmPAgmjSMPdQvOgPc5-1DyM5s/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/AVvXsEgI3rrdBCd5FASAvPWgVYWpCKt-Gcl40R1NR2YyzQ3-oxiNqyTLbn7-OTujy_0sHnwQQtOOOqFbk4n7k7K1D6GabrhXCgb4EPJMR1fBg7BHWsL4tTJiCYgWDMNc41_6_9vR-FTNntis-Ph9/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>

Code 3: For this Style copy the code:-

<style>
#searchbox {
width: 280px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBc9UXFrX1ZGn2BboVI2uCQLdDee4nyGlxg3Q1xDHh1NbSYdKAkzwh3BA13kBki-kc350lJLLflFddE4QzAFxGj-e8_G3kF3aHBaDRtVSPerRK0K6UNYy3uWfsNdGP-yYkti-47-Z3cLsM/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/AVvXsEgrOYNaYYeT8YhPNg35nO4cTF9MCdG8RffozYwGqQ80E2S96TfzfZi4GrMWQ97AKZnWd0-ZGWavULKCnjp75BZeXvAQSCiAFS0XuWvobucpLEWlRNeUF73WlBvqd7TcZck_EYjQNupyGaVN/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/AVvXsEg3LT61xMLG2388IRPCvCqfvjhMz9mlkeuh0RIpuiJV8OHoIQbl0B4J5t8hwkWliy1ajLN3nAloMtTvf9ADrEfLMpSjg_w1iNMC32aQEDiOWtuXhA2kIkEq6ppWfeTYUrr7SCItvHf75FOg/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>

Code 4: For this Style copy the code:-

<div class="flexsearch">
<div class="flexsearch--wrapper">
<form class="flexsearch--form" action="/search" method="get">
<div class="flexsearch--input-wrapper">
<input class="flexsearch--input" type="text" placeholder="search here..." name="q" />
</div>
<input class="flexsearch--submit" type="submit" value="&#10140;"/>
</form>
</div>
</div>
<style>
.flexsearch--wrapper {
height: auto;
width: auto;
max-width: 100%;
overflow: hidden;
background: transparent;
margin: 0;
position: static;
}
.flexsearch--form {
overflow: hidden;
position: relative;
}
.flexsearch--input-wrapper {
padding: 0 60px 0 0; /* Right padding for submit button width */
overflow: hidden;
}
.flexsearch--input {
  width: 100%;
}
.flexsearch--input {
  -webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
  height: 20px;
  padding: 0 46px 0 10px;
border-color: #888;

  border-style: solid;
border-width: 2px;
  margin-top: 2px;
  color: #333;
  font-family: 'Helvetica', sans-serif;
font-size: 20px;
-webkit-appearance: none;
-moz-appearance: none;
}
.flexsearch--submit {
  position: absolute;
right: 0;
top: -10px;
display: block;
width: 60px;
height: 60px;
  padding: 0;
  border: none;
margin-top: 20px; /* margin-top + border-width */
  margin-right: 2px; /* border-width */
background: transparent;
  color: #888;
  font-family: 'Helvetica', sans-serif;
  font-size: 27px;
  line-height: 60px;
}
.flexsearch--input:focus {
  outline: none;
  border-color: #2288bb;
}
.flexsearch--input:focus.flexsearch--submit {
  color: #333;
}
.flexsearch--submit:hover {
  color: #2288bb;
  cursor: pointer;
}
::-webkit-input-placeholder {
color: #888;
}
input:-moz-placeholder {
  color: #888
}
</style>

Code 5: For this Style copy the code:-

<div class="flexsearch">
<div class="flexsearch--wrapper">
<form class="flexsearch--form" action="/search" method="get">
<div class="flexsearch--input-wrapper">
<input class="flexsearch--input" type="text" placeholder="search here..." name="q" />
</div>
<input class="flexsearch--submit" type="submit" value="&#10140;"/>
</form>
</div>
</div>
<style>
.flexsearch--wrapper {
height: auto;
width: auto;
max-width: 100%;
overflow: hidden;
background: transparent;
margin: 0;
position: static;
}
.flexsearch--form {
overflow: hidden;
position: relative;
}
.flexsearch--input-wrapper {
padding: 0 60px 0 0; /* Right padding for submit button width */
overflow: hidden;
}
.flexsearch--input {
  width: 100%;
}
.flexsearch--input {
  -webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
  height: 20px;
  padding: 0 46px 0 10px;
border-color: #888;
  border-radius: 32px; /* (height/2) + border-width */2
  border-style: solid;
border-width: 2px;
  margin-top: 2px;
  color: #333;
  font-family: 'Helvetica', sans-serif;
font-size: 20px;
-webkit-appearance: none;
-moz-appearance: none;
}
.flexsearch--submit {
  position: absolute;
right: 0;
top: -10px;
display: block;
width: 60px;
height: 60px;
  padding: 0;
  border: none;
margin-top: 20px; /* margin-top + border-width */
  margin-right: 2px; /* border-width */
background: transparent;
  color: #888;
  font-family: 'Helvetica', sans-serif;
  font-size: 27px;
  line-height: 60px;
}
.flexsearch--input:focus {
  outline: none;
  border-color: #2288bb;
}
.flexsearch--input:focus.flexsearch--submit {
  color: #333;
}
.flexsearch--submit:hover {
  color: #2288bb;
  cursor: pointer;
}
::-webkit-input-placeholder {
color: #888;
}
input:-moz-placeholder {
  color: #888
}
</style>