SubMenu

Beberapa hari yang lalu, teman saya bertanya pada saya bagaimana cara membuat submenu yaitu menu berbentuk kotak yang biasanya berisikan kontak, home, dan semacamnya dan ia menginginkan langkah- langkah dan cara penggunaannya. Berikut tutorial yang saya ketahui:

       1. Buka blog
   2. Dashbor
      3. Masuk ke tata letak

       4. Tambah gadget

       5. Pilih HTML/ javascript

       6. Copy paste kode berikut

<style>
/*---------------------------------------------------------------------------------*/
/* CATEGORY MENU */
/*---------------------------------------------------------------------------------*/
#cat-menu { background:none; height:35px;}
/* category navigation */
.nav { background:#f5f5f5;width:100%;z-index:99; float:left; margin:5px 0 10px 0; padding:0px; list-style:none; height:35px;}
.nav a { position:relative; color:#555; display:block; z-index:100; text-decoration:none; }
.nav li { float:left; width:auto; border-right:1px solid #d9d9d9; }
.nav li a { font:bold 11px/15px Arial,serif; padding:10px 12px; text-decoration:none; text-transform:uppercase; }
.nav li a:hover{ background:#333; color:#fff; text-decoration:underline;}</style>
<div id='cat-menu'>
<ul class='sf-menu nav' id='cat-nav'>
<li><a href='http://rijalseventh.blogspot.com/2012/04/ptc-paid-to-click.html'> Paid To Click</a></li>
<li><a href='http://rijalseventh.blogspot.com/2012/04/profil.html'> Pay Per Chat</a></li>
<li><a href='http://rijalseventh.blogspot.com/2012/04/materi.html'> Opiniku</a></li>
<li><a href='http://rijalseventh.blogspot.com/2012/04/download.html'> Download</a></li>
<li><a href='http://rijalseventh.blogspot.com/2012/04/galeri.html'> Photoshop</a></li>
<li><a href='http://rijalseventh.blogspot.com/2012/04/promosi.html'> Promosi</a></li>
</ul>                     
</div>

        

     
       7. Teman- teman dapat mengisi. “Warna merah” adalah pemberian judul pada kotak submenu dan “warna biru” adalah link kemana kotak submenu tersebut setelah diklik.

       8. Simpan

Jika ada teman- teman yang kurang mengerti bagaimana memasukkan link dalam kotak blog agar ketika diklik muncul kepostingan/ halaman yang lain. Berikut penjelasannya:

1.       Ketika melihat daftar posting pada post akan ada “edit, lihat, berbagi(jika ada), hapus”, klik lihat – copy alamat pada address bar, lalu paste pada kode yang berwarna biru, simpan. Maka ketika kotak submenu diklik akan pindah kepostingan yang teman- teman copy.

Demikianlah tutorial singkat. Semoga bermanfaat