Assalamualaikum, kali ini saya akan berbagi tips blogging, yaitu membuat Page Flip. Ok langsung saja, caranya :
1. login ke account blogger sobat
2. Pilih tata letak, pilih edit html, pilih expand template widget
3. Cari kode <b:skin><![CDATA[ dan copy-paste kode di bawah ini tepat di atas
kode <b:skin><![CDATA[
<script
src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$("#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>
<script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$("#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>
4. Kemudian sobat copy lagi kode CSS di bawah ini, dan paste
di atas kode ]]></b:skin>
#pageflip {
position: relative;
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px;
height: 52px;
z-index: 99;
position: absolute;
right: 0;
top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px;
height: 50px;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
background: url(https://lh3.googleusercontent.com/-LwoVbxUMKFs/TXc3SM8XcvI/AAAAAAAABb4/RuzGqYFEfIw/s1600/subscribe.png) no-repeat right top;
}
float: right;
}
#pageflip img {
width: 50px;
height: 52px;
z-index: 99;
position: absolute;
right: 0;
top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px;
height: 50px;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
background: url(https://lh3.googleusercontent.com/-LwoVbxUMKFs/TXc3SM8XcvI/AAAAAAAABb4/RuzGqYFEfIw/s1600/subscribe.png) no-repeat right top;
}
*Sobat bisa menggati kode yang
berwarna merah dengan kode gambar yang sobat
inginkan.
5. Sekarang masih dalam suasana edit HTML template, sobat paste kode di bawah ini tepat di atas kode <body>
5. Sekarang masih dalam suasana edit HTML template, sobat paste kode di bawah ini tepat di atas kode <body>
<div
id='pageflip'>
<a href='http://candacinta.blogspot.com/feeds/posts/default'>
<img alt='' src='https://lh3.googleusercontent.com/-Nf59CtGIBq4/TXc4EUWGIdI/AAAAAAAABb8/qE8ORM991Ik/s1600/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>
<a href='http://candacinta.blogspot.com/feeds/posts/default'>
<img alt='' src='https://lh3.googleusercontent.com/-Nf59CtGIBq4/TXc4EUWGIdI/AAAAAAAABb8/qE8ORM991Ik/s1600/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>
Sobat ganti kode feeds di atas dengan kode feeds blog sobat, kemudian simpan template sobat.
0 komentar:
Post a Comment
Silahkan berkomentar sesuai kesan anda, tetapi jangan tinggalkan norma-norma kesopanan. Syukron