Cara Membuat Sub Menu pada BlogSpot

Assalamualaikum,

Kali ini saya berbagi trik atau tips untuk memberi sub menu pada menu di blog kita. Mungkin untuk beberapa kawan-kawan cara ini sudah lama, namun ada baiknya saya menulis ulang bagi kawan-kawan yang belum paham terkait hal ini. Selain itu cara ini juga bisa membantu saya , apabila saya lupa cara menambahkan sub menunya. Awalnya mungkin kita menebak bahwa sub menu ini hanya terdapat pada beberapa template tertentu. Ternyata pemikiran itu tidak sebenarnya salah dan benar, karena template bisa di atur di dalam 'edit HTML'.

Sekarang kita menuju caranya.

1. ubah sesuaikan setelan tab menu dan menu halaman yang akan ditampilkan, dimana caranya adalah seperti yang tampak pada gambar di bawah ini.

Keterangan : angka 1 menunjukkan 'tab atas' jangan pilih yang 'jangan ditampilkan'. Sedangkan angka 2 menunjukkan menu kita yang tidak memiliki sub menu.

2. Buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’ > centang pada ‘Expand Template Widget’ di bagian atas.

3. Cari kode ]]></b:skin> dan kemudian sisipkan kode CSS berikut ini tepat di ATASnya.

.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: 220px; }
 4. Cari kode <li><a  mungkin anda akan menemukan 2 kode yang sama. Pastikan kode tersebut berkelanjutan seperti :
<li><a expr:href='data:link.href'><data:link.title/></a></li>
Perhatikan di bawah nya akan ada kode <b:/loop>
Copy dan paste kode di bawah ini, di BAWAH kode <b:/loop> tadi.

<li><a href='#'>Menu</a> <ul> <li><a href='URL'>Sub Menu 1</a></li> <li><a href='URL'>Sub Menu 2</a></li> <li><a href='URL'>Sub Menu 3</a></li> </ul> </li>
 5. Simpan Template mu tadi. Lalu coba lihat blog, maka seharusnya akan ada tab bernama "Menu" di bagian atas blog anda beserta Sub Menu 1,2,3. Nah untuk mengganti nama "Menu" dan "Sub Menu 1" tadi, ganti tulisan "Menu" di pada kode <li><a href='#'>Menu</a> di atas dengan nama sesuka anda dan pada kode Sub Menu di atas. Jika anda menginginkan lebih dari 1 menu dengan sub menu, anda tinggal menambahkan kode di atas tadi di bawahnya.

Semoga artikel kali ini bermanfaat