Posted by : Karta_Jaya

Efek blur adalah membuat gambar yang disorot dengan mouse menjadi blur atau transparan, kemudian apabila pointer mouse sudah lewat maka gambar akan kembali seperti semula. Sangat menarik bukan?. Mungkin sobat tbelum mengerti akan maksud dari artikel ini. Nah untuk itu sobat blogger harus mencobanya.
Oke kita lansung saja Membuat Efek Blur pada Gambar.

1. Login ke blogger dengan akun sobat
2. Pilih Rancangan
3. Kemudian pilih Edit HTML
4. Cari kode ini ]]></b:skin> dan letakkan kode berikut diBawah kode ]]></b:skin>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".efekanimasi").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".efekanimasi").hover(function(){
$(this).fadeTo("slow", 0.6); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>
5. Lalu Simpan Template
Nah sekarang kita dapat memilih untuk membuat efek blur pada gambar tertentu pada postingan. Kita juga dapat membuat efek blur pada semua gambar yang terdapat pada blog.
Sekarang tinggan piliha nada.

Cara Membuat Efek Blur pada Gambar Tertentu Pada Postingan.
Caranya adalah:
Tinggal menyisipkan kode class="efekanimasi" pada gambar yang akan kita beri efek Blur.
Contoh kode gambar Biasa:
<a href="http://kelolablog.blogspot.com" target="_blank">
<img border="0" width="300" title="TIPS dan TRIK BLOG" src="http://i764.photobucket.com/albums/xx289/kartajaya/12.gif" height="43"/></a>
Kode Gambar yang diberi efek Blur:
<a href="http://kelolablog.blogspot.com" target="_blank">
<img border="0" width="300" title="TIPS dan TRIK BLOG" src="http://i764.photobucket.com/albums/xx289/kartajaya/12.gif"class="efekanimasi" height="43"/></a>

Memberi Efek Blur pada Semua Gambar yang Terdapat pada Blog Secara Otomatis.
Caranya adalah:
1. Silahkan masuk ke Menu Rancangan, dan pilih Edit HTML lagi
2. Letakkan kode berikut di bawah kode ]]></b:skin> atau di bawah kode yang sudah kita letakkan tadi.
<script type='text/javascript'>
$(document).ready(function(){
$(".post img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".post img").hover(function(){
$(this).fadeTo("slow", 0.6); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>
3. Klik Simpan Template dan selesai

Semoga bermanfaat.

{ 3 komentar... read them below or Comment }

  1. Akhirnya nemu yang paling simpel, makasih banyak :)

    BalasHapus
  2. terimakasih banyak buat tutorialnya, sangat menarik..

    http://tokoonlineobat.com/obat-insomnia-alami/

    BalasHapus

Tukaran Link Yooo...Silahkan Masukkan Nama dan URL Blog Kamu di Dalam Kotak di Bawah Ini. Silahkan Konfirmasi Saya di HUBUNGI KAMI untuk Melakukan Link Balik ke Blog Anda. Terima Kasih

Terima Kasih Telah Bertukaran Link Dengan Kami. Secepatnya Akan Kami Link Balik

Welcome to My Blog

Blog Archive

Tips Blog


Silahkan Anda Baca Artikel Kami, Jangan Lupa Tinggalkan Jejak Anda di Kolom Komentar.





Page Rank Checker Logo Forantum I Blogging Is My Life Photobucket Blogger Help Templates Widgets SEO Tips aRvaNs Site's WAHYOKU BLOG

Jika Sobat Menghapus Link TTB dari blog sobat, maka TTB-pun akan Berbuat hal yang sama. Adil kan?




Silahkan Anda Klik Salah Satu Link Iklan Di Atas


Widget Blog


Silahkan Anda Baca Artikel Kami, Jangan Lupa Tinggalkan Jejak Anda di Kolom Komentar.


- Copyright © TIPS dan TRIK BLOG -Robotic Notes- Powered by Blogger - Designed by Johanes Djogan -