CARA MEMBUAT MENU PENCARIAN ALA EDITBLOGTEMA

Disamping tombol menu pencarian bawaan blogspot, banyak terdapat tombol pencarian buatan pihak ketiga edit blogtema juga tidak mau ketinggalan karena terlanjur kadung ingin membuat template dari nol dengan segala komponen dan elemennya hasil buatan sendiri. Baiklah kita langsung saja ke topik.

Tombol pencarian ini saya buat animasi menggunakan kode aba aba CSS, sangat enteng dan berguna untuk meringankan beban loading halaman blogspot. Untuk memasangnya sobat perlu masuk ke pengaturan blogspot:

Langkah pertama: masukan kode CSS

1. Masuk kepengaturan blogspot
2. Pilih Tema
3. Pilih Edit HTML

Pada halaman editor HTML blogspot cari kode </head> dan setelah ketemu copy kode dibawah ini lalu pastekan tepat diatasnya.

<style>
input[type=text] {
width: 100%;
box-sizing: border-box;
border: 3px double transparent;
border-radius: 30px;
font-size: 22px;
background-color: transparent;

background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
</style>

SAVE tema terlebih dahulu.

Langkah kedua tambahkan gadget JavaScript/HTML

1. Masuk kepengaturan blogger
2. Pilih TataLetak
3. Tambahkan Gagdet
4. Pilih JavaScript/HTML

Lalu tambahkan kode berikut (copy dan Pastekan) kedalam kotak blanko kosong gadget JavaScript>HTML tadi:

<center><div id='bponavid'> <form action='/search' id='searchthis' method='get' style='display:inline;'></form>
<div id='bponavid'> <form action='/search' id='searchthis' method='get' style='display:inline;'><input id='search-box' name='q' size='25' type='text' placeholder='cari......🔍'/></form> 

</div></div></center>

Save dan geser posisi gagdet keatas bagian post tema.

Menu yang saya buat murni elemen HTML CSS, tidak memberatkan loading, telah di uji malalui GMetrix dan PageSpeed:

www.editblogtema.net