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. The EditblogTema: Scroll keatas dan kebawah scroll untuk melihat efek. Home News Contact Contoh Navigasi Sticky Navbar akan lengket alias sticky begitu mencapai posisi sticky Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable s

Labels

adwords aibo ajax alexa algoritma alternative Am I Responsive amazon ambigu Amerika AMP Andorid Android Android 10 Angular animasi apple ARM Art Of War artikel sabtu asesories autodidact avatar avatar penulis awesome awsome back to top backdoor backlink bahasa bank btn batam beautiful beginning belajar belajar koding berita bing web master biografi blackberryOS blackhat 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 Cerita cerpen cewek chimpense chipset chrome chrome 76 Cina cinta clickjacking codepen coding compose 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 diblokir dirtylink disway DOM domain domain authority Donald Trump download download template terbaru dropdown earn money edisi minggu edit editblogtema editor HTML ekonomi elektronik Elle Darby 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 font font awsome footer footer link Footer navigasi forbes 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 gong xi fa cai 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 hotpink HTM5 html huawei hukum human Idulfitri Iklan ikon Imlek in memories indie Indonesia Indonesia darurat corona indosat infinite color infinity war informasi instagram 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 kecepatan blog mobile kehidupan kemanusiaan kesehatan keyakinan keyboard keyword kiata G+ klasik klik kode warna koding komentar komentar blog komputer konsipirasi konten konversi kopi kota kotak navigasi menu blog kotak pencarian kotlin kriminalitas kualitas kucing label laptop lay out lay out version 3 theme layarlipat layout lazyload lifehack lingkungan logitech logo love Macbook Macbook Air machine learning MacOS magnifier maintenance makmur manusia margasatwa masa depan masonry matahari matematika medsos mega menu mengganti tempa menu menu navigasi menu pencarian menulis merombak metafisika Microsoft microsoft edge Minggu minify misteri mitos mobile modal modern modifikasi monetisi morality motivasi motivation moz myths nasehat terbaik navbar navigasi navigasi menu blog ngeblog nibbler notable office Omnibus online online editor operating sistem opini otodidak pagelist pagerank paginator Pandora panduan panduan mobile paradox parameter parasit parse pembatasan pemilu 2019 Pemilu Indonesia 17 April 2019 pemrograman pemula pendidikan pengalaman pengaturan pengusaha Penulis perang dagang Cina vs Amerika perang dunia ketiga perangdagang perceraian perihal perubahan pexel phablet PHP plagiat plagiator PlagScan play store 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 related posts remaja resolusi responsinator responsive review robot robot.txt sains samsung sanggahan saran temaplate blogger saran template search secrets security sederhana sejarah seken selegram semrush SEO share button sharing buttons I.O sidebar sidenav siginifikan silikon simple simpson singularity sitelink sitemap smartphone snippet soho solusi somadmorroco spesial spoiler star wars sticky sidebar sticky widget Strategi SEO Student study study online style submenu subscriber success sudut cerita SVG SVG icon syimbian tab s2 tabel tablet tabs2 tagging takdir takhyul talenta tataletak Teen teka teki teknik teknologi TELKOMSEL tema tema kesederhanaan template template premium template premium gratis template SOHO template versi ke-2 terkemuka tes popularitas testimoni testmysite text theme Thucydides tip tips toggle tokoh tombol berbagi tombol pengalihan tombol reply komentar tops traffik trafic trafik translator tribun tricks Trik triks troubleshooting Tutorial Tutorial Anissa 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 X-Frame xiomi xml yandex youtube youtuber z-index
Tampilkan selengkapnya

Follow by Email