Salam blogger, nah kali ini saya akan membahas mengenai Cara Membuat Page Flip Di Pojok Kanan Atas blog, dan page flip itu sendiri mempunyai banyak fungsi untuk sebuah blog. Fungsi
dari page flip ini banyak macam, bukan hanya untuk subscribe postingan
blog, tapi juga bisa kita gunakan untuk banyak hal, seperti iklan atau
yang lainnya, jadi jika sobat ingin memperkenalkan suatu gambar atau artikel, sobat tinggal menyimpan gambar tersebut di page flip yang terletak di pojok kanan atas.
Nah jika sobat tertarik untuk membuatnya, ikuti langkah-langkah dibawah ini :
1. Login ke account blogger sobat
2. klik menu Template
3. kemudian pilih Edit Html
4. pilih lanjutkan untuk masuk ke Setup Html
5. setelah masuk jangan lupa centang kotak kecil di pojok kiri yang
bertuliskan "expand template widget"
6. lalu sobat cari kode <b:skin><![CDATA[, gunakan ctrl+f agar lebih mudah
7. nah setelah ketemu sobat copy kode dibawah ini dan letakan di atas kode
<b:skin><![CDATA[, ingat harus tepat diatasnya
<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>
8. kemudian sobat cari lagi kode ]]></b:skin>, lalu sobat copy paste kode
dibawah ini dan simpan diatas kode ]]></b:skin>
#pageflip {
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTC3NDaarlUyOl8awKadl8wX9WCNk_aH3afBocmirvJn8tCvTQ0d2Pzmpuj3XaySaY0PCwouNeSFLpVepGTPk7rvtcVBnQs9X94BvXZcx1IGtq9PvveJc33sVdbcbK_fuPpyrDkkAe6Hc/s1600/subscribe.png)
no-repeat right top;
}
Catatan: sobat bisa mengganti url gambar tersebut dengan gambar yang
sobat inginkan
9. terakhir sobat cari lagi kode <body>, lalu sobat copy paste kode dibawah
ini dan simpan di atas kode <body>
<div id='pageflip'>
<a href='http://boytriks.blogspot.com/feeds/posts/default'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkJa1GnfoaZt_6CGFi2bcYxFfbB3wO-3CU_1eUs9BaauysedraRW8faE2C1Qu4CcCiatoq9LeX4tG_RA3B8MW01h81EZipfrwM9MJdlYZ9NhLuCNiLhTF7ZjeOc1sTKpY0UCMXsX4VSzA/s1600/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>
Catatan: sobat ganti url diatas dengan url blog sobat
10. simpan Template
Nah itulah trik blogger
membuat page flip, jika sobat punya sesuatu yang ingin sobat tanyakan,
sobat tinggalkan saja komentar pada kotak komentar dibawah ini.
Selamat mencoba dan semoga bermanfaat
Tidak ada komentar:
Posting Komentar