Cara membuat efek gulungan disudut blog -- Atau dengan kata lain membuat efek seoalah-oleh menggulung atau terlipat pada sudut blog.
Cara ini mudah saja sebenarnya, seperti biasa hanya bermain script dengan perintah tertentu sehingga terciptalah efek gulungan disudut blog sesuai dengan yang kita inginkan.
Berikut adalah Cara membuat efek gulungan disudut blog :
Cara ini berlaku untuk pengguna blogspot. Pertama sobat login ke blog sobat --> Edit HTML --> beri centang expand widget template. Lalu sobat cari kod <b:skin><![CDATA[ kemudian sobat copy kod dibawah dan letakkan diatasnya.
<script src='http://trikblogger.googlecode.com/files/script_lipat_halaman_trikblogger.js
' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({width: '307px',height: '319px'}, 500);
} , function() {
$("#pageflip img").stop()
.animate({width: '50px',height: '52px'}, 220);
$(".msg_block").stop()
.animate({width: '50px',height: '50px'}, 200);
});
});
</script>
Jika sudah, cari lagi kod ]]></b:skin> untuk membuat syle CSSnya, copy kod dibawah letakkan diatas ]]></b:skin>
#pageflip {KETERANGAN :
position: relative;
}
#pageflip img {
border: none;
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs7rPrfR_l1xoVPHK0FgwFbRmisNmidpRRyMbWyugDfmosuImFKqpOUhw5JK8UmAvrC1Jy_xQpLZQytMINxFQ5f_Kb6tXFvCdgeUxYBzTp4Jhew64oBwcAAuPSMEMruoz0VLoWIkYJIKtC/) no-repeat right top;
text-indent: -9999px;
}
- Warna biru adalah URL gambar backgroundnya, sobat bisa menggantikan dengan background lain sesuka hati sobat. Dibawah saya sudah menyiapkan beberapa background alternatif untuk sobat silahkan dipilih :
 |
| URL : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs7rPrfR_l1xoVPHK0FgwFbRmisNmidpRRyMbWyugDfmosuImFKqpOUhw5JK8UmAvrC1Jy_xQpLZQytMINxFQ5f_Kb6tXFvCdgeUxYBzTp4Jhew64oBwcAAuPSMEMruoz0VLoWIkYJIKtC/ |
 |
| URL : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKJp1gQ9zuLJ9Cpt6XeJEh_aC1YaRA1fg49HMSL3v6QVetROWTh0MANsODbbE33LIe0TjTlgApF9gcw0Zc0z5YhLvMyZeXerMmcZeLKhOB9FOHS0AMb8AGa4mXq-CNHo_xqAcCXo38myw/s1600/efek-gulung1.gif |
 |
| URL : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0QIOmzXlcD-Pn8jwTx4HYsTx1WnErcCneAtSKTMmm2TWkjALB4jIsh3hwtc9K3jWmyqt_yQ-JSeV2HQEFkCkHSfPKpAq2b0vn_VbGI6Xl6NtJofde6RI0UO91rFGIWKam2xmvbL6PMoo/s1600/efek-gulung2.gif |
Saya membuatnya melalui photoshop, sobat tertarik untuk mengeditnya silahkan download file PSD disini
Terakhir cari kod <body> dan copy lagi kod dibawah letakkan dibawahnya.
<div id='pageflip'>
<a href='http://mau-software.blogspot.com' target='_blank'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNmLN75f-gczbvX3oXIF8PWGFEiPG2bbFm3AJG7QibvjP2OIAvoJ5dyCuVUpa902GDj28TbwFFUL_xkQz6eb2wn1CBIjRKvJ24kS1XQiI12HI5cLJVIULLF_gfpWZnpI0ECDuI59XA9qk7/'/>
<span class='msg_block'/>
</a>
</div>
Kemudian Preview / pratinjau dulu sebelum di SAVE kalau sudah ok, SAVE..
Selamat menggulung.. hehe..
0 komentar:
Posting Komentar