JeritanBlog telah ditukar nama BelajarBlogs...
Home » » Cara Membuat Efek Image Opacity

Cara Membuat Efek Image Opacity

Cuba anda perhatikan gambar tersebut dan bawak mouse ke gambar tersebut



Itu adalah efek image opacity (opacity effect). Efek tersebut akan mampu mempercantik blog anda. Siapa yang ingin boleh ikuti tutorial dibawah ini:

Langkah 1
1. Login ke Blogger
2. Masuk ke Rancangan, Edit HTML
3. Cari kode </head>
4. Di atas / sebelum kode </head> pastekan kode berikut:


<style type='text/css'> a.opacity img { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; -khtml-opacity: 0.5;} a.opacity:hover img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; -khtml-opacity: 1.0; } </style>

5. Simpan

Langkah 2
1.Jika anda ingin letak gambar anda perlu tambahakan kode class="opacity" ,

Contoh:

Kode image awal:

<a href="http://1.bp.blogspot.com/_XoMK3ToWnac/........./blogger.jpg" imageanchor="1"

style="margin-left: 1em;"><img border="0" src="http://1.bp.blogspot.com /..... blogger.jpg" /></a>



Tambahkan class="opacity" menjadi:

<a class="opacity" href="http://1.bp.blogspot.com/_XoMK3ToWnac/........./blogger.jpg"

imageanchor="1" style="margin-left: 1em;"><img border="0" src="http://1.bp.blogspot.com /.....


blogger.jpg" /></a>


Semoga berjaya

7 ulasan:

  1. salam
    alhamdulillah saya dapat buat..
    terima kasih jeritan blog..
    moga success selalu

    BalasPadam
  2. wasalam...
    sama-sama..
    InsyaAllah

    BalasPadam
  3. boleh tak kalau efek dia keluar dengan perlahan supaya nampak lebih lembut.? seperti di blog ini.? http://k-fhatyah.blogspot.com/

    BalasPadam
  4. @Farah N
    itu mungkin function dari templates dia...memang dah ada

    BalasPadam