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 Animasi Gambar Di Bawah Menu


Efek ini menggunakan teknik CSS untuk membuat
Menu Anda tampil lebih keren. Efek ini tidak
menggunakan gambar sebagimana yang biasa
digunakan sebagai penunjang sebuah animasi.
Lihatlah contoh berikut ini. Arahkan cursor Anda
pada deretan menu-menu yang ada di bawah ini :





Ikuti langkah berikut, bila Anda ingin membuat :


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

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

<ul class="arrowunderline">
<li><a href="URL Menu 1 Anda di sini">Menu URL 1</a></li>
<li><a href="URL Menu 2 Anda di sini">Menu URL 2</a></li>
<li class="selected"><a href="URL Menu 3 Anda di sini">Menu URL 3</a></li>
<li><a href="URL Menu 4 Anda di sini">Menu URL 4</a></li>
</ul>

KETERANGAN :

Masukkan URL Anda pada tempat yang disediakan.

Bila perlu, tambahkan lagi jumlah Menunya
dengan mengikuti kode yang sebelumnya.

1.   Terus Masuk ke Edit HTML.

2.   Cari kode </head>

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

<style>

ul.arrowunderline{
list-style-type:none;
margin:0;
padding:0;
text-align:center; /* enter "left", "right", or "center" to orient the menu accordingly */
font: bold 18px Georgia;
}

ul.arrowunderline li{
display:inline;
margin-right:25px; /* spacing between each menu item */
}

ul.arrowunderline li a{
position:relative;
color:black;
padding-bottom:7px; /*spacing between each menu item and arrow underline beneath it */
text-decoration:none;

}

ul.arrowunderline li a:hover{
border-bottom:3px solid red; /* style of arrow underline */
}

ul.arrowunderline li a:hover:after{ /* use CSS generated content to add arrow to the menu */
content:'';
width:0;
height:0;
position:absolute;
left:50%;
margin-left:-5px; /* value should match border-width below */
bottom: 0;
border-width:5px; /* value should match margin-left above */
border-style:solid;
border-color: transparent transparent red transparent; /* create up arrow */
}

</style>

Selamat mencoba dan tetap good luck!


0 comments:

Posting Komentar