CARA MEMBUAT KOTAK PENCARIAN FULL SCREEN

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.
yang apabila diklik akan memunculkan kotak pencarian 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:
×
Paling tidak walaupun teknik pembuatannya tidak sama, saya telah menemukan cara untuk membuat tampilannya jadi mirip. Dan tentu saja saya dapat membuatnya menjadi mudah dengan membuat aturan pada lay out blogger nantinya. Namun tutorial ini hanya ditujukan untuk pengatahuan dasar dasar pembuatannya saja.

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:
maka akan muncul kotak dialog layar penuh atau full screen
Ketika ikon layar pembesar di klik, maka munculah kotak dialog pencarian full screen atau layar penuh
Sepertinya sobat lebih baik masuk ke link kotak demo di w3school saya, agar mudah memahami struktur pembuatannya yang terdiri dari css, HTML dan Js.

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

5 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. Saya lihat demonya keren juga ya, diklik langsung layar lebar. Punya saya terlalu sederhana .

    BalasHapus
  2. Hanya 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..

    BalasHapus
  3. iconnya bukan sebuah gambar ya, tapi gunakan font-awesome ya kalo ndak salah.
    thanks untuk tutorialnya, saya ndak tau bagaimana jadinya jika difungsikan pada perangkat mobile.

    BalasHapus
    Balasan
    1. Tepat. Iconnya adalah fa awsome versi 5 jauh lebih ringan daripada gambar. Sangat responsive karena itu sangat kompatibel dengan tampilan mobile

      Hapus
Lebih baru Lebih lama

Formulir Kontak