Cara Membuat Kotak Pencarian di Blog
Search box atau sering disebut dengan kotak pencarian blog merupakan salah satu cara mempermudah pengunjung untuk melihat dan mencari informasi yang dicari.
Search box tidak hanya berfungsi untuk mempermudah pencarian aja sobat, dengan adanya kotak pencarian ini adalah bisa juga untuk memper complete kan tampilan blog, karena tidak ada blog ataupun website yang tidak menggunakan search box ini.
Jadii sobat, tidak usah berlama lama, admin akan menguraikan dan menjelaskan perlahan apa saja yang harus dilakukan untuk membuatnya.
Untuk penempatan searhboxnya, sobat tidak usah bingung, search box yang admin bagikan sudah responsive, jadi sobat dengan bebas ingin memasang di header, sidebar, dan dimanapun. Tapii jangan taruh di bagian footer yah, karena menyulitkan pengunjung.
Cara Membuat Search box
2. Lihat ke >Tema > Edit HTML
3. Cari kode ]]></b:skin>, Lalu Letakkan Kode dibawah ini tepat diatas Kode Tersebut
4. Simpan Tema
/* Search box by Chaya Education */
#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:#05b2c4;cursor:pointer;text-transform:uppercase;border-radius:3px;outline:0}#search-button:hover{background:#333}
5. Kembali ke Tata Letak > Tambahkan Gadget > HTML/Javascript Atau sobat bisa meletakkan dimanapun sobat mau.
6. Lalu, Masukkan HTML dibawah ini
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Kotak Pencarian Responsive ...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button></form></div>
Komentar
Posting Komentar