Pembuatan Search Box Via Html Editor Pada Blog

Apakah kalian sudah mengganti theme blogger kalian? Jika kalian sudah menggantinya, apa theme tersebut sudah sesuai dengan keinginan kalian ? Perlu kalian ketahui, sejauh pengalaman saya didunia blogging ada banyak template atau theme keren untuk kita pasang di blogger yang kita miliki, namun tampilan kerennya tersebut masih belum bisa menopang kebutuhan para pengunjung blog kita, seperti Tidak fast loading, tidak responsive, tidak seo friendly atau bahkan tidak terdapatnya search box.

Pada artikel kali ini, saya akan sedikit menjelaskan bagaimana cara mengatasi dan membuat kotak pencarain (search box) keren untuk blogger. Untuk lebih jelasnya silahkan kalian pahami penjelasan dibawah ini :

1. Pertama silahkan kalian masuk ke akun blogger kalian dan pilih menu theme atau tema , kemudian pilih tombol edit HTML.

2. Setelah berada dihalaman edit html silahkan kalian cari kode ]]></b:skin> dengan cara menekan tombol Ctrl + F kemudian ketikan perintah ]]></b:skin> lalu tekan enter .

3. Setelah kalian menemukan kode  ]]></b:skin>, letakan kode dibawah ini tepat diatas kode tersebut .

/*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}

4. Setelah itu, simpan theme kalian dengan cara klik tombol Simpan Tema .

5. Langkah terakhir silahkan kalian masuk ke menu Tata Letak, kemudian tambahkan gadget dan pilih menu Html/Javascript, dan salin kode dibawah ini

<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>

6. Setelah itu silahkan kalian tekan tombol simpan .

7. Dan terakhir lihat perubahan pada blog kalian.

8. Selesai, semoga bermanfaat untuk kalian semuanya.