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 Efek Hover Pada Tombol


Masing-masing tombolnya dapat menampung teks
lebar variabel dan mendukung efek hover ketika
mouse berada di atasnya. Arahkan cursor Anda
tepat di atas tombol-tombol yang ada di bawah ini :






Cara Membuatnya, ikuti langkah berikut :

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

2.   Masukkan ke dalam kontennya
      kode berikut ini :

<div class="buttonwrapper" onClick="return false">
<a class="squarebutton" href="URL link 1"><span>Judul link 1</span></a> <a class="squarebutton" href="URL link 2" style="margin-left: 6px"><span>Judul link 2</span></a> 
<a class="squarebutton green" href="URL link 3" style="margin-left: 10px"><span>Judul link 3</span></a> 
<a class="squarebutton green" href="URL link 4" style="margin-left: 6px"><span>Judul link 4</span></a> 
<a class="squarebutton orange" href="URL link 5" style="margin-left: 10px"><span>Judul link 5/span></a> 
<a class="squarebutton orange" href="URL link 6" style="margin-left: 6px"><span>Judul link 6</span></a>
</div>

KETERANGAN :

Ganti URL dan Judul Linknya dengan URl
dan Judul apa saja yang Anda kehendaki.

3.   Kemudian masuk ke Edit HTML

4.   Carilah tag </head>

5.   Copy kode berikut dan letakkan
      di atas tag </head> ini.
      Pratinjau lalu simpan template Anda.

<style type="text/css">

a.squarebutton{
background: transparent url('http://www.dynamicdrive.com/cssexamples/media/square-gray-left.gif') no-repeat top left;
display: block;
float: left;
font: normal 12px Arial; /* Change 12px as desired */
line-height: 15px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
height: 23px; /* Height of button background height */
padding-left: 9px; /* Width of left menu image */
text-decoration: none;
}

a:link.squarebutton, a:visited.squarebutton, a:active.squarebutton{
color: #494949; /*button text color*/
}

a.squarebutton span{
background: transparent url('http://www.dynamicdrive.com/cssexamples/media/square-gray-right.gif') no-repeat top right;
display: block;
padding: 4px 9px 4px 0; /*Set 9px below to match value of 'padding-left' value above*/
}

a.squarebutton:hover{ /* Hover state CSS */
background-position: bottom left;
}

a.squarebutton:hover span{ /* Hover state CSS */
background-position: bottom right;
color: black;
}

.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: 100%;
}

a.green{
background: transparent url('http://www.dynamicdrive.com/cssexamples/media/square-green-left.gif') no-repeat top left
}

a.green span{
background: transparent url('http://www.dynamicdrive.com/cssexamples/media/square-green-right.gif') no-repeat top right;
}

a.orange{
background: transparent url('http://www.dynamicdrive.com/cssexamples/media/square-orange-left.gif') no-repeat top left
}

a.orange span{
background: transparent url('http://www.dynamicdrive.com/cssexamples/media/square-orange-right.gif') no-repeat top right;
}

a.blue{
background: transparent url('http://www.dynamicdrive.com/cssexamples/media/square-blue-left.gif') no-repeat top left
}

a.blue span{
background: transparent url('http://www.dynamicdrive.com/cssexamples/media/square-blue-right.gif') no-repeat top right;
}

a.red{
background: transparent url('http://www.dynamicdrive.com/cssexamples/media/square-red-left.gif') no-repeat top left
}

a.red span{
background: transparent url('http://www.dynamicdrive.com/cssexamples/media/square-red-right.gif') no-repeat top right;
}

</style>

Selamat mencoba, good luck!


2 comments:

aizogames mengatakan...

buset blognya meriah mas. keren dah

tmm999 mengatakan...

Info yang mantap nih, terima kasih ya...

Posting Komentar