Minggu, 16 Mei 2010

Efek Hover Gambar, Redup dan Terang

Salam Blogger!!! Dah lama nih nggak ngepost, bukan karena kehabisan ide, hanya karena malas jika harus memposting melulu. Maka dari itu, saya putuskan untuk ngepost seminggu sekali, yaitu pada hari Minggu, dan jika ada kesempatan saya bisa posting dua kali atau tiga kali seminggu. Ya doakan saja supaya blog ini bisa tetap update.

Pada postingan tempo dulu saya pernah membahas efek timbul pada gambar. Dimana pada gambar tersebut jika kursor mouse melintas diatas gambar tersebut akan tampak tenggelam seperti relief. Nah, pada kali ini saya juga akan memberikan efek hover pada gambar yaitu pada kondisi biasa gambar akan terlihat seperti apa adanya, tetapi jika mouse melintas diatasnya maka gambar akan terlihat redup. Seperti gambar diatas, contohnya.

Pertama-tama siapkan satu set komputer atau laptop. Boleh ke warnet dulu, atau minjem punya orang. Asal jangan komputer hasil maling aja karena hukumnya haram. Dan juga harus ada koneksi internet (kalau tidak ada gimana mau modifikasi template di blog? ). Kalau sudah ada, kita mulai.

1. Pertama-tama, kita harus login ke Blogger. Lalu klik Tata Letak lalu pilih menu Edit HTML.

2. Backup template anda terlebih dulu.

3. Cari kode ]]></b:skin>.

4. Diatasnya, ketikkan kode berikut.
.redup, img.redup{
opacity:1;
filter:alpha(opacity=100,finishedOpacity=100);
border:0;
}
.redup:hover, a:hover .redup{
opacity:0.5;
filter:alpha(opacity=0.5,finishedOpacity=0.5);
}
5. Lalu? Klik Simpan Template.

Untuk memasukkannya ke blog, ikuti langkah-langkah berikut. Masih di tab Tata Letak, klik menu Elemen Halaman. Lalu klik Tambah Gadget, pilih yang HTML/Javascript, lalu di bagian isi ketik:
<a href="LINKYANGDIINGINKAN"><img src="URLGAMBAR" class="redup"/></a>
Ket: LINKYANGDIINGINKAN adalah link yang diinginkan, jika diklik akan membuka suatu halaman situs/halaman web. Sedangkan URLGAMBAR adalah URL dari gambar. Kalu sudah, klik Simpan.

Anda juga memasukkannya di postingan dengan memasukkan kode yang sama dengan kode diatas pada mode Edit HTML.

Sedikit info di hari minggu. Terima kasih atas perhatiannya dan semoga bermanfaat.


Apabila anda menyukai postingan ini, anda bisa men-sharenya ke yang lain. Semisal ke Facebook atau Twitter. Silakan klik salah satu pilihan dibawah.

Buzz It

Artikel Menarik Lainnya



7 komentar:

Regi_Adi mengatakan...

gambarnya jadi keren Mas, kalo di lewatin mouse jadi terang... makasih MAs tutorialnya

Yopi. B mengatakan...

kalo sebaliknya gimana dari redup jadi terang ?

zonda mengatakan...

keren mas tutor nya heheh nice info
thanks udah mau sharing ya...

Koje mengatakan...

makasih ya teknik nya...
ntar dicobain :)
http://ekos06.student.ipb.ac.id

Kupon Hostgator 2010 mengatakan...

sip sip kapan2 dicobain ah, di blog yang pake blospot, makasih infonya

poker mengatakan...

poker online | Agen Domino | Agen Poker|Kumpulan Poker | bandar poker | Judi Poker | bandar qiu | Judi online terpercaya

Posting Komentar

Apa pandapat anda terhadap artikel ini? Berkomentarlah tanpa rasa malu, ragu dan takut.

Komentar diluar tanggung jawab pemilik blog. Jika anda berkomentar yang berbau pornografi atau sara, maka itu risiko anda sendiri.

Jika anda mengirimkan komentar spam, maka akan saya hapus.

Jika anda tidak ingin komentar anda ditampilkan, silakan kirimkan e-mail di halaman email me.

Jika anda ingin berceloteh bebas, silakan tuju halaman ini.

Anda dapat menggunakan beberapa tag HTML seperti <b>, <i>, <u>, <a>, <strike>, <sub>, <sup>, dan lain-lain. Anda juga dapat menggunakan emoticon Plurk seperti (lmao) (taser) (haha).

Untuk link exchange bisa dilakukan dihalaman ini, sedangkan banner exchange dihalaman ini. Permintaan link exchange dan banner exchange selain dihalaman tersebut tidak akan dilayani.



Emoticon yang dapat digunakan [Tampilkan] [Sembunyikan]



:-))
:-)
:-D
(lol)
:-p
(woot)
;-)
:-o
X-(
:-(
:'-(
:-&
(K)
(angry)
(annoyed)
(wave) | (bye)
B-)
(cozy)
(sick)
(:
(goodluck)
(griltongue)
(mmm)
(hungry)
(music)
(tears)
(tongue)
(unsure)
(highfive)
(dance)
(blush)
(bigeyes)
(funkydance)
(idiot)
(lonely)
(scenic)
(hassle)
(panic)
(okok)
(yahoo)
(cry)
(doh)
(brokenheart)
(drinking)
(girlkiss)
(rofl)
(money)
(rock)
(nottalking)
(party)
(sleeping)
(thinking)
(bringit)
(worship)
(applause)
8-)
(gym)
(heart)
(devil)
(lmao)
(banana_cool)
(banana_rock)
(evilgrin)
(headspin)
(heart_beat)
(ninja)
(haha)
(evilsmirk)
(eyeroll)
(muhaha)
(taser) | (rammi)
(banana_ninja)
(beer)
(coffee)
(fish_hit)
(muscle)
(smileydance)
(fireworks)
(goal)
(bzzz)
(dance_bzz)
(Русский)
(code)
(morning)

Cara menggunakan: ketikkan emoticon yang diinginkan. Untuk yang ada pemisah berupa "|" maka itu adalah alternatif. Seperti (wave) | (bye) maka bisa (wave) bisa (bye)


Pengikut

Follow via NetworkedBlogs



Jangan lupa jadi fans Muhammad Rizki Fadillah's Blog di Facebook. Klik link di bawah ini.

http://www.facebook.com/pages/Tips-Trik-Matematika-Tutorial-Blogging-Muhammad-Rizki-Fadillahs-Blog/277782561876

Setelah mengklik link diatas, klik tombol Become A Fan untuk menjadi fans Muhammad Rizki Fadillah's Blog.