9 Gaya Kotak Pencarian Blogger dan Cara Memasangnya

Baca Juga

Jenis-Jenis Kotak Pencarian (Search Box) Keren Simple Responsive untuk Blogger dan Cara Memasangnya.

KOTAK Pencarian (Search Box) merupakan elemen atau widget penting dalam sebuah blog.

Menurut pakar web usability, kotak pencarian wajib dipasang di situs web atau blog. "Kotak pencarian harus mudah dilihat dan sederhana," kata NN Group.

Fungsi kotak pencarian adalah memudahkan pengunjung mencari informasi atau tulisan di blog sekaligus untuk meningkatkan pageviews.

Kotak pencarian juga sangat berguna untuk kita sebagai admin ketika akan membangun tautan internal (internal link building) sebagai salah satu elemen seo blog.

CB sudah beberapa kali share kode searching box yang dipasang di sidebar blog ini. Berikut CB kompilasikan untuk memudahkan pembuatan kotak pencarian yang sesuai dengan tema blog.

Kotak pencarian simple responsive nan keren pertama adalah yang CB pasang di sidebar blog.

9 Gaya Kotak Pencarian (Search Box) untuk Blogger dan Cara Memasangnya

Berikut ini jenis-jenis kotak pencarian untuk dipasang di sidebar blog. Cara memasangnya sangat mudah:

1. Layout > Add a Gadget > pilih HTML/JavaScript
2. Judul widget kosongkan
3. Copas salah satu kode kotak pencarian simple responsive di bawah ini.
4. Save!

1. Kota Pencarian Simple Responsive

<style>
.serching{margin:-20px 0 5px 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:#48d;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'/></form></div>

2. Kotak Pencarian Simple Artistik

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

.cf:after{
    clear:both;
}

.cf{
    zoom:1;
}  

 /* Form wrapper styling */
.search-wrapper {
width: 288px;
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: 190px;
height: 20px;
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>

3. Kotak Pencarian Mirip Yahoo

<style>
#search-box {
position: relative;
width: 100%;
margin: -15px 0px -20px 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 here...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>

4.  Plus Media Sosial

Kode dan Cara Pasangnya

5. Search Box Plus Background Gray

<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/AVvXsEjOUyw_tnv_ioSEJGrnE2PS0mmP9quBLq-UuTQizzgx5S1m_HlNmelF_esBOHDjB7eOnvUPYgeN3FvQV_adGAXbM0T2wH0BiQ6LaQQrj0JAme4xxLwxudMeTWdusOOJVjZ8bfqKMAZHCfPb/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>

6. Kotak Search Blog Hover

<style>
#searchbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZXOnaef2q4vqx1cLSWonMhCu5BmfFSnJ3T1inuFkMtxHP8YTcINAFC_umQ2or7umyWah-T7RDzhettdIVWlwqHrq5TkfRsoEj4US-KLUnIpipMq7HY6LlqI1onanPgw4WD2JIqoRVNr8s/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/AVvXsEjMSysnnIBenUDs7RCyxuprZ_8NsHaa0LWvY-w6VZ4VwGxO0MZBoILN7jlzENdy5xWUC1219QK3GtpH4358ADRrRTSMbWZKVgbuxa_R7Z-nMEeoqymGXSo8uhQ2bKYaT1Oi_qezsSyJTn2o/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/AVvXsEgdgRiwfyQeN0s7MDJkU30MEQYfuz9vA2cx7RTmCVsnIMTFlxq8_CLiWdKDb9GK8oKab9AZRpVJDiBQn2jna3FWs0lk1Q7tVct8A171jUaBWRTCCG5CD83mY82e-TVkAQFUbsBDTKG1lDH5/s1600/magnifier-hover.png) no-repeat;
}

#button-submit:active {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdgRiwfyQeN0s7MDJkU30MEQYfuz9vA2cx7RTmCVsnIMTFlxq8_CLiWdKDb9GK8oKab9AZRpVJDiBQn2jna3FWs0lk1Q7tVct8A171jUaBWRTCCG5CD83mY82e-TVkAQFUbsBDTKG1lDH5/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>

7.  Search Box Hitam

<style>
#searchbox {
width: 280px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS5s5DOuH3OYqFx5kZvWHjute8-tJvtURqh4WTZBG0T0X0C_wDGu_0BINTlT3SgSQfVIY6TKJ9ArZ4E3JF9jfoJVcRQLU44n0pXKJXihw1adLRHhpSgXvl9iGdyoIckk8bY9Mx1-BEvHAy/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/AVvXsEhhIWaSWI1yDDqP7rpbhchmUvnK6Fl28_udxx2f1NmTTO3xfp1PyBd9Nk_4Fws9ebOPlGfKuwRUipK0laki4MwSpAQbgE9akhN3wWzFdLwtGtpI5pklMHnTnZ0wbTKsY0iH3cYegeGSxCfk/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/AVvXsEi1-8yl69jxj0LalVtwNhsqpoOEWXeXu1R_6LTCT1VM7NR0vKTtthTvY_3pmt0LqsMS_Bwq6nwfHOtJ941KsTTAPehPrb5fDh_inPu8ehD2nuZL_7FL0YGzNuyzawdT_8hixaXJ8f7eodq5/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>

8. Kotak Pencarian Panah

<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/AVvXsEjOUyw_tnv_ioSEJGrnE2PS0mmP9quBLq-UuTQizzgx5S1m_HlNmelF_esBOHDjB7eOnvUPYgeN3FvQV_adGAXbM0T2wH0BiQ6LaQQrj0JAme4xxLwxudMeTWdusOOJVjZ8bfqKMAZHCfPb/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/AVvXsEjaG5UgUOLl7aB0iLFtDRDqrh20VHjA3XL48KP8XXrA4bhM0zYg6YOYwYv4-91MurrH75ZpFq3zjgE0v8j9sHlf05fER5R3hRRddopk3vIj5VKGWEHPbKCGS1DxNqzQJht24y24Q3pON5Tz/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>

9. Kotak Pencarian Grafiti

<style type="text/css">#blr_torn_page_search {   background:rgba(0,0,0,0) url('http://2.bp.blogspot.com/-WOtFhkqSuwM/Un9kXYdUhGI/AAAAAAAAC5k/P2F5OeupizU/s1600/torn_page_image.png') scroll 50% 50% no-repeat;   width:340px;   height:58px;   display:block;}#blr_torn_page_search_box {   display:block;   padding:14px;   margin:0;}#blr_torn_page_search_input {   padding:6px;   margin:0;   width:266px;   font-size:14px;   vertical-align:top;   border:none;   outline:none;   background:rgba(0,0,0,0);}#blr_torn_page_search_submit {   margin:0;   padding:0;   height:25px;   width:25px;   vertical-align:top;   border:none;   outline:none;   background:rgba(0,0,0,0);}</style>

<div id="blr_torn_page_search">    <form expr:action="/search" method="get" id="blr_torn_page_search_box">        <input type="text" name="q" placeholder="Search this site..." id="blr_torn_page_search_input" />        <input type="image" id="blr_torn_page_search_submit" src="http://3.bp.blogspot.com/-voC7glqqSVQ/Un9kVT6yQTI/AAAAAAAAC48/vG6cGwnI1WE/s1600/blank.gif" />    </form></div>

Demikian koleksi Jenis-Jenis Kotak Pencarian (Search Box) Blogger dan Cara Memasangnya. Good Luck and Happy Blogging! (http://www.contohblog.com).*