7 Kode Kotak Pencarian (Search Box) Keren Sidebar Blogger - Blogger Bandung

7 Kode Kotak Pencarian (Search Box) Keren Sidebar Blogger dan Cara Memasangnya.

Kotak Pencarian (Search Box) merupakan elemen penting yang harus dipasang di blog.

Selain menjadikan blog ramah pengguna (user friendly) karena memudahkan pengunjung mencari info yang dibutuhkan, kotak pencarian juga bisa meningkatkan page views.

Form pencarian konten blog ini juga bagian dari navigasi yang dianjurkan Google. Kotak pencarian harus simple dan visible atau mudah dilihat.

Blogger sudah menyediakan widget search. Kita tinggal klik Add a Gadget di sidebar blog, lalu pilih seach box.

Namun, widget kotak pencarian bawaan Blogger terlalu sederhana sehingga kurang menarik dari sisi desain.

Banyak kode kotak pencarian blogger yang mudah ditemukan di Google yang dibagikan para pakar kode CSS dan HTML.

Cara Memasang Kotak Pencarian (Search Box)

1. Di dashboard blog, klik "Layout" > Add a Gadget > pilih "HTML/Javascript"

2. Copas salah satu kode di bawah ini.
3. Save!

7 Kode Kotak Pencarian (Search Box) Keren di Sidebar Blogger

Berikut ini 7 kode kotak pencarian terbaik menurut admin Blogger Bandung.

KODE1

<style>
.cf:before, .cf:after{
    content:"";
    display:table;
}

.cf:after{
    clear:both;
}

.cf{
    zoom:1;
}  

 /* Form wrapper styling */
.search-wrapper {
width:100%;
margin:10px 0;
box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
}

/* Form text input */

.search-wrapper input {
width: 222px;
height: 40px;
padding: 10px;
float: left;
font: bold 14px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
background: #EEE;
border-radius: 3px 0 0 3px;
}

.search-wrapper input:focus {
    outline: 0;
    background: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}

.search-wrapper input::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
   font-style: italic;
}

.search-wrapper input:-moz-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}

.search-wrapper input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}  

/* Form submit button */
.search-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 78px;
font: bold 14px/35px 'lucida sans', 'trebuchet MS', 'Tahoma';
color: white;
text-transform: uppercase;
background: #D83C3C;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
}
 
.search-wrapper button:hover{  
    background: #e54040;
}
 
.search-wrapper button:active,
.search-wrapper button:focus{
    background: #c42f2f;
    outline: 0;
}

.search-wrapper button:before { /* left arrow */
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #d83c3c transparent;
    top: 12px;
    left: -6px;
}

.search-wrapper button:hover:before{
    border-right-color: #e54040;
}

.search-wrapper button:focus:before,
.search-wrapper button:active:before{
        border-right-color: #c42f2f;
}    

.search-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
    border: 0;
    padding: 0;
}  
</style>
<form action="/search" class="search-wrapper cf">
        <input type="text" method="get" name="q" placeholder="Search here..." required="" />
        <button type="submit">Search</button>
    </form>

KODE2

<style>
.serching{margin:0;width:100%;}.serching form{border:1px solid #ddd;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:14px}.serching form input{display:block!important;margin:0;border:0;padding:5px 0;outline:0;height:20px;line-height:20px;font-size:13px;border-radius:0!important}.serch{float:left;width:85%!important;text-indent:10px}.serchg{float:right;width:15%!important;height:30px!important;padding:0!important;background:gray;color:#fff;border:0!important;font-size:12px!important}
</style>
<div class='serching'><form action='/search?q='><input class='serch' name='q' placeholder='Cari...' title='Cari Tulisan di Sini' type='text'/><button class='serchg' type='submit'> GO </button><span style='clear: both;display:block'/></span></form></div>

KODE3

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/AVvXsEjVwtWo2WeZxBnzKKX8jQQFaVgStNJiHiZnusFkEDIuVRdiLycYeYfvjbPWQXg8pVkeAAax0e81r3PRVLOQRRiF-JEflEkzSwBdjcb3gzVouyLJaIOtZpSL7qoI72dzGlj7C8HrcahnkRxA/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>

KODE4

<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>
<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/AVvXsEjVwtWo2WeZxBnzKKX8jQQFaVgStNJiHiZnusFkEDIuVRdiLycYeYfvjbPWQXg8pVkeAAax0e81r3PRVLOQRRiF-JEflEkzSwBdjcb3gzVouyLJaIOtZpSL7qoI72dzGlj7C8HrcahnkRxA/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/AVvXsEgjN27Vh7GndpSp9WvUXVjWVhFpH07yuCggiyi-yNBBrnbVfBtrBz5YTGpAuYXGkf747onrVpGAs3Jkud4uJDtsV1nQr6na0F45kGC7qufktj2jG1c8jRMR7cSssSQJttkzHdspBnxB-a2G/s1600/slider-arrow-right.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 43px;
height: 45px;
}
</style>

KODE5

<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>
<style>
#searchbox {
width: 280px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3tq_HSjyH9ZYFRqzZjvHcy7aYHt8zuv3TLRdiqBGm6P8JPqNbegphqN7XI5MKFF-wOxmljV5dnP2hLVoz61F-Pi_IV5mqkENzDaL0jr6Bpx859YIriTqX6Tw68ortUFQqbA25SEGlm1Sg/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/AVvXsEhuZ8-g2hgRKjeBqFFFijBQL8cRm3fyLHuknYrCxmuKtUx_zPbYKpX7Z3xNyC_wfkKO5v5tNqkqASJ2cYHyRY7FD4KUi11DRsYc81hw94T_ZtCxXOmsRhdBVKYHRwEX_vOfQFGttggjAwmv/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/AVvXsEjqE8pQpJjTpi22W4WfNZwmrMC7yG6lltrfbNEjKk-1zermQCfnI-HkeRDwkhY6OQbJPKOUT8roxasK0mssdxY0WINbPssxNUsZQZGZ86hisaLQ5YGtIkdEM9-U9jilll8wAaxmj3Lo_zfD/s1600/search-icon-hover.png);
}
</style>

KODE6

<style>
#search-box {
position: relative;
width: 100%;
margin: 0;
}
#search-form
{
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}
#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}
#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #4d90fe;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>

KODE7

<style>
#search-box {
position: relative;
width: 100%;
margin: 0;
}
#search-form
{
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}
#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}
#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #db4437;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search Customize Blogging' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>

Kotak Pencarian Simple

KODE

<style> 

#search { 
border: 1px solid #BDBDBD; 
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOA9JWsaT8hif6ibvllr7UYApJHoYbzTJoggmlKMZIzn0pFTuA_SUGxxjdAqaY8yZPF6mZnTo-uJjgkyXmehrkVpTf5oOypoWHCsNd8u9SBP-QDXOqzFpXC3_K39jPIph2TdHNLU1Qciix/h120/search3.png) 98% 50% no-repeat; 
text-align: left; 
padding: 8px 24px 6px 6px; 
width: 85%; 
height: 18px; mouse:pointer: 
} 
#search #s { 
background: none; 
color: #BDBDBD; 
font-family: verdana; 

font-size: 11px; 
border: 0; 
width: 100%; 
padding: 0; 
margin: 0; 
outline: none; 
} 

</style>
<div id="search" title="Tulis lalu tekan Enter">
<form action="/search" id="searchform" method="get"> <input id="s"
name="q" onblur='if (this.value == "") {this.value = "Search";}'
onfocus='if (this.value == "Search") {this.value = "";}' value="Search"
type="text"> </form>
</div>