Text Resizer: Click for Resizer
Assalamualaikum sobat blogger. Pada tutorial kali ini saya share ilmu lagi kepada sobat tentang Cara Membuat Effect Page Peel Dengan jQuery. Sebenarnya apa sih page peel itu??? Page Pell adalah efek untuk membuat bagian pojok atas blog seakan-akan merupakan sebuah kertas yang dapat tertekuk, dan akan terbuka jika di disorot oleh mouse. Untuk Contohnya dapat sobat arahkan mouse pada pojok kanan atas blog saya. Atau dapat sobat lihat pada gambar dibawah ini.
Terlihat bukan effect page peelnya. Tertarik untuk membuatnya???? Untuk membuat effect page peel ini mudah kok sobat ikuti saja langkah-langakah dibawah ini.
1. Log in dulu ke blogger
2. Pilih Rancangan kemudian Edit HTML
3. Jangan lupa download template lengkap untuk jaga-jaga
4. Selanjutnya cari kode ]]></b:skin> dan simpan script berikut diatasnya
8. Selesai effect page peel sudah terpasang di blog anda
Terlihat bukan effect page peelnya. Tertarik untuk membuatnya???? Untuk membuat effect page peel ini mudah kok sobat ikuti saja langkah-langakah dibawah ini.
1. Log in dulu ke blogger
2. Pilih Rancangan kemudian Edit HTML
3. Jangan lupa download template lengkap untuk jaga-jaga
4. Selanjutnya cari kode ]]></b:skin> dan simpan script berikut diatasnya
#pageflip {5. Selanjutnya cari kode </head> dan simpan script berikut diatasnya.
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(http://i1199.photobucket.com/albums/aa462/nibinoku/Nobinoku%20album%20menu/subscribet.png) no-repeat right top;
}
<script type='text/javascript'>6. Langkah terakhir cari lagi kode <body> kemudian copas kode dibawah ini dan taruh di dibawahnya.
$(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>
<script type='text/javascript'>
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>
<div id='pageflip'>7. Selanjutnya klik Simpan template
<a href='http://feeds.feedburner.com/nobinoku'><img alt='' src='http://i1199.photobucket.com/albums/aa462/nibinoku/Nobinoku%20album%20menu/pageflip.png'/></a>
<div class='msg_block'/>
</div>
8. Selesai effect page peel sudah terpasang di blog anda
Keterangan : Sobat dapat mengganti alamat http://feeds.feedburner.com/nobinoku dengan alamat feed burner anda. Selain itu sobat dapat mengganti backround page peelnya sesuai dengan template anda.
Akhir kata semoga tutorial kali ini bermanfaat.....
Artikel Terkait:
jQuery
- Cara Memindahkan Gambar Dengan jQuery
- Chatbox Bergaya Panel Slide Vertikal dengan jQuery
- Membuat Slider Zinmag Primus
- Membuat Daftar Isi Blog Dengan Efek jQuery Accordion
- Membuat Sliding Login/Register Form Panel di Blogspot Dengan jQuery
- Membuat Info Panel Slide Vertikal dengan jQuery
- Resize Font atau teks Dengan Jquery
- Membuat Back To Top Dengan Sentuhan jQuery
- Membuat Recent Post Dengan Animasi jQuery
- Memasang Efek jQuery Image Zoom
- Membuat Slider Content Dengan Animasi jQuery
Ditulis oleh : Arga Anggriawan | BLOG : This Is My ArtDalam Judul : Cara Membuat Effect Page Peel Dengan jQuery
Dalam Kategori : jQuery
Saya hanyalah blogger pemula yang ingin belajar dan berbagi dengan sahabat, Semua artikel blog ini bersumber dari pengalaman saya dari dunia blogger.
5 komentar:
wach,mantabs banget kawan..
kebetulan saya juga sudah pasang efek ini....
mohon dukungan..
makasih.
@sibutiz
ok sobat thanks ya udah berkunjung di blog sederhana ini... :m:
eh sob , q mo nanya nih. kamu tau ga supaya kotak postingan dan kotak sidebar terpisah-pisah. mungkin yang kaya punyamu itu. q pengen kotak sidebar q ada dua garis kaya kotak related post milikmu itu loh sob, kamu bisa bantu aq g' sob? mohon bantuannya sob.....
trims...
by: http://komikblaze.blogspot.com
@komik blaze crew
mungkin tuorial kali ini dapat membantu sahabat baca http://nobinoku.blogspot.com/2010/10/merubah-ukuran-dan-posisi-sidebar.html
mas itu untuk peletakannya, yang saya mksud adalah :
membuat kotak postingan menjadi kotak-kotak terpisah,dan begitu juga dengan sidebar.(mas punya saya hanya sidebar aja yang terpisah-pisah kotaknya dan tmpilan sidebarnya pun tidak rapi kaya punya mas.
kalo bisa sih tolong di cek ke blog q( komikblaze.blogspot.com )
mohon solusinya yah mas....
trims.
Posting Komentar
Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda.Blog ini Blog Do Follow,Trims atas kerja samanya