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/AVvXsEg551_QohJZ7n7tHxEmNPyW9YuHv7NakQZOEEdg2oXIzy1mayn3Yqcm2GWocP6VSZyxLK1nMKxyO8d4iOS93VRjpNOwliGNnZRGgoTmH_adtk3KYqfAD2By62xrxD47FfjxdL-yuiaFtps/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/AVvXsEgeugprNuBuDaAb7C_x9lkX1YtMBwpKMp51t1QcAay0oXjpMN-bO3v0VVu4XE1Kb5WA7iAKDkN5fS-aT3TrqBpWENiUQRKuBndRW6LlaQ964UNje-VvFUenbBJCBTqWImvNpTzJ0gj3agg/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
Agak rumit ya kalau tidak bisa bahasa html..
BalasHapus:(
sy coba dulu dah.
smilepedia.blogspot.com
iya si gan lumayan rumit juga, tapi silahkan anda coba dulu, saya bantu do'a moga berhasil deh, tapi kalo ada kendala, sobat bisa komen lagi disini, mungkin saya bisa bantu. terimakasih
HapusBisa diberi contohnya gak gan?? Screen Capture aja, jadi gue bisa ngerti apa kegunaanya, soalnya gue kurang ngerti gan. thanks
BalasHapuscoba cari di google gan, maksih
HapusIya sip
BalasHapusAgan ada yg bisa bantu gak? Cara bikin tulisan sold out atau tersedia di pojok atas pakai blog. Seperti di www.lexoir.com
BalasHapusbagus gan.... www.taaduders.blogspot.com
BalasHapuskerenn ditunggu boss, mantaapp
BalasHapushttp://worldmovementclothing.blogspot.com/