Cara Membuat Widget Kotak Pencarian Yang Keren
Didalam blog atau website tak jarang kita menemukan kotak pencarian dalam sebuah blog atau website. beraneka ragam bentuk stylenya bahkan ada juga yang bentuk aneh aneh.. tapi untuk sebuah kotak pencarian kita tidak usah mencari yang aneh-aneh melainkan cukup dengan yang sederhana saja. intinya pengguna dapat melakukan searching di blog kamu saja itu sudah cukup menurut saya sih... haaha ng tau menurut yang lebih bijak... maka dari itulah wahai teman-teman, marilah kita selalu tampil sederhana karena yang sederhana itu sebagian dari iman.. loh kok jadi kayak ceramah nih artikel... hahaah...
oke sesungguhnya saya nulis ini hanya sekedar untuk pengingat buat admin sendiri, soalnya manusia tidak luput dari lupa dan hilaf.. tapi kalau ada teman yang ingin membaca juga silahkan.... monggoo...
Kita mulai....
Pasang Kode CSS terlebih dahulu
Pertama, Login Blogger kemudian pilih
Menu Template lalu pilih
edit HTML. lalu cari kode
]]></b:skin> caranya biar mudah dan cepat pencariannya tekan
Ctrl + F
Kedua, Copy dan pastekan kode dibawah ini tepat diatas
]]></b:skin>
/*Search Box*/
#search-box{position:relative;margin:0 auto;border:1px solid #ccc;padding:5px;border-radius:4px}
#search-form{height:40px;background-color:#fff;overflow:hidden}
#search-text{font-size:14px;color:#ddd;border-width:0;background:transparent;line-height:15px}
#search-box input[type="text"]{width:90%;padding:10px 0 5px 1em;color:#333;outline:none}
#search-button{position:absolute;top:5px;right:5px;height:40px;width:80px;color:#fff;text-align:center;border-width:0;background-color:#1a7db7;cursor:pointer;text-transform:uppercase;border-radius:3px;outline:0}
#search-button:hover{background:#333}
Setelah itu klik
SIMPAN
Setelah itu tambahkan widget di sidebar blog kamu
1. Pastikan kamu sudah ada di dalam blog kamu, lalu pilih “Layout/Tata Letak”
2. Kemudian tambahkan gadget dan pilih HTML/Javascript.
3. Lalu masukkan kode di bawah ini ke kotak Konten
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Cari Artikel Disini ...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button></form></div>
4. Terakhir klik
SIMPAN
Mudahkan bro,,, hehe.... silahkan dicicipi... semoga bermanfaat
