Hello sobat blogger kita berjumpa kembali di blog Dewata ini. Dan kali ini dewata akan share tentang cara Membuat Halaman Blog Melipat Secara Otomatis Artikel ini sich sudah lama ada sebelum Dewata mempostingnya, Tetapi saya post kembali aja buat sekedar simpanan wkwkwkwk..! Artikel ini juga saya dapat dari blog tetangga sewaktu seharian blogwalking.
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 Melipat 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 dan paste diatas kode <b:skin><![CDATA[
- Lalu cari lagi kode ]]></b:skin>
- Dan letakkan kode berikut tepat di atasnya ]]></b:skin>
- Lalu cari lagi kode <body>
- Dan letakkan kode berikut tepat di dibawahnya.<body>
- Anda bisa mengganti warna Biru dengan Link yang anda inginkan. Saran saya Link RSS atau link berlangganan.
- Simpan template.
- Selesei.
- Sekarang silahkan lihat blog anda, bagaimana....baguskan?
<script src='http://ferdana.googlecode.com/files/dewata-lipat.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>
#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(http://lh5.ggpht.com/_RVpTV2JOOxA/S8iu18jZiCI/AAAAAAAACyo/e0oaiHtbMf0/berlangganan_kelipat.png) no-repeat right top;
text-indent: -9999px;
}
<div id='pageflip'> <a href='http://feedburner.com/Dewata' target='_blank'> <img alt='' src='http://lh3.ggpht.com/_RVpTV2JOOxA/S8iu2CHC7SI/AAAAAAAACys/nYe088a8tkc/gambar_kelipat.png'/> <span class='msg_block'/> </a> </div>
sangat membantu sob tutorialnya. terimakasih
BalasHapus@. BoWo, Sama-sama sob. thanks jga atas kunjungannya.
BalasHapussip... kalau di wordpress bisa nggak mas..???
BalasHapus