Wednesday, February 15, 2017

Cara Membuat Menu Bertingkat ( sub Menu ) pada Menu Header Blog

Header,Blog,Menu Bertingkat,sub menu,multilevel menu,cara membuat,hoe to make
Pernah mengunjungi website/blog dimana jika kita mengarahkan pointer mouse ke menu blog tersebut maka akan muncul sub menu dibawahnya?, ini lah yang dinamakan menu bertingkat. Fungsinya adalah jika kita ingin menampilkan menu pada suatu kategori yang di dalamnya ada lebih dari satu sub kategori, sehingga terlihat lebih rapi dan tidak memakan tempat pada menu bar.




Pada blog yang dibuat menggunakan blogger kita bisa membuatnya dengan menambahkan beberapa script code pada HTML blog kita. Berikut adalah langkah-langkah untuk membuat menu Bertingkat pada Blogger :


---------- How to Create Multilevel Menu on Your Blog ----------


1. Masuk ke akun blogger anda
2. Pada Menu Template klik Edit HTML
Header,Blog,Menu Bertingkat,sub menu,multilevel menu,cara membuat,hoe to make



( Lihat Juga Tutorial Blogger Lainnya di Daftar Isi Sinauyuk.com )

3. Cari kode brikut ]]></b:skin> ( klik di dalam kotak edit html pencet ctrl+f )
4. Copy kode berikut, paste tepas diatas ]]></b:skin>


.tabs-inner .widget li ul {
  z-index: 100; position: absolute;
  left: -999em; height: auto; margin: 0; padding: 0;
  border: 1px solid #999999;
}

.tabs-inner .widget li ul, .tabs-inner .widget li ul a,
.tabs-inner .widget li ul li:first-child a {
  -moz-border-radius: 0px; -webkit-border-radius: 0px;
  -goog-ms-border-radius: 0px; border-radius: 0px;
}

.tabs-inner .widget li:hover ul, .tabs-inner .widget li.sfhover ul {
  left: auto;
}

.tabs-inner .widget li li a:hover, .tabs-inner .widget li li a:active {
  color: #ffffff; background: rgb(51, 102, 153);
}

.tabs-inner .widget li ul a {
  display: block; padding-left: 1.25em; padding-right: 1.25em;
  margin-left: 0px; margin-right: 0px; border: none;
  color: #000000; background: rgb(243, 244, 246);
}

.tabs-inner .widget li ul, .tabs-inner .widget li ul a {
  width: 250px;
}

Keterangan :

  • Kode berwarna Kuning merupakan ukuran garis pembatas / bingkai sub menu ada bisa merubahnya menjadi lebih tebal dengan mengganti angka 1 menjadi 2,3,4,atau lebih dari itu atau menghilangkannya dengan mengubah angka 1 menjadi 0
  • Kode berwarna hijau adalah warna background dari sub menu anda bisa merubahnya dengan mengganti kode warnanya. untuk dapat mengetahui kode warna sebuah warna bisa dilihat disini
  • Kde berwarna orange adalah kode untuk merubah warna teks di dalam sub menu sama seperti warna background anda juga dapat merubahnya
  • kode berwarna biru merupakan lebar dari sub menu ada bisa merubahnya menjadi lebih lebar atau lebih sempit
( Baca Juga   :   Cara Membuat Read More / Baca Selanjutnya pada Postingan Blog )



Header,Blog,Menu Bertingkat,sub menu,multilevel menu,cara membuat,hoe to make


5. Cari kode <li><a expr:href='data:link.href'><data:link.title/></a></li> ,Lihat beberapa baris kode dibawahnya akan terdapat kode <b:/loop> . Salin kode berikut tepat dibawah <b:/loop>




<li><a href='#'>Menu1</a>   <ul>     <li><a href='http://sinauyuk.com/'>Sub Menu 1</a></li>     <li><a href='http://sinauyuk.com'>Sub Menu 2</a></li>     <li><a href='http://sinauyuk.com'>Sub Menu 3</a></li>   </ul> </li>

Keterangan :

  • Kode berwarna merah adalah tulisan pada menu utama
  • kode berwarna kuning adalah URL dari sub menu
  • Kode berwarna hijau adalah nama dari sub menu

    Jika anda ingin lebih dari 3 submenu silahkan tambahkan kode

    <li><a href='http://sinauyuk.com/'>Sub Menu 1</a></li> sebanyak yang anda butuhkan

( Baca Juga   :   Cara Mengganti Jenis Font ( Huruf ) pada Halaman Blog )


Header,Blog,Menu Bertingkat,sub menu,multilevel menu,cara membuat,hoe to make


6. Simpan Template

Menu bertingkat pada blog sudah jidi. Jika ada yang kurang jelas atau ada yang ingin ditanyakan silahkan tulis di kolom komentar.Selamat Mencoba dan terus belajar.



Jika menurut anda artikel ini bermanfaat silahkan share di media sosial anda, Terimakasih.
Share/Bagikan ke :
Tampilkan Komentar

0 komentar