Membuat Gambar dan Link Membesar Saat Di Sorot Mouse




Membuat Gambar dan Link Membesar Saat Di Sorot Mouse



Cara Memperbesar Gambar dan Link Saat Di Sorot Mouse

a. Cara Memperbesar Gambar Saat Di Sorot Mouse

Kali ini saya ingin Mencoba membuat gambar membesar ketika disorot, dimana dulunya animasi ini saya pasang di situs berita koran online (www.koranline.com) untuk mempercantik halaman dan ternyata ada yang tertarik ingin memasang seperti itu, oke sebelum ke panduan pemasangan gambar yang membesar saat di sorot mouse coba kamu cek dulu gambar berikut:

Arahkan mouse ke gambar berikut dan perhatikan apa yang terjadi pada gambar:




Sekarang sudah paham kan tentang bagaimana gambar bisa berubah menjadi lebih besar ketika di sorot mouse? 




Untuk pembuatannya tidaklah sulit, cukup copi paste saja code ini lalu letakkan pada halaman posting atau pada sidebar.

<style type="text/css">
border: none;
vertical-align: top;
</style>
<script src="http://kodecode.googlecode.com/files/expandos.js" type="text/javascript"></script>
<img border="0" class="expando" height="90" src="ISI DENGAN URL GAMBAR YANG KAMU INGINKAN" width="130" />

Keterangan :
Ganti yang berwarna merah dengan URL GAMBAR ANDA

b. Cara Memperbesar Link Saat Di Sorot Mouse

Bagaimana cara membuat link agar membesar ketika disorot dengan mouse?
Selain itu juga efek berubahnya warna link ketika di sorot mouse.

Langsung caranya saja :

1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Edit HTML"
3. Cari bagian a:link dan a:hover dan masing-masing ganti dengan kode dibawah ini :

a:link
{
color:#0000ff;
font-size:10px;
cursor:default;
}


a:hover
{
color:#d2691e;
font-size:20px;
font-style:italic;
cursor:;
}



4. Simpan Template. Selesai.


Selamat mencoba Memperbesar Gambar dan Link Saat Di Sorot Mouse, semoga bermanfaat !!!

***







Ada 10 komentar untuk artikel Membuat Gambar dan Link Membesar Saat Di Sorot Mouse

agusbg on Selasa, 17 Januari 2012 19.58.00 WIB mengatakan...

bagus om.. misalnya buat gallery gambar di dalam sebuah tabel kira kira bisa nggak om?

Anonim mengatakan...

keren kang :) tp saya blm pnya blog ni .. :(
ajarin donk step by step nya !!!

thk before kang :)

BahasaHelp on Rabu, 18 Januari 2012 16.44.00 WIB mengatakan...

Tips yang menarik, sangat bermanfaat sekali. Semoga sukses selalu pak winoto.

Wawan on Kamis, 23 Februari 2012 17.50.00 WIB mengatakan...

Mantap mas pake javascript

Azharksatriatiwolawolawol on Rabu, 11 April 2012 23.50.00 WIB mengatakan...

uda saya coba mass,,
tpi kenapa cuma satu halamn aja yang bisaa,, ???

mohon di bntu,,!!

abdurrohim on Minggu, 22 April 2012 12.02.00 WIB mengatakan...

Mas, lebih tepatnya kodenya ditaruh di mana ya pas kita masuk EDIT HTML?
Tak taruh sembarangan kok blog ana malah ada kode htmlnya?

abdurrohim on Minggu, 22 April 2012 20.09.00 WIB mengatakan...

java scriptnya ditaruh di mana gan di edit html?

abdurrohim on Senin, 23 April 2012 22.14.00 WIB mengatakan...

gan, naruh kodenya di mana?
"di halaman posting" itu masih kurang jelas maksudnya.
"di side bar," juga. gimana dg blog yg ga punya sidebar?

arifin on Sabtu, 26 Mei 2012 12.51.00 WIB mengatakan...

terima kasih maas brow ...

UDINMDURO on Minggu, 03 Juni 2012 13.42.00 WIB mengatakan...

TRIMS BRO, GAMPANG YA


Posting Komentar

 


garis hitam panjang
garis hitam panjang