Cara Membuat Panel Seksi Menu Vertikal

Panel seksi ini adalah menu daftar vertikal dengan tepi kanan yang melengkung. Sebagai menu,
ini tidak hanya mempertahankan tampilan melalui perubahan pada lebar atau tinggi tetapi juga
sangat mudah untuk mewarnainya melalui CSS saja. Anda mau tahu contohnya ?!
Lihat previewnya dan sorotlah menu di bawah ini :

• » Tanda Tangan Animasi
• » Membuat Spoiler
• » Pesan Online 1
• » Pesan Online 2
• » Kalender Animasi
• » Teks Menulis 2

Bila ingin membuat Panel Seksi Menu Vertikal ini, Anda ikuti langkahnya seperti berikut ini :

1.   Rancangan -> Tambah Gadget -> Pilih HTML/JavaScript.

2.   Masukkan dalam kontennya, kode yang berikut ini terus simpan.

<p>
<ul class="sexypanels">
<li><a href='URL 01 Anda di sini'>» Judul Menu 01</a></li>
<li><a href='URL 02 Anda di sini'>» Judul Menu 02</a></li>
<li><a href='URL 03 Anda di sini'>» Judul Menu 03</a></li>
<li><a href='URL 04 Anda di sini'>» Judul Menu 04</a></li>
<li><a href='URL 05 Anda di sini'>» Judul Menu 05</a></li>
<li class="lastitem"><a href="URL 06 Anda di sini">» Judul Menu 06</a></li>
</ul>
</p>

KETERANGAN :

Masukkan URL Anda pada kode yang tersedia. Dan bila perlu, tambahkan lagi sesuka Anda.

1.   Lalu masuk ke Edit HTML.

2.   Cari kode </head>

3.   Copy kode yang ada di bawah ini dan paste di atas kode </head>,
      Kemudian simpanlah template anda.

<style type="text/css">

.sexypanels{
list-style-type: none;
margin: 0;
padding: 0;
width: 220px; /* width of menu */
}

.sexypanels li{
border-bottom: 0px solid white; /* white border beneath each menu item */
}

.sexypanels li a{
background: #FF0000 url(http://www.dynamicdrive.com/cssexamples/media/sexypanelright.gif) no-repeat right top; /*color of menu by default*/
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
display: block;
color: white;
width: auto;
padding: 5px 0; /* Vertical (top/bottom) padding for each menu link */
text-indent: 8px;
text-decoration: none;
border-bottom: 1px solid black; /*bottom border of menu link. Should be equal or darker to link's bgcolor*/
}
.sexypanels li a:visited, .sexypanels li a:active{
color: white;

}

.sexypanels li a:hover{
background-color: blue; /*color of menu onMouseover*/
color: white;
border-bottom: 1px solid black; /*bottom border of menu link during hover. Should be equal or darker to link's hover's bgcolor*/
}

</style>

<!--[if IE]>
<style type="text/css">
.sexypanels li a{ /* Menu link width value for IE */
width: 100%;
}
</style>
<![endif]-->

Selamat mencoba, good luck!