Cara Membuat Halaman Blog Melipat Secara Otomatis | Tips Blogspot | Membuat Halaman Melipat >>> Suatu
ketika saya lagi ngenet tiba-tiba saya menemukan suatu web yang unik
tampilan halamannya. Uniknya tuh kalau kita mengarahkan kursor mouse
kita di bagian pojok kanan atas halaman web tersebut, maka halaman
tersebut akan kelipat atau kebuka, namun hanya sebagian kecil saja dan
di dalamnya terdapat gambar (disesuaikan) yang biasanya kalau diklik
akan diarahkan ke suatu halaman lain seperti halaman RSS blog ataupun
bisa berupa halaman lainnya, Untuk membuat halaman blog teman-teman
seperti di atas caranya gampang, Berikut Cara Membuat Halaman Blog
Melipat :
- Login ke blogger dengan ID anda.
- Klik Tata Letak.
- Klik Edit HTML.
- Klik Expand widget template.
- Cari kode <b:skin><![CDATA[
- Kalau sudah ketemu copy kode dibawah ini diatas kode <b:skin><![CDATA[
<script src='http://sites.google.com/site/software2iqbalinc/javascript/script_ditunjuk_ngelipet_t4belajarblogger.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>
- Lalu cari lagi kode ]]></b:skin> Dan letakkan kode berikut tepat di atasnya. #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/AVvXsEgEGdda1Yqm3O30WvzG5RJJuyj4ZH7Gj_TjoOxWrErvto2TeD0yjzR38TvzA7dHESXLqiLfuZ_Ty9c5UH1UNhFmyljgX_2Vw2lrUlLSLoEbaRjX0j-cboh54zj-akE8wBPd7O5DARbr4tFG/) no-repeat right top;
text-indent: -9999px;
}
- Lalu cari lagi kode <body> Dan letakkan kode berikut tepat di dibawahnya. <div id='pageflip'>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=tutorialbloggingdiblogger'target='_blank'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguX7-MnAsE-eAzYUzgnsiEMprFWc33ez_wjGZSFKfRsuvK7vxLwJJ3vNDutFqzd4JrBccRaF3fUiKiBb8BEiDwGTziwZZHXzr2kHbUo2NjmbHLcPpKFiAwm1z1x26tUGKyjdmWxoJd9IDj/'/>
<span class='msg_block'/>
</a>
</div>
- Anda bisa mengganti warna merah dengan Link yang anda inginkan. Saran saya Link RSS atau link berlangganan.
- Simpan template.
- Selesei.
- Sekarang silahkan lihat blog anda, bagaimana....baguskan?
- Untuk mengganti gambar dinding, sobat bisa mengganti URL berikut : #pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEGdda1Yqm3O30WvzG5RJJuyj4ZH7Gj_TjoOxWrErvto2TeD0yjzR38TvzA7dHESXLqiLfuZ_Ty9c5UH1UNhFmyljgX_2Vw2lrUlLSLoEbaRjX0j-cboh54zj-akE8wBPd7O5DARbr4tFG/) no-repeat right top;
text-indent: -9999px;
}