Memutuskan untuk belajar cara membuat menu di blog adalah pilihan yang tepat. Pasalnya, blog tanpa menu bar seperti sayur tanpa garam. Hambar.
Pentingnya membuat menu di blog erat kaitannya dengan kemudahan navigasi dalam sebuah blog.
Blog yang tidak memiliki menu bukan artinya tidak bagus atau tidak keren. Sah-sah saja.
Tapi, dengan menambahkan menu di blog, pembaca akan lebih mudah untuk mengetahui tentang blog apa yang sedang mereka (pembaca) kunjungi.
Seperti pada umumnya, menu di blog menampilan Laman (page), Kategori, Post atau link dari blog lain yang biasanya posisinya beragam.
Ada menu di blog berada di bawah header blog, di samping header blog, di footer blog dan tempat lainnya.
Sebenarnya ada banyak cara membuat menu di blog. Dari yang mudah tanpa edit HTML, sampai yang harus berhadapan dengan HTML.
Jangan takut dulu.…..
Semuanya akan Pangeran pandu semudah mungkin untuk bisa dipahami.
NOTE : Baca dengan teliti dan terapkan dengan cermat. Selamat belajar.
Cara Membuat Menu di Blog (Blogger/Blogspot) untuk Pemula
Seperti yang sudah Pangeran janjikan di awal tadi. Ada banyak cara membuat menu bar di blog.
Supaya kalian tidak bingung, Pangeran coba memisahkan setiap panduan yang akan kalian pelajari dari yang mudah sampai yang sedikit rumit.
Mari mulai membahasnya.
Baca juga : Cara Membuat Menu di Blog Menjadi Rata Tengah (Center)
Cara Membuat Halaman Menu di Blog Tanpa Edit HTML
- Pastikan sudah Login ke Blogger.com > Pilih Blog yang ingin ditambahkan pada menu blog
- Klik Tata Letak > Tambahkan Gadget tepat di bawah posisi header seperti gambar
- Scroll ke bawah dan Klik + pada Laman (lihat kotak merah di gambar)
- Untuk menambahkan Laman pada menu, silakan ceklist Laman (page) apa saja yang ingin kalian tampilkan. Untuk mengubah posisi, klik tahan dan geser ke atas atau ke bawah. Jika sudah, klik Simpan (Save).
- Untuk memastikan sudah berhasil atau belum, coba buka atau refresh kembali blog kalian. Jika benar, hasilnya akan seperti contoh di bawah ini (lihat kotak merah) :
- Untuk mengubah warna background, warna teks, garis batas tab menu, pembeda warna tab menu yang sedang diklik, dll. Caranya : Klik Tema (Theme) > Sesuaikan :
- Selanjutnya klik Lanjutan > Teks Tab dan silakan sesuaikan warna teks, font teks, dan warna teks yang dipilih.
- Lanjutkan klik Latar Tab. Ini kelanjutan panduan no 7. Sekarang, kalian bisa mengubah warna latar atau background dari tab dan warna yang dipilih (warna yg diklik). Jika sudah, klik Terapkan di Blog
- Selesai…
Cara Memasukkan Postingan ke Menu Blog
- Login ke Blogger.com
- Klik Postingan (di bagian menu sebelah kiri atas). Arahkan kursor pada postingan dimasukkan ke menu blog dengan caranya : klik Kanan pada teks Lihat (View) dan pilih Copy link Adress
- Pada menu di kiri, klik Tata Letak. Lanjutkan klik Edit pada gadget Laman seperti gambar di kotak merah :
- Untuk menambahkan link postingan di menu blog, klik Tambahkan tautan eksternal.
- Isi Judul Laman dan Pastekan link postingan tadi di kotak Alamat web (URL). Jika sudah, klik Simpan tautan > Simpan.
- Selesai…
Cara Membuat Menu Tab Sesuai Label
- Login ke Blogger.com
- Buka (akses) blog kalian dan silakan menuju gadget Label (jika belum ada, tambahkan gadget Label dengan cara : Klik Tata Letak > Tambahkan gadget > + Label > Save).
cara membuat menu tab sesuai label
- Untuk membuat menu tab sesuai label, copy link label dengan cara arahkan kursor pada label yang dipilih dan klik kanan pada mouse, lalu klik Copy Link Adress (browser chrome). Lihat gambar di atas.
- Pada menu di kiri, klik Tata Letak. Lanjutkan klik Edit pada gadget Laman seperti gambar di kotak merah.
- Untuk menambahkan link postingan di menu blog, klik Tambahkan tautan eksternal.
- Isi Judul Laman dan Pastekan link postingan tadi di kotak Alamat web (URL). Jika sudah, klik Simpan tautan.
- Jika sudah, klik Simpan.
- Selesai…
Cara Membuat Sub Menu (Dropdown) pada Blog dengan Social Media
- Login ke Blogger.com
- Klik Tema (Theme) > Edit HTML seperti gambar berikut :
- Klik kursor pada kotak Edit HTML > Tekan CTRL + F pada keyboard > Masukkan kode
<div class='region-inner tabs-inner'>pada kotak pencarian dan klik Enter. Jika benar, hasilnya seperti ini :
- Setelah ketemu, pastekan kode di bawah ini tepat di bawah kode
<div class='region-inner tabs-inner'>:<nav id='menutop'>
<input type='checkbox'/>
<label/>
<ul>
<li><a href='#' title='Home'>Home</a></li>
<li><a class='dutt' href='#'>Drop-Down</a>
<ul class='menux'>
<li><a href='#'>Sub-item 1</a></li>
<li><a href='#'>Sub-item 2</a></li>
</ul>
</li>
<li><a class='dutt' href='#'>Contact</a>
<ul class='menux'>
<li><a href='#'>e-mail Form</a></li>
<li><a href='#'>Twitter</a></li>
</ul>
</li>
<li><a href='#'>Privacy Policy</a></li>
<li><a href='#'>Sitemap</a></li>
<li class='sorting-01 facebook'><a href='#'><i class='fa fa-facebook fa-lg'/><span class='inv'/></a></li>
<li class='sorting-02 twitter'><a href='#'><i class='fa fa-twitter fa-lg'/><span class='inv'/></a></li>
<li class='sorting-03 googleplus'><a href='#'><i class='fa fa-google-plus fa-lg'/><span class='inv'/></a></li>
<li class='sorting-06 linkedin'><a href='#'><i class='fa fa-linkedin fa-lg'/><span class='inv'/></a></li>
<li class='sorting-04 youtube'><a href='#'><i class='fa fa-youtube fa-lg'/><span class='inv'/></a></li>
</ul>
</nav>– Ganti kode
#menjadi URL/Link yang ingin kalian masukkan.
– Ganti nama menu Warna Hijau sesuai dengan keinginan kalian. - Klik lagi kursor pada kotak Edit HTML > Tekan CTRL + F pada keyboard > Masukkan kode
</head>pada kotak pencarian dan klik Enter. Jika benar, hasilnya seperti ini :
- Setelah ketemu, pastekan kode di bawah ini tepat di atas kode
</head>:<style>
/* iSmoothBlog CSS Menu Top */
#menutop{width:100%;margin:0 auto;height:45px;background:#fff;border:1px solid #e9e9e9;}
#menutop ul,#menutop li{margin:0;padding:0;list-style:none;}
#menutop ul{height:45px}
#menutop li{float:left;display:inline;position:relative;font-family:'Open Sans';font-size:12px;
font-weight:bold;}
#menutop a{display:block;line-height:45px;padding:0 14px;text-decoration:none;color:#919392;}
#menutop ul li:hover a{color:#666;}
#menutop input{display:none;margin:0 0;padding:0 0;width:100%;height:45px;opacity:0;cursor:pointer}
#menutop label{font-family:'Open Sans';font-size:30px;font-weight:400;display:none;width:35px;height:45px;line-height:45px;text-align:center;}
#menutop label span{font-size:13px;position:absolute;left:35px}
#menutop ul li ul{height:auto;overflow:hidden;position:absolute;z-index:99;color:#919392}
#menutop ul li ul li a{color:#919392;height:45px;line-height:45px;background:#fff;width:100%;}
#menutop ul.menux{visibility:hidden;opacity:0;height:auto;overflow:hidden;background:#fff;position:absolute;z-index:99;color:#919392;box-shadow: 0px 2px 3px rgba(0,0,0,0.1);top:10px;transition:all 0.3s ease-in-out;}
#menutop li:hover > ul.menux{visibility:visible;opacity:1;top:45px;}
#menutop a.dutt{padding:0 27px 0 14px}
#menutop a.dutt::after{content:"\f0d7";font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}
#menutop a.dutt:hover::after,#menutop ul li:hover a.dutt::after{content:"\f0d7";font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}
#menutop ul.menux li a{background:#fff;color:#919392;}
#menutop ul li ul li a:hover{background:#fcfcfc;color:#8493a0;}
#menutop li.facebook {padding:0 5px;}
#menutop li.facebook,#menutop li.twitter,#menutop li.youtube,#menutop li.googleplus,#menutop li.linkedin{background:#fff;text-align:center;color:#666;float:right;transition:all 0.2s ease-in-out;}
#menutop li a.facebook:hover,#menutop li a.twitter:hover,#menutop li a.youtube:hover,#menutop li a.googleplus:hover,#menutop li a.linkedin:hover{color:#8493a0;}
#menutop li.facebook .fa.fa-facebook,#menutop li.twitter .fa.fa-twitter,#menutop li.youtube .fa.fa-youtube,#menutop li.googleplus .fa.fa-google-plus,#menutop li.linkedin .fa.fa-linkedin{color:#919392;transition:all 0.2s ease-in-out;}
#menutop li.facebook:hover,#menutop li.twitter:hover,#menutop li.youtube:hover,
#menutop li.googleplus:hover,#menutop li.linkedin:hover{background:#fcfcfc;color:#8493a0;}
#menutop li.facebook:hover .fa.fa-facebook,#menutop li.twitter:hover .fa.fa-twitter,#menutop li.youtube:hover .fa.fa-youtube,#menutop li.googleplus:hover .fa.fa-google-plus,#menutop li.linkedin:hover .fa.fa-linkedin{color:#8493a0;}@media screen and (max-width:960px) {
#menutop li:hover > ul.menux{display:block;}
#menutop ul{border:none;border-bottom:4px solid #e9e9e9;}
#menutop{position:relative;border:none;border-bottom:4px solid #e9e9e9;}
#menutop ul{background:#fff;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
#menutop ul.menux{width:100%;position:static;border:none}
#menutop li{display:block;float:none;width:auto;text-align:left}
#menutop li a{color:#666}
#menutop li a:hover{background:#f1f1f1;color:#f9f9f9}
#menutop li:hover{background:#8493a0;color:#fff;}
#menutop a.dutt{font-weight: bold;}
#menutop li:hover > a.dutt,#menutop a.dutt:hover{background:#b1b1b1;color:#fff;}
#menutop input,#menutop label{display:inline-block;position:absolute;right:0;top:0;}
#menutop input:after,#menutop label:after {content:"\f0c9";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;font-size:30px;color:#666;
display:inline-block;position:absolute;right:15px;top:25%;line-height:30px;}
#menutop input{z-index:4;}
#menutop input:checked + label{color:#fff;font-weight:700}
#menutop input:checked ~ ul{display:block}
#menutop ul li ul li a{width:100%;color:#666;}
#menutop ul li ul li a:hover{background:#8493a0;color:#fff;}
#menutop ul.menux a{background:#fff;color:#666;}
#menutop ul.menux a:hover{background:#8493a0;color:#fff;}
#menutop ul.menux li{background:#fff;color:#666;}
#menutop ul.menux li:hover{background:#8493a0;color:#fff;}
#menutop ul.menux li a{background:#fff;color:#666;}
#menutop ul.menux li a:hover{background:#f1f1f1;color:#8493a0;}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/> - Sebelum menyimpan, kalian bisa klik DEMO untuk melihat hasilnya. Jika sudah yakin, klik Simpan tema (Save Theme) dan silakan lihat hasilnya di blog kalian.
Sampai di sini, kalian sudah belajar cara membuat menu di blog (blogger/blogspot) untuk pemula yang sudah Pangeran bagi menjadi 4 tahapan :
- Cara membuat halaman menu di blog tanpa edit HTML
- Cara memasukkan postingan ke menu blog
- Cara membuat menu tab sesuai label
- Cara membuat sub menu (dropdown) pada blog dengan Social Media
Semoga panduannya mudah dipahami. Jika ada pertanyaan, langsung tulis di komentar.
Terimakasih…..
mantabbbe’..!!!
Nanti saya pahami lagi postingannya Sampean Mas. Masih Lola, maklum baru buat 4 hari buat blog. 😀
sekalian tanya Mas, perbedaan “Laman” di Dasboard dengan “Laman” pada gadget apa ya?
Maturnuwun…
Terimakasih kg Ir sudah membaca dengan baik. Lain waktu semoga dipahami kembali. Mengenai perbedaan “Laman” di Dasboard dengan “Laman” pada gadget tidak ada bedanya.
Penjelasannya seperti ini. Jika Laman di Dasboard itu untuk membuat Page laman. Sedangnya Laman pada gadget itu untuk menampilkan laman yang sudah dibuat pada Laman di dashboard.
gan . itu yang nomer 4 cara ceklistnya gimana ya apa aja yang di tampilin . permasalan saya ketika menambah halaman itu hanya ada beranda saja . yang lain tidak ada . pada di postingan udah di buat
Itu coba diperhatikan lagi pada tahapnya. Ceklist itu bisa dipilih ketika sudah mengisi “Page” bukan “Post” kalo mengisi post, tetep gak akan muncul yang mau diceklist.
Maaf saya kurang paham. Page itu yang mana? Apa bedanya sama post?
cara membuat sub menu yang nomer 4, belon paham. gan
– Ganti kode # menjadi URL dari nama menu yang kalian buat.
Oke, kemaren aku lupa mengganti warnanya. Sekarang sudah aku ganti warna pembedanya. Biar langsung mengerti. Silakan dibaca kembali.
Semoga bermanfaat.
kalau mau nambah menunya gimana bg?
Assalamu’alaikum
Saya sudah coba menambah sub menu tanpa edit HTML. Tapi, waktu mau ceklist laman apa saja yang ingin ditampilkan ga bisa. Untuk mengubah posisi, mau mengklik tahan dan geser ke atas atau ke bawah juga ga bisa.
Assalamualaikum pangeraan mau nanya, di edit html saya ndak ada “” itu nya.. kenapa yak kira2? makasiii…
Itunya apa bunda? Boleh dijelaskan..
Assalamualaikum wb wb. kak mau nanya kok di edit html saya ngk ada tulisan search nya?
Harusnya ada. Coba teliti lagi membaca panduannya.
Harusnya muncul. Coba cek kembali panduannya.
Bisa ajarin buat menu bos,
Beranda
Daftar isi
Blog (biar postingan disini semua) ini yang tidak bisa bos cara buatnya
Hubungi kami
Tentang kami
Kalau buat sub Menu (Dropdown) ini ada dibawah laman apa gimana ya kak? Soalnya aku nyoba malah di bawahnya laman
Harusnya, laman bawaannya dihapus dulu. Baru dipasang script yang ini. Ataupun, posisinya disesuaikan.
kalau postingannya lebih dari satu, gimana caranya supaya dalam satu sub menu yang sama?
Sudah banyak blogger yang membahasnya di GOogle. Saya karena kurang setuju dengan cara ini, makanya saya tidak membuatkan panduannya.
Mantabz mas, trims pelajaranya..
bang, gimana ya cara nampilkan list postingan di dalam menu home nya. misal : saya klik menu home, nanti akan muncul list-list postingan nya. mohon pencerahannya. terima kasih
Buat manual dgn cara menambahkan link di widget menunya… Bisa dilakukan pada edit layout. Pilih bagian menu dan tambahkan link yang kamu maksud.
Semoga membantu…
Wah wah . setiap saya cari informasi di google mengenai tata cara membuat blog . hanya tulisan wortel yang saya suka dan mudah di mengerti .
Good job paman . thank atas tutornya
🚓🚓 Langsung OTW coba paman
Terima kasih tips bang. Sekalian bertanya bang.. Kalau kita ingin buat label atau kategori untuk dipasang pada menu header, misal judulnya (Postingan Baru) atau (Fokus).. Apakah harus dibuat juga label atau kategori yg sama pada postingan..?
.
Misal postingan tentang (kuliner), maka label atau kategori juga (kuliner) pada menu.
.
kalau saya ingin buat label atau kategori pada menu dgn judul (Postingan baru), apakah bisa tanpa saya buat label atau kategori (postingan baru) pada postingan ? Artinya label pada postingan agar tetap sesuai tema misal kuliner seperti yg tadi.. MOHON INFONYA BANG ?
.
#NEWBIE hehe
.
semoga pertanyaan saya tidak membingungkan
Halo kak, mau tanya,
Aku udah ikutin step2 untuk editing htmlnya. Tapi saat di preview, memang berhasil (submenunya tampil), tapi body blognya tidak tampil, alias hanya headernya saja yang tampil. Itu gimana ya kak?
Salah saya dimana ? T.T
Kalau mau membuat menu halaman di atas dan dibawah header blog gmana gan??
Posisi gadgetnya tinggal dipindah sesuai keinginan, gan. Hanya saja, jika di atas header tidak dapat ditambahkan gadget (ini mungkin faktor theme yang digunakan berbeda setiap blog).
Solusinya, bisa lakukan edit html dan tambahkan kolom gadgetnya menjadi 2. Header diletakkan di bawah menu.
Permisi, Kak, sebelumnya,
Mau nanya, nih. Itu harus posting dulu apa enggak, ya? Aku gak ngeh:v
Terima kasih ….
Maksudnya harus posting dulu bagaimana?
Waahh,,, tengkiu banget yaa dek,,, artikel ini yang kubutuhkan, dan semalaman suntuk belajar,,, alhamdulillah.. tampilan blogku sesuai yang kuharapkan.
masalah tampilan ini yg bkin aku tdk semangat menulis… karna sy punya banyak passion dan pengetahuan tentang itu, dan tidak mau juga isi blogku amburadul, so skrg pengunjung blogku bisa melihat isi blogku sesuai yg mrka suka
bagus tutorialnya mendetail. akan tetapi kurang ada pratinjau hasilnya. coba di edit lagi. tampilkan blog yang sudah di edit (membuat halaman di blog). terima kasih
Silakan diklik link pada teks ‘Demo’