Iklan 300 x 250

Random Post

Recent Post

 

Cara Membuat Effect Page Peel Dengan jQuery

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
#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(http://i1199.photobucket.com/albums/aa462/nibinoku/Nobinoku%20album%20menu/subscribet.png) no-repeat right top;
}
5. Selanjutnya cari kode </head> dan simpan script berikut diatasnya.
<script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .msg_block&quot;).stop()
.animate({
width: &#39;307px&#39;,
height: &#39;319px&#39;
}, 500);
} , function() {
$(&quot;#pageflip img&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;52px&#39;
}, 220);
$(&quot;.msg_block&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;50px&#39;
}, 200);
});
});
</script>
<script type='text/javascript'>
if (window.jstiming) window.jstiming.load.tick(&#39;headEnd&#39;);
</script>
6. Langkah terakhir cari lagi kode <body> kemudian copas kode dibawah ini dan taruh di dibawahnya.
<div id='pageflip'>
<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>
7. Selanjutnya klik Simpan template
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:

Nobi Noku Ditulis oleh : Arga Anggriawan | BLOG : This Is My Art
Dalam Judul : Cara Membuat Effect Page Peel Dengan jQuery
Dalam Kategori :
Saya hanyalah blogger pemula yang ingin belajar dan berbagi dengan sahabat, Semua artikel blog ini bersumber dari pengalaman saya dari dunia blogger.

5 komentar:

sibutiz mengatakan... Reply Comment

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.

:a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n: :o: :p: :q: :r: :s: :t: :u: :v: :w: :x: :y: :z:

Poskan Komentar

Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda.Blog ini Blog Do Follow,Trims atas kerja samanya

 
 
 

Temukan Kami Dalam FB

Sahabat Blogger

http://nobinoku.blogspot.com/

Tukeran Link Yuk..!! Silahkan copy kode di atas..!!
Saya akan segera link balik..!! Link & Banner Teman
powered by PRBbutton Powered by  MyPagerank.Net backlink Site Meter http://www.wikio.com Free Automatic Backlink
Check Google Page Rank
Cerita Seks Panas Dewasa 17Tahun
free counters
 
Copyright 2010 - 2011 © This Is My Art | Didukung Oleh : Blogger
Template Name : Evolution Magazine Template | Modification by : Argabluesky