EDITBLOGTEMA

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

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