Cara Memasang Kotak Pencarian Blog Keren

Baca Juga

Kotak Pencarian (Search Box) merupakan salah satu elemen atau widget yang wajib dipasang di blog.

Fungsinya untuk mencari postingan yang diperlukan pengunjung. Bahkan, kita sebagai admin blog, juga membutuhkannya, misalnya untuk mencari tulisan yang akan dijadikan intenal link.

Berikut ini koleksi kode kotak pencarian blog keren. Tombolnya merah, berani! Simple tapi artistik. Ini penampakannya.

Cara Memasang Kotak Pencarian Blog

Kotak pencarian (search box) ini untuk dipasang di sidebar. Cara pasangnya:

1. Layout > Add a Gadget > HTLM/Javascript
2. Copas kode berikut ini:

<style>
.search-wrapper {
width: 100%;max-width:300px;
margin:10px 0;
box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);}
.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;}
.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 {
    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 {
    border: 0;
    padding: 0;}
</style>
<form action='/search' class='search-wrapper cf'>
<input method='get' name='q' placeholder='Search here...' required='' type='text'/>
<button type='submit'>Search</button>
</form>

3. Save!

Beres! Kotak Pencarian Keren sudah terpasang di sidebar blog Anda.

Jika ingin alternatif jenis kotak pencarian lainnya, ini dia pilihan lainnya.

Cara Pasangnya

1. Layout > Add A Gadget > pilih JavaScript/HTML
2. Copy + Paste kode berikut ini di dalamnya. 

Untuk pilihan warna, ganti kode warna merah dengan kode-kode yang ada dalam ilustrasi gambar. Lihat: Kode warna HTML lainnya.

<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 here...' type='text'/> <button id='search-button' type='submit'><span>Search</span></button> </form> </div>

Sumber