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.
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>
' 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 {
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/AVvXsEgu-VNwP7vS-8Wpb5J3dCZcdWmeYCaO1v1kE24K9Vid5ymOtjXx-_Kr-fZl-LOhg0G4iDEGyW-9-MCyAyWC8LmECDEuS-sj3odkVbQTxVBQbvmbijZu6kHgr1KHmERCuY0yRfnzv40vLHcG/) no-repeat right top;
text-indent: -9999px;
}
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/AVvXsEgu-VNwP7vS-8Wpb5J3dCZcdWmeYCaO1v1kE24K9Vid5ymOtjXx-_Kr-fZl-LOhg0G4iDEGyW-9-MCyAyWC8LmECDEuS-sj3odkVbQTxVBQbvmbijZu6kHgr1KHmERCuY0yRfnzv40vLHcG/) no-repeat right top;
text-indent: -9999px;
}
KETERANGAN :
Warna merah adalah
URL gambar backgroundnya,
sobat bisa menggantikan dengan background lain sesuka hati sobat.
URL gambar backgroundnya,
sobat bisa menggantikan dengan background lain sesuka hati sobat.
Terakhir cari kode
<body>
dan copy lagi kod
dibawah letakkan dibawahnya.
dan copy lagi kod
dibawah letakkan dibawahnya.
<div id='pageflip'>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=masterendi' target='_blank'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBrb23Dc7TW02hSsspvrG0WQSZ9_srZQSJAt7nc5XSNstSsjUYKcax4c9BK_trv-XYDzE9I_U_SRwm6VXSQp3Hq-4ZU5CC95L2AGIZa0FVuO2DqvkLlvrqUB0KpxLpcNNNMn-Bk4tW5tPO/'/>
<span class='msg_block'/>
</a>
</div>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=masterendi' target='_blank'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBrb23Dc7TW02hSsspvrG0WQSZ9_srZQSJAt7nc5XSNstSsjUYKcax4c9BK_trv-XYDzE9I_U_SRwm6VXSQp3Hq-4ZU5CC95L2AGIZa0FVuO2DqvkLlvrqUB0KpxLpcNNNMn-Bk4tW5tPO/'/>
<span class='msg_block'/>
</a>
</div>
KETERANGAN:
Ganti URL warna biru dengan
URL keinginan sobat misalnya alamat beranda blog.
Kemudian
Preview / pratinjau dulu
sebelum di SAVE
kalau sudah ok, SAVE..
Selamat menggulung.. Gitu saja repotttttt
WOKWOWKWOWKOWK
Selamat mencoba,salam sukses.
Ganti URL warna biru dengan
URL keinginan sobat misalnya alamat beranda blog.
Kemudian
Preview / pratinjau dulu
sebelum di SAVE
kalau sudah ok, SAVE..
Selamat menggulung.. Gitu saja repotttttt
WOKWOWKWOWKOWK
Selamat mencoba,salam sukses.
Posts
0 comments:
Post a Comment