Cara Mudah Membuat Menubar dan SubMenu di Blog

 Cara Mudah Membuat Menubar dan SubMenu di Blog

Setelah kemarin saya membuat postingan tentang bagaimana cara membuat menubar di template klasik, kali ini saya kembali dengan judul Cara Mudah Membuat Menubar dan SubMenu di Blog. Membuat submenu bukanlah hal yang mudah tetapi dengan postingan ini saya rasa hal ini akan terasa mudah dan tidak menjadi hal sulit. Bagaimana cara membuatnya? Langsung saja anda ikuti langkah-langkah berikut :

1. Login pada blogger

2. masuk ke halaman Template

3. Edit HTML lalu Lanjutkan

4. Klik centang pada Expand Template Widget

5. Cari kode ]]></b:skin> (gunakan ctrl+f)

6. Pasang kode di bawah ini di atas kode ]]></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(100, 50, 150);

}

.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(250, 200, 220);

}

.tabs-inner .widget li ul, .tabs-inner .widget li ul a {

  width: 180px; 

}

7. Selanjutnya cari kode <li><a expr:href='data:link.href'><data:link.title/></a></li> dan kemudian perhatikan kode <b:/loop> yang terdapat beberapa baris di bawahnya. Nah, sisipkan kode dengan format berikut ini tepat di diatas kode <b:/loop> .

<li><a href='#'>Menu 1</a>

  <ul>

<li><a href='#'>Sub Menu 1</a></li>

<li><a href='#'>Sub Menu 2</a></li>

<li><a href='#'>Sub Menu 3</a></li>

</ul>

</li>

Keterangan:

Ubah # sesuai dengan URL yang akan digunakan pada sub menu dan sesuaikan ‘Menu’ serta ‘Sub Menu’ sesuai dengan teks yang akan ditampilkan. Dan apabila akan membuat beberapa menu pull down, maka salin kode tersebut secara berulang di bawahnya kemudian lakukan penyesuaian setelan dengan cara yang sama dengan sebelumnya.

Kelima, simpan template.

Semoga berguna dan bermanfaat.

Salam.