You must enable Javascript in your browser to run or open this site.

Membuat Gambar Pada Artikel Menjadi Auto-Fade

Sudah beberapa minggu saya tidak mempostingkan artikel apapun ke web-web saya, karna dilalah komputer saya rusak karena power suplynya yang rusak. Maaf ya untuk teman teman saya yang saya tidak kunjungi sebelumnya selama komputer saya rusak. :(

Saya sebelumnya sudah pernah mempostingan sebuah artikel yang berjudul Gambar di Artikel dengan Tampilan Bayangan. Nah, cara itu merupakan salah satu untuk menjadi blogger yang bahagia. Tetapi rasanya kurang Optimal tanpa Auto-Fade ini.

Blog yang telah diberi cara Auto-Fade ini bila sobat mengupload gambar ke postingan, maka hasilnya jika cursor mengarah ke gambar uploadan tersebut, maka otomatis gambar tersebut akan berkabut entah hitam atau putih, tergantung background blog.

Contoh Gambar ini arahkan cursor :



Nah, sudah melihat bukan? Mau seperti itu? Ikuti cara-cara berikut:

~ Buka website www.blogger.com dan login dengan pass dan id.

~ Saat di dashboard klik edit html → centang expand widget → cari kode <head>

~ Letakan kode berikut dibawah kode tadi :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
Notice : Kalo udah ada kode seperti diatas sebelumnya, tak perlu meletakannya lagi.

~ Letakan kode berikut dibawahnya kode jquery tadi :
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.post img&quot;).fadeTo(&quot;slow&quot;, 1.0);
$(&quot;.post img&quot;).hover(function(){
$(this).fadeTo(&quot;slow&quot;, 0.5);
},function(){
$(this).fadeTo(&quot;slow&quot;, 1.0);
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.latest_img&quot;).fadeTo(&quot;slow&quot;, 1.0);
$(&quot;.latest_img&quot;).hover(function(){
$(this).fadeTo(&quot;slow&quot;, 0.5);
},function(){
$(this).fadeTo(&quot;slow&quot;, 1.0);
});
});
</script>
~ kalo sudah, klik save template.

Sekarang sobat telah menjadi blogger yang bahagia :D hehehe

11 comments

  1. thanks ya , gimana mahu buat apabila mouse menyentuh title post lalu title post akan seperti menyenget sedikit ? seperti blog enda fivers yg lama ?

    BalasHapus
  2. To apitrawrr : Klik ini http://farixsantips.blogspot.com/2010/12/css-tulisan-miring-atau-derajad.html ada disitu... pakai text transform..

    BalasHapus
  3. unik juga ya...sy save dulu sob...thanks atas infonya...

    BalasHapus
  4. tahu gak gi mana mahu menyembunyikan kotak follower ?

    BalasHapus
  5. saya tidak mempostingkannya sob, maaf :( tapi saya pernah mempostingkannya tentang follower dengan kode yang bisa di kombinasikan dengan cbox melayang :)

    BalasHapus
  6. Mungkin diatur angka javascriptnya.., saya lupa, waktu itu pernah bisa...

    BalasHapus
  7. boleh juga nih trik ... :)
    entar ta' coba aah ....

    BalasHapus
  8. To apitrawrr :Jika yg km mksd sperti buku tamu diblogku, mk jwbny aq bs

    BalasHapus
  9. To Shinobi : silahkan di cobain :)
    To Ilmu Pengetahuan Komputer : hehehe mantap deh sobat :)

    BalasHapus