Kita melihat banyak model menu pencarian dengan berbagai teknik dan trik pembuatannya. Misalnya pada template viomagz buatan Mas Sugeng yang begitu banyak di pergunakan oleh para blogger menu pencariannya adalah menu pencarian dengan ikon kaca pembesar (magnifier glass) namun dengan placeholder layar penuh.
![]() |
| Ikon kaca pembesar yang apabila di klik akan memunculkan kotak pencarian layar penuh |
Untuk melihat "Demo" Jangan lupa klik Run terlebih dahulu agar kolom sebelah kanan menampilkan demo daripada hasilnya. Melalui alat w3school sobat bisa mengedit kode kode yang sudah ada dan menyesuaikannya dengan kebutuhan desain sobat
sendiri.Untuk mengetahui proses membuatnya lihat DEMO
atau klik saja tombol kaca pembesar berikut di bawah ini:
Pada template viomagz buatan Mas Sugeng jika sobat mengklik ikon kaca pembesar pada di ujung navigasi menunya yang gradasi maka akan muncul kotak dialog pencarian "full screen" atau layar penuh. Demikian juga pada menu pencarian buatan saya jika sobat mengklik :
Maka akan muncul kotak dialog layar penuh sebagai berikut pada gambar:
![]() |
| Ketika ikon layar pembesar di klik, maka munculah kotak dialog pencarian full screen atau layar penuh |
Untuk memunculkan ikon kaca pembesar saya memasang link awsome 5 terbaru yang kompatibel dengan HTML 5 di bawah tag <head> kodenya adalah:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
Lihat DEMO
Mirip menu pencarian ini adalah template buatan Mas Sugeng yaitu Viomagz
www.editblogtema.net

