Postingan

Menampilkan postingan dengan label menu

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

Cara mudah membuat menu navigasi pada template blogger versi terbaru

Gambar
Pada pecobaan kali ini saya menggunakan template contempo - yakni salah satu template terbaru blogger, Contempo memang memiliki sidebar, dan saya menyembunyikannya karena saya akan mengganti atau menambahkan sidebar yang berfungsi sebagai menu navigasi agar tampilan template lebih simple dan fresh antar mukanya, ikut langkah demi langkahnya. contoh salah satu rancangan desain sidebar+navbar blogger kami Langkah pertama Tambahkan CSS.  Masuk kepengaturan dasbor blogger. Pilih tema Pilih edit HTML Cari kode berikut: ]]></b:skin> Letakan kode css berikut tepat di atas kode ]]></b:skin> tadi: body {   font-family: "Lato", sans-serif; } .sidenav {   height: 100%;   width: 0;   position: fixed;   z-index: 999;   top: 10;   left: 10;   background-color: #f0f0f0;   overflow-x: hidden;   transition: 0.5s;   padding-top: 60px; } .sidenav a {   padding: 8px 8px 8px 32px;   text-decoration: none;   font-size: 25px;   color: #333;   display: block;   transition: 0.3s; }

Cara simpel membuat menu pencarian blogger

Gambar
ilustrasi menu pencarian Ini adalah cara simpel (sederhana) dapat kalian terapkan untuk membuat navbar blog kalian sendiri dan karena template blogger di buat dengan HTML, trik ini dapat di terapkan hampir pada semua jenis template bawaan blogger. Pada Navbar hanya di tampilkan tiga menu agar ia tampak sederhana, dalam tutorial ini saya misalnya menambahkan tiga menu saja untuk mewakili konten sebuah blog: Judul Blog Tentang atau Perihal Kontak Dan lalu "Menu Pencarian" pada ujung paling kanan Tentu saja navbar ini cukup responsif pada saat di terapkan ke blogger. Perhatikan contoh. Contoh di bawah ini "live" kalian dapat mencoba menyentuh dan mencobanya. Namun demikian fungsi kotak pencarian belum saya lengkapi dengan perintah PHP. (demo mungkin tidak akan terlihat pada browser di hape/mobile) Judul Tentang kontak Cara penerapannya: 1. Pasang CSS: Masuk ke pengaturan blog Pilih theme Lalu akan muncul menu baru b

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

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

TEMPLATE GRATIS CANTIK TERBARU EDITBLOGTEMA

Gambar
Seperti biasa kami tidak lupa meluangkan waktu membuat template template blogger free (gratis) namun dengan fitur fitur premium, misalnya: Heading dinamis, template responisve dan mobile friendly Ads ready (slot iklan di atas/sejajar dengan header) Menu navigasi responsive, plus kotak pencarian Tentu saja tdak ada keharusan bagi anda mempertahankan kredit kami Kami tidak sedang berbisnis, jadi silahkan coba sendiri. DEMO DONLOT Sebenarnya Temanya sedang kami pergunakan buat blog ini dengan sedikit modifikasi ringan. Pengeditan dan modifikasi template ini murni menggunakan elemen elemen html dasar blogger, kecepatan dapat di tingkatkan dengan mudah jika anda mau sedikit mencari tahu melalui google. Semua yang sedang kami lakukan adalah matode pembelajaran yang setidaknya hanya demikian dapat kami terapkan. Dilain waktu kami akan membuat tema tema baru yang lebih simpel namun cepat dan responsive. Jika ingin mencari jenis tema blogger yang kami tawarkan silahkan klik

CARA MEMBUAT MENU NAVIGASI MOBILE FRIENDLY DENGAN MUDAH

Gambar
Navigasi menu itu penting terutama bagi blog blog dengan niche khusus. Membuat tampilan muka sebuah blog menjadi menarik dan mudah di fahami oleh pengunjung. Menurut hemat kami Menu Navigasi yang baik itu harus responsive dan mobile friendly. Artinya dapat berfungsi dan atau di fungsikan dengan baik pada tampilan desktop dan hape. Terutama pada zaman sekarang yang serba mobile tampilan blogger pada ponsel cerdas menjadi amat penting! Lihat Menu Navigasi hasil buatan kami: Atau lihat DEMO  Cara pembuatannya adalah: (Sangat cocok diterapkan ke template awsome, sederhana dan Perjalanan yang sudah di modifikasi menjadi responsive dan mobile friendly.) Masuk ke pengaturan blogger Pilih Theme/Tema Pilih EditHTML Langkah pertama: Tambahkan HTML Pastikan template anda telah terpasang kode:  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> Jika sudah ada langsung saja cari kode <

MEMBUAT IKON MENU ANIMASI UNTUK BLOGGER

Gambar
Membuat dan menambahkan ikon MENU BAR ke header blog sebenarnya mudah. Menu bar itu bagi blog ibarat penerima tamu, semakin ramah semakin banyak tamu yang akan datang. Salah satu bentuk navigasi menu blog yang paling ramah, simple dan tidak sombong adalah bentuk menu bar. Pernahkan kita terpikir bagaimana cara desainer web membuatnya? Awalnya hanya bentuk tiga baris bar, tapi ketika di klik menjadi "X" Ternyata kita dapat membuatnya dengan 3 elemen web  berikut dengan mudah: Masuk kepengaturan blogger Pilih tataletak Pilih tema atau theme Pilih EditHTML Cara mencari kode tertentu cukup tekan ctrl+f pada keyboard dan masukan kode kedalam kotak pencarian tekan "enter" maka kode pencarian yang kita cari akan muncul dengan sorotan berwarna kuning. 1. TAMBAHKAN HTML: <div class="container" onclick="myFunction(this)"> <div class="bar1"></div> <div class="bar2"></div> &l

CARA TERBARU MEMBUAT MENU NAVIGASI LENGKAP DENGAN KOTAK PENCARIAN 2

Gambar
Pada tutorial sebelumnya kita telah membahasa bagaimana membuat menu Navigasi plus kotak pencarian pada blog, akan tetapi kotak menu pencarian tidak "berfungsi" alias tidak bisa digunakan untuk melakukan pencarian he he he... Hal tersebut kami sengajakan agar kita berfikir dan bertanya mengapa? Disanalah letak indahnya seni berfikir dan indahnya 'desain' html. Kebanyakan gaya nih admin, minta maaf hanya bercanda. Pada tutorial pertama kita telah menanamkan kode css untuk skin/bentuk navigasi diatas kode ]]></b:skin> dan menambahkan kode HTML ke dalam widget HTML/Javascript, nah untuk memodifikasi agar kotak pencarian berfungsi dengan benar kita hanya perlu mengedit kode HTML pada widget ini, jangan kuatir, kan kodenya pendek saja kok: Pada tutorial pertama kita telah melatakan kode berikut dengan cara: 1. Layout > Add a Gadget 2. Pilih HTML/JavaScript 3. Judul kosongkan 4. Masukka kode berikut ini: <div class="topnav">

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