Postingan

Menampilkan postingan dengan label navbar

Cara membuat navigasi sticky untuk blogger

Gambar
Navigasi sticky ini akan selalu tampil pada bagian atas halaman blog meskipun konten maupun homepage (beranda) halaman di scroll naik turun. Dan satu hal lagi ketika Judul ikut bersembunyi di bagian atas karena halaman di scroll (digulir) ke atas, navigasi menu bertahan pada batas tampilan paling atas. Demo: See the Pen NWbbJjL by Sufyan Yaan ( @sufyan-yaan ) on CodePen . Cara penerapan: Masuk ke pengaturan blogger (dasbor blogspot), masuk ke tataletak dan sembunyikan atau kalau tidak ada opsi sembunyikan hapus saja bagian widget header. seperti ini: Dari komputer Anda: Dari web. Tempelkan URL gambar di bawah. Penempatan Di balik judul dan keterangan Selain judul dan keterangan Tempatkan keterangan setelah gambar Susutkan agar sesuai Gambar akan disusutkan selebar 257 piksel. Simpan   Batal   Hapus Lalu sesudah melakukan langkah di atas masuk kembali ke pengaturan blogger, kali ini pilih menu tema, lalu pilih edit HTML. 1. Tambahkan CSS Nah setelah masuk ke dalam halaman editor

2 CARA KEREN MEMASANG NAVBAR MENU PADA TEMPLATE NOTABLE

Gambar
Saya suka Notable, bergaya desain rockpool, template ini dinamis, kencang, aman dan stylish. Tetapi untuk membuatnya tampak beda (stylish) kalian harus berusaha merubah, mengedit dan menambah pada bagian CSS, HTML atau bahkan hingga menambahkan Javascript.  2 model navbar untuk template notable blogger Salah satu cara merombak tampilannya adalah dengan menambahkan navbar custom ke dalam template Notable. Dan jika kalian ingin template tersebut menjadi beda, tampak premium dan lebih bagus performa nya, maka kalian dapat mengikuti langkah langkah berikut: 1. Menambahkan navbar dengan drop down Silahkan pasang template notable ke blogger untuk percobaan kalian, lalu masuk ke bagian pengaturan dasbor blogger. Saya anggap kalian telah menggunakan tampilan dasbor terbaru blogger: Pilih tema Klik menu (tiga titik bersusun) Ketika muncul menu dropdown pilih: Edit HTML Perhatikan gambar: Pada halaman editor HTML blogger cari kode </head> dan letakan saja kode CSS berikut tepat diatasnya:

CARA MEMBUAT HEADER PLUS NAVBAR STICKY PADA BLOGGER

Gambar
Cara yang akan kami saya tunjukan kali ini adalah bagaimana membuat header sekaligus navbar (menu navigasi) untuk blogger. Kalian dapat menerapkannya pada template blogger terbaru seperti contempo. Syaratnya: Hapus atau nonaktifkan header bawaan dan tombol search bawaan contempo melalui pengaturan dasbor blogger. Desain header dan navbar template blogger Saya sendiri lebih memilih menghapus semua elemen elemen yang akan saya ganti dengan elemen baru yang akan saya buat. Fitur fiturnya: Responsif, mobile friendly Memiliki fitur sticky dan fixed sekaligus (Jika halaman di scroll keatas Judul ikut naik, namun navbar akan berhenti dan tetap tampil pada bagian atas blog. Memiliki Header dengan heading h1 (secara struktural bagus untuk blog) Tombol pencarian fullscreen. simple 1. Langkah pertama: Buang fungsi sticky header bawaan blog contempo Dan melalui dasbor blogger pilih pengaturan kembali, pilih theme, dan pilih edit HTML. Pada halaman HTML template contemp

CARA MEMBUAT MENU NAVIGASI BLOG KEREN UNTUK TEMPLATE TERBARU BLOGGER

Gambar
Template terbaru bisa di modifikasi dengan memberikannya tambahan elemen navbar custom yang responsif, mobile dan tentu saja sangat berguna dan tentu saja di samping menambahkan fungsi navigasi dengan dropdown, tampilan tambahan ini akan membuat template menjadi tampak jadi lebih premium. notable template dengan navigasi responsif dan mobile Kalian dapat menerapkannya ke dalam template template terbaru seperti: Contempo Emporio Soho Notable Atau template template default yang lebih tua. Kode kode HTML yang dipergunakan dalam pembuatannya juga terbilang standar yang dapat di terima oleh halaman web HTML. Mari kita mulai: 1. PASANG CSS Login ke Blogger dan pilih template default terbaru. Pilih blog untuk diperbarui. Di menu sebelah kiri, klik Tema. Di samping kanan agak ke atas cari tanda titik tiga, klik Edit HTML. Pada halaman editor HTML blogger yang telah terbuka: Cari kode </head> Dan letakan kode CSS berikut tepat diatasnya: <style> bo

CARA MEMBUAT TOMBOL DROPDOWN MENU TUNGGAL DI BLOGGER

Gambar
single dropdown menu  for blogger (gambar oleh Adelina Sofyan) Membuat menu navigasi atau kustom navbar pada blogger memang berguna sebagai tool navigasi bagi pengunjung dan juga berguna bagi mengoptimalkan kinerja mesin pencari. Ada trik yang dapat kita terapkan jika ingin membuat segalanya tampak minimal, yakni tombol menu dropdown. Baca juga: APA BEDANYA jQUERY DENGAN JavaScript? Asal kalian tahu, dropdown bisa saja berbentuk seperti sebuah menu yang apabila disentuh atau di klik akan menampilkan menu menu yang tersembunyi di baliknya berupa list yang turun kebawah. Cobalah sentuh atau klik tombol merah yang saya buat di bawah ini: Dropdown menu Dengan klik Klik tombol merah di bawah untuk menampilkan menu menu. Dropdown Beranda Halaman Trik Navbar blogger Trik Toggle dark mode Menerapkannya sama dengan tips tips saya sebelumnya. Material dan elemen elemennya di buat menggunakan HTML, CSS dan Javascript. Karena template blogger dib

CARA MENGHAPUS NAVBAR TEMPLATE BAWAAN BLOGGER

Gambar
Sampai hari ini saya tetap gagal faham perihal kegunaan navbar bawaan blogger,  mungkin untuk di modifikasi menjadi menu navigasi, dan ikon Bloggernya itu bertujuan agar "merek" bloggernya tetap eksis, walahu'alam. Akan tetapi kepalang bingung akhirnya saya lebih suka meminimalkan widget widget bawaan blogger, menghilangkannya samasekali agar tidak menjadi "beban" template yang akan saya robah. Ada dua opsi yakni: Menyembunyikannya Menghapusnya Kita diberikan opsi buat menyembunyikannya, tampaknya blogger cukup realistis dalam hal ini bahwa akan banyak pengguna menghilangkan widget ini, jadi itulah sebabnya opsi untuk tidak menampilkannya di masukan kedalam pilihan. Masuk kepengaturan blog>pilih tataletak atau lay out>pilih navbar dan tekan edit>lalu akan keluar tampilan seperti gambar tinggal tekan/pilih opsi "off" Lalu jangan lupa SAVE. Tetapi opsi ini tidak menghilangkan navbar, hanya sekedar menyembunyikannya saja, dan j