Cara Membuat Menu Bevel Vertikal

Seperti kebanyakan efek hover yang dimiliki oleh menu vertical pada umumnya, menu inipundemikian halnya. Akan tetapi efek hover yang dihasil oleh menu yang satu ini berupa bevel.Untuk jelasnya silahkan sorot cursor Anda tepat di atas menu-menu yang ada di bawah ini :

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

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

<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.
      Silahkan Anda pratinjau dahulu 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!