Membuat Efek Hover Pada Gambar

April 01, 2012

Bismillah. Bagi sebagian blogger memperindah blog adalah hal wajib yang harus dilaksanakan, makadari itu saya mencoba untuk membantu sobat dalam hal mendesain blog sobat, gimana caranya?
Tinggal ikutin saja tutorial berikut ini, tutorial kali ini membahas tentang hover images yaitu gambar yang mempunyai efek warnanya memudar namun setelah crusor diarahkan ke gambar tersebut maka warnanya akan kembali semula

Preview

atau

DEMO

MEMBUAT EFEK HOVER PADA GAMBAR

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cheklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:

]]></b:skin>

Langkah 5
Tempatkan kode dibawah ini diatas kode langkah 4

.hovereffect img {
opacity:0.5;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
}
.hovereffect:hover img {
opacity:1.0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity:1.0;
-khtml-opacity:1;
}

Langkah 6
Agar efek hover muncul pada gambar maka sisipkan kode ini pada link gambar sobat.

class="hovereffect"

Contoh kodenya seperti ini

<a class="hovereffect" href="http://koderator.blogspot.com/"><img alt="logo" border="0" src="http://i1222.photobucket.com/albums/dd485/kurprip/Unled-1.png" title="Koderator - Blog Design, Tutorial, dan Berbagi" /></a>

Kode diatas merupakan kode untuk memangil efek hover, jadi jika sobat ingin memposting atau membuat gambar agar hover maka sispkanlah kode diatas tersebut.
Langkah 7
Klik Simpan.

Semoga bermanfaat, Selamat mencoba... Heppy Blogging :)

Labels: Widget

6 Komentar:

Filest Blog said on June 19, 2012 at 9:44 PM

demonya kok gag bisa ya kak .. .

:(

Muhammad Irham said on June 20, 2012 at 5:03 AM

@Filest Blog css dari template ane udah kehapus sis tapi beneran tutor ini berhasil :D

Bang BenZ said on June 20, 2012 at 11:25 PM

Bro, klo ane pengen buat button dgn gambar A trus efek hovernya gambar B scriptnya gimana ya? :-/

Muhammad Irham said on June 21, 2012 at 6:18 AM

@Bang BenZ kalau itu setahu saya bukan hover sob tapi penggandaan gambar, untuk scriptnya saya belum tahu tapi pernah lihat di blogazine ntar tak coba cariin

Alwan said on January 5, 2013 at 9:25 PM

kalo langsung semua gambar jadi efek hover semua tanpa kode class="hovereffect" gimana tuh??

(soalnya kalo kayak gitu lumayan ngeribetin)

Fatta WD said on April 10, 2013 at 9:17 AM

harus dari css classnya ya
kalo mau beda-beda tiap gambarnya gmana

visit back http://fattawd.blogspot.com

koderator

Membuat Efek Hover Pada Gambar

April 01, 2012

6 Komentar:

Post a Comment