adsense link 728px X 15px

Thursday, June 10, 2010, 

Membuat efek blurSetelah 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.

  1. "Login" seperti biasa di acount blogger anda
  2. Klik "Tata Letak", lalu klik "Edit HTML"
  3. 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>
  4. 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:

Aguestri said...  on  June 10, 2010 at 9:51 AM

Wah komentar pertama nich, makasih ya sob atas infonya hehehe, salam persahabatan sob

rizan said...  on  June 10, 2010 at 3:57 PM

jadi gambar misterius ni sobat.hehe
tips yang menarik ni,maturtengkiyu ya :)

imtikhan said...  on  June 10, 2010 at 6:56 PM

halo sobat
berkunjung nich
terima kasih

mel said...  on  June 10, 2010 at 10:27 PM

efek blur bisa juga lewat sini yah,,setau aku lewat photoshop .....

ryankampur said...  on  June 11, 2010 at 12:21 AM

kirain sotosop aja yg bisa blur... hehehe

Masda said...  on  June 11, 2010 at 1:10 AM

@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...

Rock said...  on  June 11, 2010 at 3:10 AM

Wahhh... keren nich...
Aku simpan dulu kodenya sob...

Etc News said...  on  June 11, 2010 at 3:13 AM

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...

mansuka said...  on  June 11, 2010 at 3:42 AM

wah ekarang lagi senang utak atik css ya?siippppppppppppp di tunggu yang lainnya

Masda said...  on  June 11, 2010 at 6:56 AM

@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

om_rame said...  on  June 11, 2010 at 12:10 PM

sepi nih dunia bLogging, Lagi pada nonton word-cup kaLi yah.
mohon maaf agak teLat ngabsen.
-----------------------
terima kasih tutornya, dapat mempercantik tampiLan bLog kita.

om_rame said...  on  June 11, 2010 at 1:48 PM

baLik Lagi, cuma mau ngingetin.
kaLo udah gateL mah, sementara digaruk aja duLu. wkwkwkwk.... piss ach (canda-red)

Masda said...  on  June 11, 2010 at 1:56 PM

@om_rame, haha, si om pagi2 udah bercanda ne om,,,

hendro-prayitno said...  on  June 11, 2010 at 2:44 PM

keren sob tapi kalau photo sendiri bagus ga ya??
maaf baru datang..soalnya nungguin world cup..
oia udah up date nih

ph-internet said...  on  June 11, 2010 at 2:48 PM

nice info sob..

Tour, Food, and Health said...  on  June 11, 2010 at 6:12 PM

image processing session...hmmm...nice info...

rizal said...  on  June 11, 2010 at 9:42 PM

saya masih kurang faham nih...kalau foto dari PC gimana cara ngeblurnya..??

angger said...  on  June 11, 2010 at 10:16 PM

bisa langsung dicoba nih,makasih tipsnya

Bryan & Kefri said...  on  June 12, 2010 at 12:05 AM

wow... mantap infonya, baru tahu juga...
salam kenal...

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

 

It's Me

My Photo
Masda
Seorang blogger "KOTA GADIS" yang selalu penasaran dengan sesuatu hal yang baru. Belajar, belajar, dan terus belajar serta berusaha untuk menerapkannya. Karena menurut saya "Ilmu itu untuk diterapkan bukan untuk dipelajari".

Facebook Twitter
View my complete profile

Exchange Link

MasdaZine

Followers