(Lengkap) Cara Membuat Tab Menu Bar di Blog

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.

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…..

Baca artikel populer lainnya

Pangeran Wortel

Blogger dari Kab. Bengkalis. Sukanya ngisi waktu luang untuk buat video, nulis di blog, desain feed instagram #bukanfakta dan kadang suka sendiri di pantai. Salam kenal..

14 thoughts to “(Lengkap) Cara Membuat Tab Menu Bar dengan Mudah di Blogger”

Kang IR says:
November 6, 2017 at 6:25 am
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…
1. Pangeran Wortel says:
  November 11, 2017 at 7:43 am
  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.
Boby says:
December 12, 2017 at 9:54 am
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
1. Pangeran Wortel says:
  January 27, 2018 at 7:34 am
  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.
  1. Xely PT says:
    February 16, 2018 at 11:17 pm
    Maaf saya kurang paham. Page itu yang mana? Apa bedanya sama post?
widi says:
January 26, 2018 at 8:18 pm
cara membuat sub menu yang nomer 4, belon paham. gan
– Ganti kode # menjadi URL dari nama menu yang kalian buat.
1. Pangeran Wortel says:
  January 27, 2018 at 7:35 am
  Oke, kemaren aku lupa mengganti warnanya. Sekarang sudah aku ganti warna pembedanya. Biar langsung mengerti. Silakan dibaca kembali.
  Semoga bermanfaat.
Xely PT says:
February 16, 2018 at 11:03 pm
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.
Bunda Biya says:
February 26, 2018 at 5:08 pm
Assalamualaikum pangeraan mau nanya, di edit html saya ndak ada “” itu nya.. kenapa yak kira2? makasiii…
1. Pangeran Wortel says:
  March 1, 2018 at 9:08 am
  Itunya apa bunda? Boleh dijelaskan..
uneng says:
March 19, 2018 at 8:52 pm
Assalamualaikum wb wb. kak mau nanya kok di edit html saya ngk ada tulisan search nya?
1. Pangeran Wortel says:
  March 21, 2018 at 5:25 am
  Harusnya ada. Coba teliti lagi membaca panduannya.
2. Pangeran Wortel says:
  March 22, 2018 at 8:30 am
  Harusnya muncul. Coba cek kembali panduannya.
Kusno says:
April 9, 2018 at 12:23 am
Bisa ajarin buat menu bos,
Beranda
Daftar isi
Blog (biar postingan disini semua) ini yang tidak bisa bos cara buatnya
Hubungi kami
Tentang kami

14 thoughts to “(Lengkap) Cara Membuat Tab Menu Bar dengan Mudah di Blogger”

Leave a Reply Cancel reply

Personal Blog

Wortel Bilang Cinta