0 Cara Membuat Panel Seksi Menu Vertikal

---

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

---

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-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.

<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>

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>,
      lalu simpan 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: black;
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: blue;

}

.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]-->

Keren kan ?  good luck!