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.
made by editblogtema
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:
hanya menggunakan elemen HTML dasar
www.editblogtema.net


Comments

Post a Comment

🌐请给我们一个礼貌的评论与任何相关的主题
⚘⚘Kami menghargai semua masukan
👫👫 Namun kami juga menjunjung tinggi kesopanan

Popular Minggu ini:

MEMPERBAIKI ADD NUMBERING DAN ADD BULLETS YANG TIDAK BISA TAMPIL PADA POSTINGAN BLOG

AUTODIDACT, WHY YOU FAIL TO PERFORM IT

INI DIA UKURAN GAMBAR TERBARU YANG IDEAL UNTUK KONTEN BLOG AMP