ads here
My photo
sofyan Ya-an
Batam, Kepri, Indonesia
nothing special, I am just an ordinary

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

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

 www.editblogtema.net


Comments

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

    ReplyDelete
  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..

    ReplyDelete
  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.

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

      Delete

Post a Comment

请给我们一个礼貌的评论与任何相关的主题
Just give us a polite comments with any related topics
Hanya komentar yang sopan dan berhubungan dengan topik