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
Saya lihat demonya keren juga ya, diklik langsung layar lebar. Punya saya terlalu sederhana .
BalasHapusHanya coba coba, tadinya saya bingung mau membuat halaman demo yang tidak mengorbankan kecepatan blog ini. Tapi ya sudah ini risiko blog yang dipenuhi property kode..
BalasHapusiconnya bukan sebuah gambar ya, tapi gunakan font-awesome ya kalo ndak salah.
BalasHapusthanks untuk tutorialnya, saya ndak tau bagaimana jadinya jika difungsikan pada perangkat mobile.
Tepat. Iconnya adalah fa awsome versi 5 jauh lebih ringan daripada gambar. Sangat responsive karena itu sangat kompatibel dengan tampilan mobile
Hapusmantul bang.
Hapus