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/AVvXsEiGMGhKXCA8Mx14yPm7yL-lJkNBB0E4qdSrviYx6gUOtczTadYZiEFe7QWvTumSBaZ3s9-a2oEpcAm2ygWJwZ8Xodm21DW9uUfGrbzdVSy7MFOlR_B2r7JBIjhhTVIyo2abW2-RjYZmFw15/) 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/AVvXsEiGMGhKXCA8Mx14yPm7yL-lJkNBB0E4qdSrviYx6gUOtczTadYZiEFe7QWvTumSBaZ3s9-a2oEpcAm2ygWJwZ8Xodm21DW9uUfGrbzdVSy7MFOlR_B2r7JBIjhhTVIyo2abW2-RjYZmFw15/ |
 |
| URL : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibAgHr2-fhuUxB-wgR6MatyyzIAp-Trq8RmX2Q0EikcI2SbCgoZKe7cgBP3D_qpek_c09d7nLDp7LaHaaSRQItyutcA-2NliVvonpU4_G-gDvsNeSSc-2Mg-tCJhqRX3DXBINIOYs0iSc/s1600/efek-gulung1.gif |
 |
| URL : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNysT_GsPP1iJLeGJTRCRRxh3Npm8FhPsML_FWOTkpF4sct0wCNbvW1kQMhhop-Fjg6F4Kmfhs3xd7Bd-fXwsS-Ezjv-4kI5W1wU1qetKuLMu8upf2Sn7HGJap9FTQZGTb1UhtuRSj6cg/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'>KETERANGAN:
<a href='http://feedburner.google.com/fb/a/mailverify?uri=masterendi' target='_blank'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTq5Mcyzrx7bdDevqHW8yeGpTxVwc3YBbtJ3KOrLefnzm7fBcQM9X4SLdmoomlEWH3GFhs_2MF02dk-c1ThqVh-G-6fQoiWFLvil5RnwKABLKa1rb3KntPmuHeCSnfKd0640zMaQo8i9bm/'/>
<span class='msg_block'/>
</a>
</div>
Ganti URL warna biru dengan URL keinginan sobat misalnya alamat beranda blog, link buku tamu dll.
Kemudian Preview / pratinjau dulu sebelum di SAVE kalau sudah ok, SAVE..
Selamat menggulung.. hehe..
Tidak ada komentar:
Posting Komentar