Cara Meletakkan Label Pada Menu Navigasi



Hai.. hai...


Melanjutkan postingan beberapa hari yang lalu. Kemarin saya berbagi tutorial tentang Mengenal Label dan Fungsinya di Blog dan postingan ini masih ada kaitannya dengan label. Di postingan yang lalu juga sudah dibahas bagaimana cara meletakkan label pada sidebar (samping) ataupun footer (bawah) halaman blog. 

Kali ini kita akan kupas tuntas bagaimana cara meletakkan label pada menu navigasi dan kita akan bermain-main sedikit dengan kode HTML. Eitss... jangan horor dulu dengan kata "kode HTML". Pikirannya di setting dan disugesti dulu dengan kata "BISMILLAH GAMPANG" biar ga nyerah sebelum berperang. Saya akan usahakan agar apa yang saya share ini Insya Allah mudah dipahami bagi teman-teman yang baru belajar blogging.

Oh iya, sebelum mulai lakukan dulu backup pada template yang saat ini dipakai. Agar jika terjadi error bisa dipulihkan kembali.

Kita mulai ya!

  • Setelah login di Blogger.com, mentemen Pilih menu Tata Letak, masing-masing template susunan desainnya beda-beda. Template yang saya pakai ini adalah template dari Blogger.com (jenis temanya Sederhana). Di tema tersebut ada space kosong di bawah Header dimana saya bisa menambahkan navigation menu. Lalu klik Tambahkan Gadget


  • Setelah itu akan tambil box yang isinya berbagai macam gadget, pilih HTML/JavaScript
  • Lalu akan tampil box untuk konfigurasi HTML/Javascript. Copy kode dibawah ini :

<style type="text/css">
/*CSS MENU*/
#menu{background:#343434;color:#eee;height:35px;border-bottom:4px solid #eeeded}
#menu ul,#menu li{margin:0 0;padding:0 0;list-style:none;z-index:9999;}
#menu ul{height:35px}
#menu li{float:left;display:inline;position:relative;font:bold 12px Arial;text-shadow: 0 -1px 0 #000;border-right: 1px solid #444;border-left: 1px solid #111;text-transform:uppercase}
#menu li:first-child{border-left: none}
#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#eee;}
#menu li:hover > a,#menu li a:hover{background:#111}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:12px;position:absolute;left:35px}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#111;position:absolute;z-index:99;display:none;border:0;}
#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}
#menu li:hover ul.menus{display:block}
#menu a.home {background: #c00;}
#menu a.sub{padding:0 27px 0 14px}
#menu a.sub::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}
#menu ul.menus a:hover{background:#333;}
</style>

<!-- Mulai Area Menu -->
<nav id="menu">
<input type="checkbox" />
<label>=Navigation</label>
<ul>
<li><a class="home" href="/">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Daftar Isi</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Login Admin</a></li>
<!-- Mulai Area Menu Dropdown -->
<li><a class="sub" href="#">Menus</a>  <ul class="menus">
<li><a href="#" title="Menus">Menus 1</a></li>
<li><a href="#">Page</a></li>
<li><a href="#">Menus2</a></li>
<li><a href="#">Menus 3</a></li>
<li><a href="#">Menus 4</a></li>
<li><a href="#">Menus 5</a></li>
</ul>
</li>
<!-- Area Dropdown Selesai-->  </ul>
</nav>
<!-- Area Menu Selesai-->

  • Dan paste ke box konfigurasi HTML/JavaScript
  • Setelah itu scroll ke bawah hingga menemukan tulisan <!-- Mulai Area Menu -->
  • Lakukan pengeditan pada bagian ini :

<ul>
<li><a class="home" href="/">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Daftar Isi</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Login Admin</a></li>

Keterangan : 
Warna biru : isi dengan link label
Warna merah : isi dengan nama label/menu yang ingin mentemen buat misalnya About


  • Untuk mendapatkan link label salah satu cara tercepat adalah teman-teman bisa melakukan klik kanan pada daftar label di sidebar blog masing-masing (jika sudah memasang widget label) lalu pilih Copy Link Address. Setelah itu paste ke kode bertanda tagar "#" pada kode HTML diatas.




Contoh hasilnya seperti ini :

<li><a href="http://nunudaily.blogspot.com/search/label/aboutme">About</a></li>
<li><a href="http://nunudaily.blogspot.com/search/label/info">Info</a></li>


 dan seterusnya, lakukan hal yang sama untuk label lainnya.
  • Setelah selesai, klik Simpan
  • Maka tampilannya di blog akan seperti gambar di bawah ini


Oke mentemen, sekian dulu tutorialnya. Selamat mencoba!

1 comments

Silakan Berikan Komentar, Saran, dan Kritik Untuk Postingan Ini, yang sopan ya ^^ dan please jangan spam