Postingan

Menampilkan postingan dengan label navigasi

Cara membuat menu blogger responsif dilengkapi dengan tombol dropdown

Gambar
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

Sidenav blogger trend blogging 2021

Gambar
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

CARA MENGHILANGKAN PENELUSURAN SESUAI LABEL PADA BLOGGER

Gambar
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

CARA MEMBUAT NAVIGASI MEGA MENU BLOGGER

Gambar
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

CARA MEMBUAT MENU NAVIGASI BLOGGER YANG BISA MENGETAT SAAT KONTEN DI SCROLL

Gambar
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

MARI BELAJAR MEMBUAT NAVIGASI MENU BLOGGER DENGAN TOMBOL PENCARIAN

Gambar
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

CARA MEMBUAT MENU NAVIGASI FULL SCREEN DROPDOWN

Gambar
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

CONTOH CARA MEMBUAT MENU NAVIGASI STICKY ALIAS FIX DIATAS HEADER

Gambar
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:

OSIRIS MENU NAVIGASI UNTUK TEMA BLOGGER REKOMENDASI EDITBLOG

Gambar
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

Label

adsense adwords aibo ajax alexa algoritma alternative Am I Responsive amazon ambigu Amerika AMP Andorid Android Android 10 Angular animasi antivirus aplikasi apple ARM Art Of War artikel sabtu asesories audio autodidact avatar avatar penulis awesome awsome back to top backdoor backlink bahasa Bandar Lampung bank btn batam beautiful bedak beginning belajar belajar koding berita bing web master biografi blackberryOS blackhat blank space blockquote blog blogcomments blogger bloggerhelp blogging Blogging mobile bloging blogspeed blogspot bluetooth bootstrap border dash breadcrumb browser btn mobile bugs Buku business capital letter cara catatan catatan awal tahun Cek IMEI cerai Cerita cerpen cewek chimpense chipset chrome chrome 76 Cina cinta clickjacking codeigniter codepen coding compose compose view condenser mic contact form contempo contempo base contempo blackmagic contempo hibrida contempo hybrid converter coolest copy-paste copyright covid 19 covid_19 cowok CPC credit footer css CTR cuitan curhat cybercrime Dahlan Iskan dark mode dasbor data default Demo desain description diblokir dirtylink disway DOM domain domain authority Donald Trump download download template terbaru dropdown duplikat e-commerce earn money edisi minggu edit editblogtema editor HTML ekonomi elektronik embed emoji emporio emporio hybrid english error essential expires header expires headers facebook fakta fanpage fast loading template fastloading template favicon featured posts feed burner firefox fitur fixed fixed sidebar flipaclip font font awsome footer footer link Footer navigasi forbes framework Free friendship fuchsia full stacks furure g-suite gadget gagdet galeri gambar gambar bergoncang gambar profile penulis gambar responsive game generasi Alpha Generasi Z geng motor genius gerhana girl gmail Gmetrix gojek good news google google chrome Google Domain google drive google font Google honemoon google Plus google search console google webmaster Googlewebmaster gradasi warna grafik gramedia gratis grid style GTmetrix h1 Habibie hack hacker halaman web hamburger menu hanya opini hapus hari bumi harimau heading headings heart secret hewan hoax hobi hometown hotpink HTM5 html HTML view huawei hukum human Idulfitri Iklan ikon Imlek in memories index indie Indonesia Indonesia darurat corona indosat infinite color infinity war informasi instagram instan article intel inteligensia internal link internasional internet internt interntet interntt intert iOS iPad iPadOS iPhone isu IT italia Jaime Ocabo java JavaScript jimdo jin Ping jingling Jokowi jQuery JSitor kaca pembesar kafe kalimantan kalkulus kamera kanonis kartun keamanan keamanan blogger kebijkan kebun raya kecantikan kecepatan blog mobile kehidupan kemanusiaan kesehatan keyakinan keyboard keyword khusus kiata G+ kinemaster klasik klik kode warna koding komentar komentar blog komputer konsipirasi konten konversi kopi korsel korut kota kota kelahiran kotak navigasi menu blog kotak pencarian kotlin kriminalitas kualitas kucing label lapangan kerja laptop lay out lay out version 3 theme layarlipat layout lazyload lelaki liburan life-style lifehack lingkungan logitech logo love Macbook Macbook Air machine learning MacOS magnifier maintenance makeover makmur manusia margasatwa masa depan masonry matahari matematika medsos mega menu mengganti tempa menu menu navigasi menu pencarian menulis merombak metafisika microfon Microsoft microsoft edge Minggu minify misteri mitos mobile modal modern modifikasi monetisi morality motivasi motivation mouse moz multimedia musik myths narasi nasehat terbaik navbar navigasi navigasi menu blog ngeblog nibbler notable office olahraga Omnibus online online editor operating sistem opini otodidak pagelist pagerank paginator Pandora panduan panduan mobile paradox parameter parasit parse pekerjaan pembatasan pemilu 2019 Pemilu Indonesia 17 April 2019 pemrograman pemula pendidikan pengalaman pengaturan pengornbanan pengusaha Penulis perang perang dagang Cina vs Amerika perang dunia ketiga perangdagang perceraian perihal perkawinan permalink perubahan pexel phablet PHP plagiat plagiator PlagScan play store podcast polemik politik ponsel popularitas popularposts portable powered by blogger Powerpoint prediksi premium privasi produk profesi profile programmer programming programming. prosesor pseudo-sains psikologi Python rahasia ramalan ranking faktor rawgit re-desain re-desain tema blogger React Reactions read more recentPosts redesain rekomendasi related posts remaja resolusi responsinator responsive review robot robot.txt s-pen sains samsung sanggahan saran temaplate blogger saran template search secrets security sederhana sejarah seken selegram semrush SEO sepatu sepi share button sharing buttons I.O sidebar sidenav siginifikan silikon simple simpson singapore singularity sitelink sitemap smartphone snippet soho solusi somadmorroco spesial spoiler star wars statistik sticky sidebar sticky widget Strategi SEO streaming Student study study online style submenu subscriber success sudut cerita SVG SVG icon syimbian tab s2 tab s7 tabel tablet tabs2 tabs7plus tagging takdir takhyul talenta tataletak Teen teka teki teknik teknologi TELKOMSEL tema tema kesederhanaan tempat wisata template template premium template premium gratis template SOHO template versi ke-2 terbang terkemuka tes popularitas testimoni testmysite text theme Thucydides tiktok tip tips toggle tokoh tombol berbagi tombol pengalihan tombol reply komentar tops traffik trafic trafik translator travelling tribun tricks Trik triks troubleshooting Tutorial Tutorial Anissa tutorial css tutorialKhusus twitter uang UAS unduh unik update urang utan ustazd Abdul Somad vanilla Script video viomagz viral virus corona vlogging vue w3-css w3school W3Shool wabah warna web web story WebAssembly webdesign WEBP website whatsapp widget wifi ID windows Windows Mobile wisata WIX wordpress wps X-Frame xiomi xml yandex youtber youtube youtuber z-index
Tampilkan selengkapnya