Postingan

Menampilkan postingan dengan label hamburger menu

Cara membuat menu hamburger template Blogger terbaru

Gambar
Cara ini akan membuat halaman blog tampil unik, sederhana dan minimalis. Sebabnya tampilannya akan beradaptasi (adaptif dan responsif) dengan segala ukuran layar perangkat, mau itu laptop, tablet, maupun hape. Pada laptop dan tablet (ketika posisi landscape) tampilan menu akan tampak horizontal di atas halaman, sedangkan pada layar genggam ukuran hape tampilan menu berubah menjadi buka dan tutup hamburger menu yang intuitif ( beranimasi ). Navbar ini dapat di terapkan ke template terbaru seperti contempo, essensial dan varian lainnya dengan sedikit trik. Baiklah sekarang kita cobaan ke template essensial dan Contempo karena dua template ini strukturnya sangat mirip alias identik. Masuk ke pengaturan atau dasbor blog cari menu theme atau tema Pilih edit HTML 1. CSS Setelah masuk ke halaman editor HTML template blogger, cari kode </head> letakkan kode CSS berikut di atas kode tadi:     <style> .nav {     width: 100%;     height: 65px;     position: fixed;     line-height: 65p

Cara membuat hamburger menu dengan toggle buka dan tutup murni CSS

Gambar
Model model desain template web tidak dapat ditinggalkan begitu saja. Selama dakade tentunya para desainer telah bekerja keras untuk membuat tampilan dan antarmuka halaman web yang dapat di pergunakan dengan sama baiknya di berbagai ukuran layar perangkat. Sehingga muncul istilah desain responsif dan desain adaptif. Keduanya merujuk pada penggunaan halaman di layar desktop dan mobile. Bisa di pergunakan di layar dengan ukuran besar seperti PC desktop dan laptop, bisa di akses dengan mudah dan nyaman melalui layar tablet dan hape. Baca:  Sekilas mengenal desain web responsif versus desain web adaptif Contoh menu yang responsif adalah ketika ia dibuka pada beberapa layar berbeda: Pada PC desktop, laptop, tablet dan hape mobile. Pada PC layar besar menu tersebut tampak horisontal, sedangkan pada layar kecil seperti hape ia menjadi berbentuk menu hamburger yang dapat di klik untuk memunculkan menu menu.  Sedangkan pada desain adaptif menu akan terlihat sama baik pada saat di buka melalui l

CARA MEMBUAT HAMBURGER MENU YANG BENAR UNTUK TEMPLATE BLOGGER MODERN

Gambar
Menu klasik (baca desain menu navigasi blog lama) adalah menu yang tampil di header dalam bentuk inline, horisontal hingga dropdown - dan sebagian disembunyikan hanya pada tampilan mobile. Namun oleh karena trend bahasa web yakni CSS yang semakin maju, hingga memungkinkan untuk membuat menu halaman web kemudian di buat minimalis, dan minimalis menjadi SEO. Tanpa javascript! Banyak alasan mengapa halaman web modern tampak lebih minimalis antarmukanya tapi ini bukanlah pendapat seseorang, akan tetapi melihat kepada trend dari evolusi kemunculan halaman halaman webblog personal dengan tampilan minimalis namun dengan fitur yang lengkap. Juga karena makin kesininya CSS ternyata menjadi semakin powerful. Menu template zaman sekarang sangat minimalis kebanyakan hanya menampilkan sebua tombol namun jangan salah, satu tombol berisikan menu yang sangat lengkap! Dan tombol yang paling populer adalah: Menu Hamburger! 1. Apakah menu hamburger itu? Menu hamburger adalah ikon menu tiga garis berlapis

TRIK CSS MEMBUAT TOMBOL MENU NAVBAR BLOGGER YANG UNIK

Gambar
Tombol Menu yang akan kami kemukakan ini bawaannya cukup smooth atau halus, di anyam menggunakan teknik CSS yang cocok untuk platform blogger, beberapa halaman mulai menggunakan desain dan antar muka yang berbeda dari waktu ke waktu.  Ada halaman yang tampak menarik dengan desain tidak lazim, namun setelah di akses ternyata memberikan pengalaman yang berbeda bagi pengguna.    Apa manfaatnya...? Disni letak peranan teknik UX (user experience) dalam seni desain. Bagi  kebanyakan orang umum, menu untuk membuka navigasi halaman adalah dalam bentuk hamburger, namun pada perkembangan zaman terkadang terdapat hal hal baru yang lebih menarik, yang lebih 'eye-catching' dan tampilan menu pada header ini dapat membuat seluruh tampilan halaman web menjadi beda. Pikirkan kembali siapa juga yang mau melhat 'keindahan sidebar, keindahan related post pada pandangan pertama? Fokus pembaca akan tertuju pada bagian atas header. Karena disana ada judul, ada bar menu dan ada banyak hal hal yang

MENU HAMBURGER DARIMANA ITU BERASAL?

Gambar
Mengapa ia demikian sangat populer kini? Kita tidak bahas makanan ya, setidaknya blog ini tidak memiliki niche kuliner, jadi tidak ada hubungan sama dengan toko penjual Hamburger yang lezat. Kita sedang membicarakan aplikasi. Saya menulis ini karena setiap sesuatu memiliki kisah mereka masing masing yang mungkin ingin kalian ketahui. Sejarah. Di desain oleh Norm Cook untuk pertama kali pada tahun 1981, dia ini seorang pemimpin bagian desain grafis di perusahaan Xerox Star, pencetus komputer personal pertama di dunia. Desain tiga garis ini sangat simpel akan tetapi pada waktu itu teknologi perangkat hanya support 16x16 piksel jadi sangat buram. Maka itu dibuat tiga garis agak tebal biar terlihat jelas. Dan tiga garis ini yang paling 'real deal'. Akhirnya dipergunakan hingga kini. Seiring waktu penggunaan seluler yang minim lebar layar ternyata membutuhkan hamburger menu guna menampilkan menu menu konten, misalnya situs Twitter dan Apple termasuk situs besar pertama yang mengguna