EDITBLOGTEMA

S ebenarnya dengan atau tanpa menu navigasi sebuah halaman blog akan berjalan normal dan baik baik saja. Akan tetapi menu navigasi telah diangap secara signifikan dapat membantu menavigasi pengunjung untuk dengan lebih mudah menemukan dan mengeksplorasi konten konten penting yang ingin kita tonjolkan.  Dan tentu saja sedikit banyaknya akan menambah nilai bagus bagi halaman yang menggunakannya, terutama sebuah halaman blog yang sudah besar, kompleks dan memiliki lebih banyak konten konten berguna.  Salah satu menu navigasi yang dapat Anda buat adalah menu navigasi yang dapat diterapkan ke dalam template blog berikut ini. Kelebihan menu navbar kustom ini: Tampak premium dan minimalis Responsif dan sudah barang tentu mobile friendly Memiliki dropdown sehingga dapat menambahkan daftar menu tanpa baras Sumber Kodenya adalah sebagai berikut: See the Pen poEYWdj by Sufyan Yaan ( @sufyan-yaan ) on CodePen . Cara menerapkannya ke dalam template: 1 . Klik tombol HTML di dalam kolom code

T rend desain web mulai tahun 2020 ke 2021 sudah pasti bergeser dari tahun tahun sebelumnya, berubah dan penuh dengan penampakan baru. Mereka bilang sih dinamika dunia website. Banyak blogger baru misalnya meninggalkan halaman dengan penampakan sidebar, meninggalkan cara menu navigasi dengan dropdown, lalu mengikuti syle halaman muka (homepage) bergaya grid masonry dll. Klik Link ini untuk mengikuti tautan   Ada trend membuat halaman tampak acak dan tidak teratur, ada trend menyederhanakan tampilan halaman dengan gaya minimalis namun memukau karena pada saat menu yang hanya satu satunya di buka ternyata memberikan panduan super lengkap. Saya ingin berbagi membuat menu blog sederhana dengan mengklik menu hamburger untuk menampilkan menu menu di bilah samping halaman awal dan halaman konten blog. Contoh tampilannya: See the Pen zYKyEGd by sufyan ( @sufyan33 ) on CodePen . Klik Menu hamburger warna hijau (green) di atas untuk melihat menu yang saya sembunyikan di sidebar da

Pada saat kita melakukan pencarian dengan cara mengetikan kata kunci atau judul sebuah artikel pada kotak pencarian di halaman sebuah blog dan menekan enter, maka yang muncul adalah artikel artikel yang memiliki persamaan, namun diatas judul artikel atau dibawah header akan muncul notifikasi: "Showing Posts With Label in Blogger" Atau "Menampilkan semua posting berdasarkan label" Begitu juga jika kita mengklik tombol navigasi, misalnya klik teknologi. Notifikasi serupa akan muncul di atas beberapa hasil pencarian yang serupa. Cara yang saya share ini juga berlaku untuk templat bawaan blogspot yang lebih tua. Sebenarnya ini berguna sebagai penjelasan bahwa kita sedang dalam opsi pencarian dan di tampilkan menurut label, sesuai dengan susunan elemen di dalam template. Masuk kepengaturan blogspot>>pilih tema>>pilih Edit HTML setelah halaman editor HTML terbuka, cari kode berikut: <div class='post-filter-message'> Bersama kode diata

gambar megamenu Saran: terapkan ke template bawaan blogger simple atau awsome yang sudah di modifikasi menjadi responsive dan mobile friendly. Walaupun bisa diterapkan tanpa di modifikasi namun tampilannya di hape tidak mobile friendly nantinya kami akan menyediakan template template bawaan yang sudah di modifikasi secara gratis namun minus navigasi menu demi untuk pembelajaran. Mega menu ini dapat diterapkan dengan mudah ke dalam template template default/bawaan blogger seperti Tema awsome, perjalanan dan sederhana. Akan tetapi dengan catatan ia hanya bekerja apabila blog bersifat terbuka secara umum basis kerjanya adalah JQuery library dan Json feed API, ia hanya akan bekerja layaknya menu navigasi drop down biasa jika JavaScript di non aktifkan. Langkah pertama: buat HTML 1. Pengaturan>Theme/Template 2. Pilih EditHTML 3. Tekan ctrl+f>pada kotak pencarian ketikan: <div class='main-outer'> 4. Masukka kode beriku

Kali ini saya akan mencoba menjelaskan bagaimana caranya membuat menu navigasi yang apabila konten blog di scroll keatas pada saat membacanya maka navigas bar menu akan berubah ukuran mengecil, sedangkan jika konten di scroll kebawah menu akan membesar. Yang kerennya nama Blog atau Judul utama blog kita akan ikut membesar dan mengecil. Sub menu sendiri apabila dibuka melalui laptop atau layar yang lebih besar akan tertumpu pada ujung kanan navigasi menu dalam bentuk formasi horisontal. Sedangkan pada tampilan mobile jadi vertikal. Trik ini dapat di terapkan ke hampir semua jenis template bawaan blogspot, baik tema bawaan blogger lama maupun yang terbaru. Elemen yang akan kita pakai adalah HTML, CSS dan JavaScript. Baiklah kita mulai: 1.Tambahkan CSS Masuk kepengaturan blogger Pilih Tema atau Theme Pilih opsi Edit HTML Dan cari kode </head> lalu letakan kode berikut tepat diatasnya: <style> * {box-sizing: border-box;} body { margin: 0; font-family: Ar

Warning! Demo mungkin sudah tidak sesuai dengan konten karena beberapa perubahan dari site kami. Trik ini berhasil saya terapkan kepada beberapa template terbaru blogger dan bekerja dengan baik, diantaranya: SOHO, EMPORIO, CONTEMPO dan template blogger TERKEMUKA. Halaman editor tempat editblogtema bereksprimen Intinya jika sobat ingin tampilan beda pada template bawaan dan menjadi lebih SEO, sobat dapat menerapkan ini. Perhatikan Demo pembuatannya dengan mengikuti link dibawah ini jika sudah masuk jangan lupa klik terlebih dahulu  Run : Lihat DEMO Kelebihan menu navigasi hasil buatan kami adalah: Pastinya responsive Struktur dasar ringan  Dapat diterapkan pada template template bawaan blogger dengan mudah Tombol pencariannya adalah layar penuh. Sedang kan demo untuk penerapannya pada template default (bawaan) blogger SOHO dapat sobat ikuti: Lihat   DEMO Baiklah karena kami ingin sobat menerapkannya maka kami jelaskan bagaimana detail pembuatannya: Pilih sal

Membuat Navigasi menu tidak ada habis habisnya tergantung selera masing masing kali ini saya ingin memberikan contoh sebuah menu navigasi yang cukup diminati oleh pemilik beberapa jenis web, yakni menu navigasi "full screen dropdown: Sebenarnya Menu ini ini bisa kita robah sesuka hati,misalnya untuk menu yang sekarang sedang saya presentasikan adalah dari atas ke bawah dengan bentuk tombol Hamburger: /* Buka */ function openNav() { document.getElementById("myNav").style.height = "100%"; } /* Tutup */ function closeNav() { document.getElementById("myNav").style.height = "0%"; } Jika kita menginginkan tombol hamburger membuka menu dari samping kiri kekanan maka kita akan menggunakan: /* terbuka pada saat orang klik menu */ function openNav() { document.getElementById("myNav").style.width = "100%"; } /* menutup ketika orang klik "x" ikonnya berada didalam menu yang sedang terbuka */ fun

Serial tutorial khusus Mari kita coba sticky Menu Navigasi dibawah ini, dan membuktikan apakah kita dapat menerapkannya pada template blogger kita. Perhatikan cara membuatnya: Sebaiknya back up template anda terlebih dahulu untuk berjaga jaga Masuk ke pengaturan blogger Pilih Tema Pilih opsi editHTML Langkah pertama: Cari kode </header> lalu copy kode dibawah ini dan pastekan diatas kode tadi. <div id="navbar"> <a href="#home">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> </div> Langkah kedua: Cari kode ]]></b:skin> lalu copy kode dibawah ini dan pastekan diatas kode tadi. /* Style the navbar */ #navbar { overflow: hidden; background-color: #333; } /* Navbar links */ #navbar a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px; text-decoration: none; } /* Page content */ .content { padding: 16px; } .sticky { position:

Tema klasik masih menjadi pilihan hingga tahun 2018 dan perkiraan hingga akhir 2022, klasik adalah non-AMP, sebabnya di dalam halaman dasbor blogger - tidak seperti Wordpress yang pilihan template bawaannya banyak - template template Blogger ketersediaannya sangat terbatas, jadi para blogger yang menggunakannya harus kreatif merobah, mengedit, dan memodifikasi atau bahkan mendesain ulang template template bawaan tersebut menjadi: Responsif, mobile firendly, lebih cepat dan lebih SEO.  Kali ini Editblog memberikan rekomendasi kepada anda yang mencoba mendesain ulang tema blogger bawaan dan bermaksud memasang MENU NAVIGASI yang responsive dan mobile - diantara selusin menu navigasi buatan editblog tema guna untuk mendesain ulang template bawan blogger, bulan ini kami merekomendasikan: Menu NAVIGASI OSIRIS. TAPI, APA SIH ISTILAH ISTILAH ITU TADI? Baiklah akan kita jelaskan saja satu persatu persatu terlebih dahulu: Responsif . Artinya menu navigasi pada template dapat beradaptasi