MOHON PERHATIAN!!!........ Sehubungan sedang "ERROR"nya situs HTTP://WWW.RIPWAY.COM, maka bila Anda menemukan tutorial yang menggunakan kode dengan nama situs tersebut, sementara waktu JANGANLAH Anda gunakan. Mohon maaf, semoga anda memakluminya.............................

Mengucapkan Selamat Datang, Semoga Dapat Berkenan Di Hati Anda



SYAMSUDINNAMAKU telah hadir

KUNJUNGI CHANNEL YOUTUBE SAYA

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 :





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!


0 comments:

Posting Komentar