Cara Membuat Menu dan Submenu di Blogspot

By: Unknown on 16:21

Assalamu'alaikum,, Pada postingan kali ini saya akan membahas tentang Menu, Submenu dan Cara Membuat Menu dan Submenu di Blogspot...

Menu adalah beberapa Pilihan yang memiliki fungsi tertentu, sedangkan
Submenu adalah Menu yang akan muncul jika kalian meletakkan cursor di Menu.

Berikut langkah-langkah membuat Menu dan Submenu di blogspot :

1. kalian pergi ke blogger
2. Kemudian ke Template è Edit HTML
3. Cari kata "<header>" (tanpa tanda petik), lalu kalian salin script berikut dan letakkan diatas kata yang dicari tadi

<style>
/* -- Menu + Sub Menu-- */
#cat-nav {background:gray;margin:0 15px;padding:0;height:35px;}
#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}
#cat-nav a:hover { color:#fff; }
#cat-nav li:hover { background:#000; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#fff; }
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }
#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li { float:left; width: auto; height:35px;}
#secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li  { height:30px; border-top:1px solid #fff; }
#secnav li ul li a  { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }
#secnav li ul ul  { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover  { position:static; }
#cat-nav #secnav {width:100%;margin:0 auto;}
</style>

4. Kemudian kalian cari "</header>" (tanpa tanda petik), lalu kalian salin script berikut dibawah kata yang sudah dicari

   <div id='cat-nav'>
     <ul class='fl' id='secnav'>
      <li><a href='#'>Home</a></li>
      <li><a href='#'>Menu1</a>
         <ul id='sub-custom-nav'>
   <li><a href='#'>Submenu 1</a></li>
   <li><a href='#'>Submenu 2</a></li></ul></li>
      <li><a href='#'>Menu2</a></li>
      <li><a href='#'>Menu3</a>
         <ul id='sub-custom-nav'>
   <li><a href='#'>Submenu 1</a></li>
   <li><a href='#'>Submenu 2</a></li></ul></li>
      <li><a href='#'>Menu4</a></li>
     </ul>
   </div>

5. Setelah itu, kalian Simpan Template
6. Dan lihat Hasilnya..

Berikut ini adalah contoh hasilnya

Mungkin sampai disini saja pertemuan kali ini, semoga postingan tentang Cara Pembuatan Menu dan Submenu di Blogspot dapat bermanfaat bagi kalian para pembaca.. Nantikan Postingan-postingan Selanjutnya,, Wassalamu'alaikum