Teman-teman juga bisa menemukannya di blog ini. Yang seperti ini lho...
UPDATE....
Untuk membuat halaman blog teman-teman seperti di atas caranya gampang. Ikuti langkah2 berikut:
1. Login ke blogger >> Tata Letak >> Edit HTML >> Expand widget template
2. Cari 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>
<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>
3. Lalu cari lagi kode
| ]]></b:skin> |
#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;
}
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;
}
4. Cari kode
| <body> |
<div id='pageflip'>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=tutorialbloggingdiblogger' target='_blank'>
<img alt='' src='http://lh3.ggpht.com/_RVpTV2JOOxA/S8iu2CHC7SI/AAAAAAAACys/nYe088a8tkc/gambar_kelipat.png'/>
<span class='msg_block'/>
</a>
</div>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=tutorialbloggingdiblogger' target='_blank'>
<img alt='' src='http://lh3.ggpht.com/_RVpTV2JOOxA/S8iu2CHC7SI/AAAAAAAACys/nYe088a8tkc/gambar_kelipat.png'/>
<span class='msg_block'/>
</a>
</div>
*Ganti yang berwarna Ijo dengan Link yang anda inginkan. Saran: Link RSS atau
link berlangganan.
5. Simpan hasil kerjaan anda.
Sekarang silahkan lihat blog anda, bagaimana....baguskan?
Untuk mengganti gambar dinding, teman-teman bisa mengganti URL berikut:
#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;
}
Semoga Bermanfaat []
Sumber Trik:[sohtanaka.com]
Tags: cara membuat page peel effect, cara membuat halaman kelipat, membuat halaman yang melipat, cara membuat page peel effect dengan jQuery, tutorial page peel effect
91 comments
pertamax..... akan rizky coba dulu
mantab! ane sedot bos, buat simpenan. hehehe :D
syukron, jazaakumullahu khrn sdh berbagi ilmu, anaa save ya!
@Indahnya Berbagi: Wa iyyaakum. Monggo...saya senang kalau sobat juga bisa ikut berbagi/sharing...:16
:07
ini gan ane gak jalan scriptnya...
yang lipet ne..
coba liat di blog ane...
@silent_guest: O...itu sob maksudnya...? Kalau untuk scriptnya dah jalan tuh...(tapi kok yg saya lihat malah gambar modern warfare yaaa...)Oh iya coba diperhatikan baik2 ya langkah2 di atas. Sebelum memosting trik ini saya sudah testing di 3 blog saya, dan semuanya sukses (tu syarat saya memosting tutorial, kalau gak...gak saya post^). Kelihatannya warna template sobat yg ga' mndkung, coba dah desain gambar page peel sendiri dengan warna tema templatenya sobat (dan jngn lupa dihapus tuh gambar warfarenya..hehe). Smoga Membantu~
:07
info yg sangat menarik teman.....
terima kasih telah berbagi
okay ............
mas iqbal
kok punyaku gak bisa ya?
malah munculnya di bawah je
lihat deh
di
researchofgeology.blogspot.com
njawabnya ke email saya ya mas, yan_research@yahoo.com.
Itu sih salah nyimpan sob. Seharusnya kode yg terakhir disimpan di bawah kode tag <body> dan bukan di bawah kode tag </body>
Semoga membantu_
:ntauadmint4bb:
kak, tukeran link dong http://sayasukasiioon.blogspot.com
blog kaka keren :)
WowoooooWoowow,....
ThAnkssSs,BangeT SOb,.....BuaT info And Jurus2 JitU yg dibaGI...SkrG Ane + lebih ngerTi seputAr dunia blogspot,. Moga MakiN maju yaaa,
BlognYa....Oh ia ada gk cara untUk NgebLoc Spam yaNg masUk ke Blog Kita,minta Tutornya doNk...
blog ane http://kupangunderground.blogspot.com
Beberapa hari yang lalu saya telah pasang link Mas di Blogku tapi kok ilang yo..... kenapa ?
siiiiiiiip gan......
tapin caranya ganti tulisan didalam lipatan tu gimana gan.....????
maklum gan anak baru.....
helppppppppppppppp.....
setelahaku ganti domain co.cc kok jadi gak bisa nglipat ya :39
ngedit html bikin pusing,,,, nyari g ktemu2........
kawan..
untuk mengganti gambar di samping lipatan gimana?
Kok punya saya munculnya di bawah??
http://7eif.blogspot.com/
kok blog saya yang animasi lipatan nya ada dibawah sih
Koq yang aq lipatannya ada di bawah sebelah kanan sih, ada apa ya??? tlg solusinya ya kak
@FLASH NET: Silahkan untuk mengganti link gambar yang telah saya sediakan=> http://lh5.ggpht.com/_RVpTV2JOOxA/S8iu18jZiCI/AAAAAAAACyo/e0oaiHtbMf0/berlangganan_kelipat.png dengan link gambar bikinan anda
@7EIF: Lihatlah langkah ke-4 sobat. Kode terakhir harus diletakkan di bawah kode tag <body> mungkin situ meletakkan kode terakhir di bwh kode tag </body> . Tentu keduanya berbeda, silahkan dicek dulu dengan teliti_
@Rizqi D'flip: Itu dikarenakan salah nyimpan kode, cobalah cek dengan teliti, terutama pada kode terakhir. Kode terakhir harus diletakkan di bawah <body> dan bukan di bawah kode tag </body>
semoga membantu_
:ntauadmint4bb:
izin coba gan
bos jgn lpa singgah ke blog ane
- http://gocpns.blogspot.com/
- http://sangerdingin.blogspot.com/
tpi aq udh cri pake ctrl+f nyari tulisan body yang kya kk sarankan itu g ada, trus gmn k???
thanks banget infonya... aku udah pasang di blogku... bisa 100%... makasih ya infonya....
:13 infonya
cara membuat page peel effect, cara membuat halaman kelipat, membuat halaman yang melipat, cara membuat page peel effect dengan jQuery, tutorial page peel effect
33
terimakasih buat triknya
thanks infonya...:25
loh,,, sejak aku pake domain co.cc kok ga bisa??
kemaren pas pake domain blogspot masih bisa :26 :29
tolong bantu ya..
www.catatan-si-tito.co.cc
Saya udah coba di blog saya, saat di preview lipatannya kebuka, tapi begitu disave dan dibuka blog, koq nggak jalan ya? Ada saran?
@Tito Tobing: Silahkan untuk menghapus trik yang telah sobat terapkan (kode yg diterapkan ke dalam kode template), setelah itu klik tombol simpan template. Selanjutnya terapkan ulang/lagi trik yang telah saya tulis di atas...beberapa teman blogger juga sering mengalami kejadian semisal, hal ini juga bisa disebabkan oleh pemindahan domain sehingga trik di atas harus diterapkan kembali...semoga membantu_
@Eka Satria Taroesmantini: Pastikan untuk menerapkan trik di atas dengan teliti sob, jika masih gagal silahkan diulangi lagi. Jika masih gagal lagi...silahkan untuk menghosting file JS pagepeel yang telah saya sediakan ke dalam web hosting pribadi anda. Semoga membantu..._
:ntauadmint4bb:
template punyaku gak ada code body karna memakai template asli buatan blogger gimana tuh ada solusinya gak
maaf kok lipetannya malah di bawah ya ?? gak di atas?? minta tolong di benerin donkk thanks..
waw keren tutorialnya.....kayaknya saya akan lebih lama muter2 di blog ini deh....
sip gan thanks bgt sarannya....
walau salah sampe hrs ngulang nempatin pas langkah 4....
akhirnya ketemu jg....
gw tempatin langkah 4 di semua tulisan body 1/ 1...
n akhirnya sukses...
thanks thipsnya bro....
kok body nya ga' ktmu??
Pasti ketemu jika teliti sob, untuk mempermudah silahkan untuk menggunakan tombol Ctrl+F untuk mencari kode yang diinginkan :10
:ntauadmint4bb:
kalau nampilin kyk yg di blognya mas gmn???yg da tulisannya ntu??? apa itu gambar dari photoshop???makasih
kunjungan balik donk....
http://fandimin.blogspot.com
trma kasih masukannya, gue coba dulu ya!
kode "body" ku ga ada.....
Udah di centang n Di sisir 7x..tp gak ktmu juga....
pliiiiiisss..............!!!!
Mesti ada kok bro...coba deh nggunain tombol Ctrl+F buat nyari kodenya, nanti bakal cepat ketemunya. Dah itu biar lebih gampangnya lagi kopi aja kode yang diinginkan persis seperti yang ada di tutorial lalu dipastekan di kotak pencarian (Ctrl+F) tadi, insyaAllah ketemu kok:10. Semoga membantu_
:ntauadmint4bb:
mas blog, saya coba dulu ya ... skalian mau blajar di link sumbernya juga
terima kasih mas....utk share ilmu nya..sangat bermanfaat sekali
ewohne gan ......
sek iso nekok sak itik tok ...:30:30:30
untuk langkah yang ke empat kodenya gak bisa di temukan seperti di atas koq gak aq temukan ya tolong pencerahannya gan
trims
om ko gg bisa?
mohon pencerahannya ya om
gan kok malah di bwh bkan di atas...
kok di htmlnya g da yg langkah ke4 ituu...pdhl dah pake ctrl+f...tettep aja g dpt....gmana donk??:11
Wow.. trik nya asik banget 30. pertanyaan saya,langkah ke 4 yg warna hijau bisa tidak diganti dengan link saya bukan link berlangganan? terimakasih.. 13
@anonim01: Kalau begitu sobat bisa meletakkannya di atas kode </body>
@anonim02: Oh, bisa-bisa saja sob...itu sih bebas saja mau ditukar dengan link apa saja, cuma untuk mengoptimalkan fungsi maka bisa diisikan dengan link iklan, atau link apa saja yang menurut sobat sangat penting, dan ini termasuk link berlangganan - ini semua mengingat fungsinya yang sangat menarik perhatian pengunjung blog kita untuk mengkliknya :10
:ntauadmint4bb:
@anonim01: Ralat sob, jangan letakkan kode pada langkah 4 di atas </body>, nanti page peel-nya malah munculnya di bawah bukannya di atas. Tetaplah untuk menyimpan kode pada langkah 4 di bawah kode <body>
Jika belum ketemu2, cari saja dengan sabar, insyaAllah ketemu kok! Semoga membantu :10
:ntauadmint4bb:
Gan cara ke atasinnya gmn masa gue adanya di bawah..
N gmn cara nulis di lipatannya
kang udah tyampil tapi ga mau ngelipet knapa ya
http://hudanimyu.blogspot.com
blog ini saya suka banget... banyak pembelajaran di dalam nya buat newbie seprti saya... mksh share nya mas iqbal.....
:38
keren
Perfect...share y untuk praktek..hihihiih.. :13
"body" gak ada di template ku
yang ada cuma "/body" gimana ni om iqbal
Mas.. tukeran link yuk..
konfirmasi ya kalo mau.. ke http://terselubungsekali.blogspot.com/
Ikutan coment donk...................
kunjungi blog ane ea..........
www.procyberbatam.blogspot.com
:15
Follow ea :17
script body nya kok ga ada ya mas iqbal??
mas yang tampilan bisa membuka dipojok tu,, koq jadi ada semacam tyampilan di pojok depan na ea? karna salh apa na ya mas.. cb mas lihat blog saya.. fahrur21.blogspot.com.
terimakasih infonya mas. trik ini sangat bermanfaat,
thank brow positngnya.....lihat hasilnya di websiteQ... www.titodesign.co.cc
MAKSIHH DAH W PASANGGGG :38 :38 :38 :38 :38
saran untuk postingan ini mas iqbal, sayangnya untuk lipatannya hanya terbuka kebawah saja. Karena jika ada yang menginginkan widget itu berada di bawah, otomatis halaman utama blog si pengguna widget akan terscroll. Bisa gak ya lipatannya ke atas ? :13 salam blogger dari http://ifsite.blogspot.com/ yang beginner ini :18
akan ku coba ya di blog kedua ku :)
bagaimana cara.a agar gambar yg terlipat itu ada di bagian atas punx aq ada di bawah mas tolong share tq
Mas, di saya kok gambarnya gak keluar? padahal udah di upload di photobucket dan ini linknya http://i1129.photobucket.com/albums/m506/adietzJP/GambarLipat-1.png. coba cek deh di blog ku, http://adityajanata.blogspot.com, itu kenapa ya mas?
oiya, buat yang gak ketemu <body> coba cari make CTRL+F ketik <body aja, tanpa tutup.. Insyaallah ketemu.. :12
gimana isi posting di kertas lipat tolong di balas yach please !!!
ok Sob.. dah sukses nih masangnya.. hehhe
blognya keren gan,,
boleh minta templatenya sekalian nggak??
:13
btw, approve ym aku dumz,,
just_novee@yahoo.com
keran bisa d kreasikan sob :D
punya ku ngak bisa ngelipat mas iqbal..29
www.wichang.blogspot.com
weq.. 29 tu gw mw buat emotion nangis.. tapi kok ngak jln?? aneh... hehehe
@raisz_sekan: Silahkan untuk memperaktekkan sesuai dengan langkah2 di atas sob, coba lah untuk lebih teliti. Jika memang tidak bisa, itu mungkin karena ada faktor dari template blog sobat (mengingat beberapa template rancangan Blogger ada yg kurang support dengan pagepeel).
Untuk menampilkan emoticon, jangan lupa titik duanya juga di ketik sob...sebagai contoh : dan 29 maka akan menghasilkan :29
Semoga membantu... :10
:ntauadmint4bb:
bos, yang link http://lh5.ggpht.com/_RVpTV2JOOxA/S8iu18jZiCI/AAAAAAAACyo/e0oaiHtbMf0/berlangganan_kelipat.png itu nge hostnya dimana? :16
ow.. jd dibiarkan aj gt bang??
atau dihapus? kyk mana carana? jd error.. :29
Wah, menarik, nih. Coba dulu, ya.
@FirmanPicasa sob
Mas,tempat ane kok gak ada body ya?
kurang ngerti...bs lebih singkat lg ggk???
plese
jasa adsen murah sob.., 30 ribu doank.....oank ...oank....,kunjungi blog ane
wah keren nih sob, tapi apakah nge buat loadig blog tambah lama ?
INFO YANG SANGAT BERGUNA FREN....MHON IJIN COPAS YO
salam kenal gan.., nice info.
dari:http://lpunrt.blogspot.com/
seru banget, trima kasih ya. lgsung coba.
Poskan Komentar
Komentar anda sangat penting! Oleh karenanya saya sangat berterima kasih bagi anda yang tidak SPAMMING di sini. Komentar SPAM, mengandung SARA, dan menyinggung pihak lain akan saya hapus. Terima kasih telah berkunjung :D