Cara Membuat Tab Menu Bar dengan Mudah di Blogger

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 dipandu semudah mungkin untuk bisa dipahami.

NOTE : Baca dengan teliti dan terapkan dengan cermat. Selamat belajar.

Seperti yang sudah dijanjikan di awal tadi. Ada banyak cara membuat menu bar di blog. Supaya kalian tidak bingung, kita coba memisahkan setiap panduan yang akan kalian pelajari dari yang mudah sampai yang sedikit rumit.

Cara Membuat Halaman Menu di Blog Tanpa Edit HTML

1. Pastikan sudah Login ke Blogger.com > Pilih Blog yang ingin ditambahkan pada menu blog
2. Klik Tata Letak > Tambahkan Gadget tepat di bawah posisi header seperti gambar
3. Scroll ke bawah dan Klik + pada Laman (lihat kotak merah di gambar)
4. 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).
5. 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) :
6. Untuk mengubah warna background, warna teks, garis batas tab menu, pembeda warna tab menu yang sedang diklik, dll. Caranya : Klik Tema (Theme) > Sesuaikan :
7. Selanjutnya klik Lanjutan > Teks Tab dan silakan sesuaikan warna teks, font teks, dan warna teks yang dipilih.
8. Lanjutkan klik Latar Tab. Ini kelanjutan panduan no 7. Sekarang, kalian bisa mengubah warna lataratau background dari tab dan warna yang dipilih (warna yg diklik). Jika sudah, klik Terapkan di Blog
9. Selesai…

Cara Memasukkan Postingan ke Menu Blog

1. Login ke Blogger.com
2. 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
3. Pada menu di kiri, klik Tata Letak. Lanjutkan klik Edit pada gadget Laman seperti gambar di kotak merah :
4. Untuk menambahkan link postingan di menu blog, klik Tambahkan tautan eksternal.
5. Isi Judul Laman dan Pastekan link postingan tadi di kotak Alamat web (URL). Jika sudah, klik Simpan tautan > Simpan.
6. Selesai…

Cara Membuat Menu Tab Sesuai Label

1. Login ke Blogger.com
2. 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

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

4. Pada menu di kiri, klik Tata Letak. Lanjutkan klik Edit pada gadget Laman seperti gambar di kotak merah.

5. Untuk menambahkan link postingan di menu blog, klik Tambahkan tautan eksternal.

6. Isi Judul Laman dan Pastekan link postingan tadi di kotak Alamat web (URL). Jika sudah, klik Simpan tautan.

7. Jika sudah, klik Simpan.

8. Selesai…

Cara Membuat Sub Menu (Dropdown) pada Blog dengan Social Media

1. Login ke Blogger.com
2. Klik Tema (Theme) > Edit HTML seperti gambar berikut :
3. 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 :
4. 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.
5. 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 :
6. Setelah ketemu, pastekan kode di bawah ini tepat di atas kode </head> :
7. <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:&#39;Open Sans&#39;;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:&#39;Open Sans&#39;;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 &gt; ul.menux{visibility:visible;opacity:1;top:45px;}
#menutop a.dutt{padding:0 27px 0 14px}
#menutop a.dutt::after{content:&quot;\f0d7&quot;;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:&quot;\f0d7&quot;;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 &gt; 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 &gt; 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:&quot;\f0c9&quot;;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'/> 
8. 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 dibagi 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…..

Sumber : https://tulisanwortel.com/menu-blogger/

Share This :