Setelah kemarin saya posting mengenai cara membuat efek scroll, maka sekarang saya akan membahas tentang cara membuat efek blur pada image. Image akan tampak samar (blur) lalu akan tampak jelas saat disorot cursor. Kurang lebih demikian penjelasan singkatnya. Untuk melihat demonya silakan arahkan cursor anda pada image di samping. Cara membuatnya cukup mudah, hanya diperlukan sedikit penambahan kode CSS.
Silakan baca lebih lanjut langkah-langkah untuk membuatnya.
Langkah selanjutnya adalah cara menerapkan efek blur pada image. Seperti umumnya kode yang digunakan untuk membuat link pada image adalah seperti berikut
Silakan anda ganti kode di atas menjadi seperti ini
Namun apabila anda tidak menginginkan image yang berupa link, kodenya sebagai berikut
Kode yang berwarna merah adalah kode yang harus anda tambahkan. Sekian dulu trik dari saya, semoga bermanfaat, dan happy blogging..... ^^,
- "Login" seperti biasa di acount blogger anda
- Klik "Tata Letak", lalu klik "Edit HTML"
- Cari kode berikut :
</head>
Copy kode di bawah ini lalu letakkan (paste) tepat di atas (sebelum) kode tadi.
<style type="text/css">
a.linkopacity img {
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity-: 0.5;
}
a.linkopacity:hover img {
filter: alpha(opacity=50);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity-: 1.0;
}
</style> - Klik Simpan
Langkah selanjutnya adalah cara menerapkan efek blur pada image. Seperti umumnya kode yang digunakan untuk membuat link pada image adalah seperti berikut
<a href="URL YANG ANDA TUJU"><img src="HOSTING IMAGE ANDA"></a>
Silakan anda ganti kode di atas menjadi seperti ini
<a class="linkopacity" href="URL YANG ANDA TUJU"><img src="HOSTING IMAGE ANDA"></a>
Namun apabila anda tidak menginginkan image yang berupa link, kodenya sebagai berikut
<a class="linkopacity"><img src="HOSTING IMAGE ANDA"></a>
Kode yang berwarna merah adalah kode yang harus anda tambahkan. Sekian dulu trik dari saya, semoga bermanfaat, dan happy blogging..... ^^,
19 Comments:
Wah komentar pertama nich, makasih ya sob atas infonya hehehe, salam persahabatan sob
jadi gambar misterius ni sobat.hehe
tips yang menarik ni,maturtengkiyu ya :)
halo sobat
berkunjung nich
terima kasih
efek blur bisa juga lewat sini yah,,setau aku lewat photoshop .....
kirain sotosop aja yg bisa blur... hehehe
@Agustrie, sama-sama mas, salam persahabatan juga...
@Rizan, iya mas biar penasaran, :D,
@Imtikhan, makasih mas udah berkunjung...
@mel+ryan kurniawan, iya mas, sedikit penambahan kode aja...
Wahhh... keren nich...
Aku simpan dulu kodenya sob...
Oiya sob, warna textnya pakai yang gelap dong...
Soalnya kalau mau aku simpan di word musti merubah warna dulu... Kalau aku simpan di Notepad gak bisa pakai gambar & linknya... wookley...
wah ekarang lagi senang utak atik css ya?siippppppppppppp di tunggu yang lainnya
@Rock, silakan disimpan mas. :D
@Etc News, makasih mas sarannya, akan saya terapkan pada postingan selanjutnya,,,
@Mansuka, iya mas, lagi jatuh cinta ama CSS, :X
sepi nih dunia bLogging, Lagi pada nonton word-cup kaLi yah.
mohon maaf agak teLat ngabsen.
-----------------------
terima kasih tutornya, dapat mempercantik tampiLan bLog kita.
baLik Lagi, cuma mau ngingetin.
kaLo udah gateL mah, sementara digaruk aja duLu. wkwkwkwk.... piss ach (canda-red)
@om_rame, haha, si om pagi2 udah bercanda ne om,,,
keren sob tapi kalau photo sendiri bagus ga ya??
maaf baru datang..soalnya nungguin world cup..
oia udah up date nih
nice info sob..
image processing session...hmmm...nice info...
saya masih kurang faham nih...kalau foto dari PC gimana cara ngeblurnya..??
bisa langsung dicoba nih,makasih tipsnya
wow... mantap infonya, baru tahu juga...
salam kenal...
Blog ini "DOFOLLOW", Silakan tinggalkan komentar anda, bebas tapi sopan. Tidak kami anjurkan untuk mencantumkan link pada komentar serta memakai nama Anonymous.
Komentar yang bernada SPAM atau SARA akan kami hapus.
Post a Comment