Cara Membuat Efek Gambar Transparan Menjadi Terang di Blog


Artikel kali ini Saya akan membahas cara membuat efek gambar transparan atau gelap menjadi terang di blog ketika disentuh cursor mouse.
Efek pada gambar di blog memang dapat membuat pengunjung betah berlama-lama dan memperhatikan gambar sambil menyentuhnya serta membuat pengunjung pasti bertanya cara untuk membuatnya. Saya memiliki cara membuat efek ini yang bisa diaktifkan pada seluruh file gambar yang ada di setiap bagian blog. Untuk contohnya coba sorot gambar wanita cantik di bawah ini, boleh sentuh itunya, hehe.

Cara Membuat Efek Gambar Transparan Menjadi Terang di Blog

Cara membuatnya:

  • Log In ke Blogger, jika sudah
  • Pilih Template → Edit HTML 
  • Cari kode </head>, dan masukan script di bawah ini di atas </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/><script type='text/javascript'>$(document).ready(function() {$(&#39;img&#39;).fadeTo(&#39;medium&#39;, 0.5);$(&#39;img&#39;).hover(function() {$(this).fadeTo(&#39;medium&#39;, 1.0);}, function() {$(this).fadeTo(&#39;medium&#39;, 0.5);});});</script>

  • Simpan dan lihat hasilnya.

Perhatian:

  • Jika dalam template, telah terdapat file jquery 1.5.2 (teks warna merah), maka script warna merah tidak perlu dipasang kembali
  • Teks warna hijau, merupakan tingkat transparansi gambar sebelum dan setelah tersentuh kursor
  • Teks warna biru, merupakan tingkat transparansi gambar saat tersentuh kursor.

Update:

  • Anda bisa juga menggunakan CSS di bawah ini untuk daerah postingan dan letakkan di atas kode ]]></b:skin>

.post img {opacity: 0.5;}
.post img:hover {opacity:1.0;}


Itulah artikel Cara Membuat Efek Gambar Transparan Menjadi Terang di Blog. Semoga bermanfaat untuk kalian.

Belum ada Komentar untuk "Cara Membuat Efek Gambar Transparan Menjadi Terang di Blog"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Tekan close (x) 2 kali untuk menutup, jangan lupa Berlangganan

Masukkan Email aktif untuk update artikel via email :

Delivered by FeedBurner

×