Memasang Widget Search Box di Blog

Oleh Unknown

Rabu, 11 Juni 2014

Bagikan :

Tweet

Memasang Widget Search Box di Blog - Search box atau kotak pencarian ini adalah salah satu widget yang dibutuhkan untuk blog kita. Dengan search box, pengunjung akan mudah mencari artikel yang sedang mereka butuhkan di dalam blog kita. Jadi, fungsi search box ini terbilang penting sebagai salah satu fasilitas untuk pengunjung.

DEMO

Cara memasangnya, silahkan ikuti langkah-langkah berikut.

Simpan CSS di bawah ini di atas ]]></b:skin> atau </style>

.search-form input{width:198px;height:35px;line-height:35px;padding:0 12px;float:left;font:normal 12px Arial,sans-serif;border:1px solid #ddd;background:#fff;}
.search-form input:focus{outline:0;background:#fff;border:1px solid #C62C2C}
.search-form button{overflow:visible;float:left;border:1px solid #ddd;
padding:0;cursor:pointer;height:35px;width:72px;color:#fff;font:12px Arial;text-shadow:none;text-transform: uppercase;background:#C62C2C;}
.search-form button:hover{color:#fff;text-shadow:none;background:#9E3232;transition:0.5s;border:1px solid #ddd;}

Lalu, simpan HTML-nya di mana anda ingin menampilkannya. Anda juga bisa meletakkannya di widget tata letak blog anda yang mungkin menurut anda merasa lebih mudah. Kode HTML-nya adalah berikut ini.

<div style='float:right'>
<form action='/search' class='search-form'>
<input id='a' name='q' placeholder='Cari artikel di sini...' type='text'/>
<button title='Search' type='submit'>SEARCH</button>
</form>
</div>

Jika anda meletakkan di tata letak, hapus kode <div style='float:right> dan tag penutupnya </div>. Tapi, jika anda meletakkannya di Edit HTML, anda bisa mengubah float:right sesuai keinginan, agar letaknya bisa pas. Anda juga bisa menambahkan margin pada barisan float:right di atas.

Jika semuanya sudah, silahkan simpan.

Baca juga : Membuat Widget Search Box Mirip Seperti Google

Tag : Blogging