Cara Membuat Menu Blog

Cara Membuat Menu Blog – Halaman adalah halaman yang isinya tidak berubah. Untuk situs web/bisnis, halaman ini biasanya ditujukan sebagai halaman profil (tentang), kontak, produk, informasi panduan, dll.

Menu merupakan bagian penting dari sebuah website. Menu berfungsi sebagai navigasi website yang berguna sebagai panduan bagi pembaca website. Jika Anda tidak memiliki menu, pembaca Anda tidak akan dapat menjelajahi situs web Anda. Menu juga dapat memengaruhi peringkat situs web Anda di mesin pencari. Untuk mengatur menu Anda dapat mengunjungi halaman Menu pada Appearance -> Menus seperti gambar di bawah ini

Cara Membuat Menu Blog

Cara Membuat Menu Blog

Jika ada yang perlu dilakukan, Anda hanya perlu menambahkan halaman/postingan/link/kategori yang ditampilkan di menu, dengan memilih halaman/postingan/link/kategori di klik kiri lalu klik menu Add to. Klik menu simpan dan menu baru akan muncul.

Cara Membuat Menu Blog Pada Sidebar

Jika tidak ada menu yang dibuat, Anda harus membuat menu baru. Untuk membuat menu baru, klik Create New Menu, lalu isikan nama menu yang diinginkan pada kolom Nama Menu, misalnya kita beri nama “Menu 2” kemudian klik tombol Create Menu. Setelah itu akan muncul halaman seperti ini

Kemudian pilih halaman/postingan/tautan/kategori untuk ditampilkan di menu. Kemudian centang menu atas pada menu pengaturan, lalu klik menu simpan.

Selain menu di atas, theme wordpress ini juga memiliki menu bawah yang berguna untuk menyimpan link media sosial, caranya dengan memilih Custom Links di sebelah kiri, lalu isi URL dengan link media sosial dan isikan teksnya. . Link media sosial yang digunakan. Jika sudah klik menu Save untuk menyimpan.

Jika belum ada menu yang dibuat, Anda harus terlebih dahulu membuat menu seperti sebelumnya, lalu centang menu Social Links pada Display location pada menu Settings. Ada yang bertanya bagaimana cara membuat mega menu seperti tampilan tema blog yang sedang digunakan. ?

Add Links To A Menu

Jadi itu sebabnya Anda membukanya melalui laptop atau desktop dan menggunakan mouse. Mengarahkan mouse ke bagian “Fitur” pada menu akan memicu menu mega. Saya ingin menulis secara rinci. Tapi itu akan menjadi pelajaran yang panjang dan tampaknya tidak sederhana, kesederhanaan. Yang penting kamu bisa mengerti tulisan kami, senang sekali.

Membuat mega menu dasar tidaklah sulit, namun karena beberapa theme yang sudah kita custom tentu berbeda dengan membuat trik instalasi atau mega menu, misalnya jika menyentuh menu “Features” di dalamnya. Menu navigasi terutama pada tablet, laptop dan layar besar. Maka menu mega akan muncul secara otomatis, tetapi tidak untuk ponsel! Berbagai fungsi media query dan mega menu ditautkan ke feed lengkap blogger yang sebenarnya memiliki celah berbahaya. Tentu saja kita tahu.

Baca Juga :  Cara Membuat Situs Di Wordpress

Jadi, saya memutuskan untuk memberikan tips kepada teman saya tentang cara menerapkan menu mega yang sederhana dan mudah ke tema bawaan blogger, seperti: simple, pt. Keren, Travel, dll. Atau bisa dicoba di theme bawaan blogger modern seperti Continpo, Emporio, Soho, dll.

Cara Membuat Menu Blog

Nah, caranya sama dengan trik yang kami berikan pada tutorial sederhana yang sudah kami berikan sebelumnya:

Template Blog Blogger Gratis Yang Dilengkapi Menu Dan Sub Menu

/* urutan terbalik – menumpuk tiga kolom di atas satu sama lain alih-alih di samping satu sama lain */

Kode yang saya soroti warna kuning harus diletakkan di atas kode

, bukan atau di bawah ya (coba-coba saja yang benar). Cukup tekan ctrl+c pada keyboard laptop untuk menemukannya dan letakkan semua kode yang telah saya kodekan di atas atau di bawah.

Jika sobat telah mencoba dan membuat kesalahan, atau tidak mengerti cara memasang link pada menu, jangan ragu untuk bertanya kepada kami …

Tidak semua varian tablet andalan Samsung ini memiliki opsi tombol fisik untuk mematikannya. Apalagi bagi Anda yang akan memilikinya dan hanya memilikinya. Ol… Menu navigasi merupakan hal yang penting dan esensial pada sebuah website atau blog, tujuannya untuk memudahkan pengunjung situs dalam menavigasi situs Anda.

Cara Membuat

Ada alasan yang saya ingat ketika listing AdSense ditolak karena “navigasi situs sulit”, itu menunjukkan bahwa membuat menu navigasi di blog atau situs web harus jelas dan mudah dipahami.

Sebenarnya ada banyak jenis navigasi yang bisa Anda gunakan, ada yang vertikal yang biasanya diletakkan di sisi kiri, ada yang horizontal yang biasanya diletakkan di header atau bagian atas blog atau website.

Menu navigasi memiliki ciri khas tersendiri, ada yang flat atau datar tanpa sub menu, ada yang dropdown bahkan multi dropdown.

Cara Membuat Menu Blog

Menu dropdown multi-level responsif ini menggunakan font tebal, sehingga terlihat lebih keren dengan ikon di sebelah gambar atau teks.

Dua Cara Gampang Membuat Menu Navigasi Untuk Tampilan Mobile Blogspot

Tetapi jika Anda tidak ingin menampilkan gambar atau ikon di sisi kiri teks, Anda dapat menghapus kode di bagian html atau Anda tidak perlu menggunakan file bundel css font yang mengagumkan.

Jika Anda tertarik untuk membuat menu navigasi dropdown multi-level responsif di blog Anda, silakan ikuti langkah-langkah di bawah ini.

Baca Juga :  Cara Buat Channel Youtube Dan Daftar Google Adsense

Untuk jaga-jaga, sebaiknya backup dulu template blog anda, silahkan baca artikel cara backup template blog.

Jika blog Anda sebelumnya sudah memiliki menu navigasi, lebih baik hapus kode CSS terlebih dahulu untuk menghindari tampilan menu yang buruk, karena kode CSS lama akan bentrok atau bentrok dengan kode CSS baru.

Cara Membuat Menu Bar Dan Sub Menu Di Blogger Untuk Pemula

Kedua, silahkan masukkan kode HTML menu navigasi di bawah ini. Anda dapat menyesuaikan lokasi Anda, biasanya ditempatkan di bagian header atau Anda dapat mencoba menyimpannya sebelum kode.

Keempat, jika ingin menggunakan font yang bold sehingga muncul gambar atau icon di sebelah teks menu navigasi, silahkan tambahkan kode bundle CSS ini dan letakkan sebelum kode yang saya buat. Ini mungkin solusi yang baik untuk semua teman dan teman Anda dalam pembuatan megamenu. Alasannya adalah:

Pertama: Saya mendesain mega menu ini agar mudah diterapkan di hampir semua template bawaan blogspot. Saya menerapkannya ke template modern.

Cara Membuat Menu Blog

Keempat: Navigasi bersifat “fixed” artinya tetap berada di atas header meskipun halaman atau konten blog di-scroll ke atas dan ke bawah.

Cara Membuat Menu Dropdown Di Blog

Kelima: Berbeda dengan tips mega menu yang sudah saya tulis sebelumnya, trik ini bisa langsung diterapkan ke blog Anda karena sudah saya buat responsive dan mobile friendly.

Di bawah ini adalah gambar ketika saya menerapkan menu mega ini ke template Emporio. Lokasi Emporio sangat bagus karena sepertinya beranda adalah kisi-kisi di layar laptop dan desktop:

Jadi perhatikan gambar di atas ya sobat pasti bisa. Jangan takut untuk membuat kesalahan, jika Anda perlu mencadangkan tema terlebih dahulu sebelum melanjutkan ke langkah berikutnya. Nah jika sudah menemukan kode maka copy kode berikut dan paste diatasnya.

body { font-family: Arial; } * { ukuran kotak: borderBox; } .openBtn { latar belakang : putih ; Perbatasan: Tidak ada; batas-radius: 50px; warna perbatasan: transparan; bantalan: 10px kali 15px; ukuran font: 20px; kursor: penunjuk; Posisi: Tetap; indeks-z: 99; atas: 6px; Hak: 9%; } .openBtn: hover { latar belakang: transparan; } hamparan { tinggi: 62px; lebar: 100%; Tampilan: Tidak ada; Posisi: Tetap; indeks-z: 100; Atas: 0; Kiri: 9; warna latar: #DDDDDD; } .overlay-content { posisi: relatif; Atas: 4%; Lebar: 80%; Perataan Teks: Tengah; margin-tinggi: 10px; Margin: Otomatis; } .overlay .closebtn { posisi: mutlak; atas: 8 piksel; Hak: 11%; bantalan: 0px 0px 0px 0px; indeks-z: 99; ukuran font: 40px; kursor: penunjuk; Warna: #000; } .overlay .closebtn:hover { warna: merah; } .overlay input [type = text] { padding: 15px; ukuran font: 17px; Perbatasan: kuat; warna perbatasan: transparan; batas-radius: 30px; mengapung: kiri; lebar: 100%; latar belakang: #ff; tinggi: 56px; } masukan overlay[type=text]: arahkan { background: #fff; } .tombol overlay { float: kiri; lebar: 10%; bantalan: 15px; latar belakang: transparan; ukuran font: 17px; Perbatasan: Tidak ada; kursor: penunjuk; } .overlayButton: hover { latar belakang: transparan; } #myBtn { tampilan: tidak ada; Posisi: Tetap; bawah: 0px; kanan: 0px; indeks-z: 99; ukuran font: 18px; Garis besar: Tidak ada; warna latar: transparan; Warna biru; kursor: penunjuk; bantalan: 10 piksel; } * { ukuran kotak: border-box; } badan { margin: 0; } .navbar { overflow: tersembunyi; warna latar belakang: #333; font-family: Arial, Helvetica, sans-serif; Posisi: Tetap; Z-Indeks: 99; } .navbar a { float: kiri; ukuran font: 16px; Warna putih; Perataan Teks: Tengah; bantalan: 14px kali 16px; dekorasi teks: tidak ada; } .dropdown { float: kiri; melimpah: tersembunyi; } .dropdown .dropbtn { ukuran font: 16px; Perbatasan: Tidak ada; Garis besar: Tidak ada; Warna putih; bantalan: 14px kali 16px; latar belakang-warna: mewarisi; font: mewarisi; margin: 0; } .navbar a:hover, .dropdown:hover .dropbtn { background-color: biru; } .dropdown-content { tampilan: tidak ada; posisi: mutlak; warna latar: #f9f9f9; lebar: 100%; kiri: 0; bayangan kotak: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); indeks-z: 99; Posisi: Tetap; } .dropdown konten .header { latar belakang: biru; bantalan: 16px; Warna putih; } .dropdown: arahkan kursor .dropdown-content { tampilan: blok; } /* Buat tiga kolom sama besar yang mengapung bersebelahan */ .column { float: left; Lebar: 33,33%; bantalan: 10 piksel; warna latar belakang: #f0f0f0; tinggi: 250 piksel; } .column a { ​​float: none; Warna hitam; bantalan: 16px; dekorasi teks: tidak ada; tampilan: blok; Perataan Teks: Kiri; } .column a:hover { background-color: #ddd; } /* hapus float setelah kolom */ .row:after { konten: “”; tampilan: meja; clear : both } /* responsive layout – susun tiga kolom di atas satu sama lain, bukan bersebelahan */ @media screen dan ( max-width : 600px ) { . kolom { lebar: 100%; tinggi: otomatis; } }

Baca Juga :  Contoh Cv Baik Dan Benar

Mengenal Menu Menu Fungsi Yang Ada Pada Blogger (blogspot)

Tinggalkan komentar