Minggu, 11 Maret 2012

Membuat Efek Blur Pada Foto Otomatis

Tutorial blog kali ini mengenai membuat efek blur pada foto otomatis. Mungkin banyak dari para blogger yang mencari tutorial ini dan mungkin juga belum dapat. Saya akan menjelaskan sedikit mengenai efek blur pada foto. Efek blur ialah tutorial untuk memberi efek blur jika mouse kita, kita arahkan pada foto blog yang sudah terpasang kode tersebut. Efek ini cukup bagus jika diterapkan di blog kita dan tidak begitu memberatkan loading blog. Efek ini berjalan secara otomatis pada semua foto yang ada di blog sobat. Jika sobat ingin memasang tutorial  mengenai membuat efek blur pada foto otomatis ikuti langkah berikut ini.


1. Login ke blogger.
2. Masuk ke tab Rancangan.
3. Pilih Edit HTML dan masukkan kode dibawah ini tepatnya setelah kode ]]></b:skin> :
4. Lebih mudahnya untuk mencari kode tersebut tekan F3 dan pastekan kode yang dicari pada kolom yang muncul. Spasi sangat berpengaruh pada pencarian.

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.efekanimasi&quot;).fadeTo(&quot;slow&quot;, 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(&quot;.efekanimasi&quot;).hover(function(){
$(this).fadeTo(&quot;slow&quot;, 0.6); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo(&quot;slow&quot;, 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.post img&quot;).fadeTo(&quot;slow&quot;, 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(&quot;.post img&quot;).hover(function(){
$(this).fadeTo(&quot;slow&quot;, 0.6); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo(&quot;slow&quot;, 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>

4. Simpan.
5. Refresh blog dan nikmati hasilnya. . .

Hasilnya akan seperti ini . . .
Sebelum di beri kode

Sesudah diberi kode

Itulah tutorial tentang  membuat efek blur pada foto otomatis  semoga tutorial ini bisa membantu anda. Selamat mencoba dan semoga berhasil . . .

Tidak ada komentar:

Posting Komentar