Cara Membuat Menu Bevel Vertikal

Seperti kebanyakan efek hover yang dimiliki oleh

menu vertical pada umumnya, menu inipun demikian

halnya. Akan tetapi efek hover yang dihasil oleh

menu yang satu ini berupa bevel. Untuk jelasnya

silahkan sorotkan cursor Anda tepat di atas menu-

menu yang ada di berikut ini :

• My Home Satu
• My Home Dua
• JavaScript Reference
• DOM Reference
• CSS Drive
• Coding Forums
• Tutorials

Untuk membuat Menu Bevel Vertikal seperti ini,

Anda hanya memerlukan 2 (dua) langkah saja, yaitu :

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

2.   Masukkan dalam kontennya
      kode yang berikut ini lalu simpan.

<ul class="bevelmenu">
<li><a href="URL Anda di sini" >Judul URL Anda</a></li>
<li><a href="URL Anda di sini" >Judul URL Anda</a></li>
<li><a href="URL Anda di sini">Judul URL Anda</a></li>
<li><a href="URL Anda di sini">Judul URL Anda</a></li>
<li><a href="URL Anda di sini">Judul URL Anda</a></li>
<li><a href="URL Anda di sini">Judul URL Anda</a></li>
<li><a href="URL Anda di sini">Judul URL Anda</a></li>
</ul>

KETERANGAN :

Masukkan URL Anda di tempat yang tersedia.

Ganti dan sesuaikan Judul-judul URL-nya
dengan URL yang Anda masukkan.

Silahkan tambahkan URL Anda sesuka hati
sesuai dengan jumlah yang Anda butuhkan.

3.   Setelah itu masuk ke Edit HTML.

4.   Carilah tag </head>

5.   Copy kode yang ada di bawah ini dan
      letakkan di atas tag </head> ini,
      pratinjau lalu simpan template Anda.

<style type="text/css">

.bevelmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 230px;
}

.bevelmenu li a{
display: block;
width: 100%;
padding: 2px 4px;
text-decoration: none;
font-weight: bold;
background-color: #FFF2BF;
border: 2px solid #FFF2BF;
text-decoration:none;
}

.bevelmenu li a:hover{
color: black;
background-color: #FFE271;
border-style: outset;
}

html>body .bevelmenu li a:active{ /* Apply mousedown effect (non IE browsers only) */
border-style: inset;
}

</style>

KETERANGAN :

Gantilah warna backgroundnya dengan
warna apa saja yang Anda inginkan.

Selamat mencoba, good luck!