Pengikut

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

Posting Komentar

  1. Agak rumit ya kalau tidak bisa bahasa html..
    :(
    sy coba dulu dah.

    smilepedia.blogspot.com

    BalasHapus
    Balasan
    1. 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

      Hapus
  2. Bisa diberi contohnya gak gan?? Screen Capture aja, jadi gue bisa ngerti apa kegunaanya, soalnya gue kurang ngerti gan. thanks

    BalasHapus
  3. mantap gan

    di tunggu kunjungan baliknya
    http://shinobi2304.blogspot.com

    BalasHapus
  4. Agan ada yg bisa bantu gak? Cara bikin tulisan sold out atau tersedia di pojok atas pakai blog. Seperti di www.lexoir.com

    BalasHapus
  5. bagus gan.... www.taaduders.blogspot.com

    BalasHapus
  6. kerenn ditunggu boss, mantaapp

    http://worldmovementclothing.blogspot.com/

    BalasHapus

Silahkan berkomentar, komentar sobat adalah inspirasi saya !!