Kalo tidak salah dulu saya pernah nulis tutorial tentang iklan bergaya Page Peel ya? coba buka arsip dulu...nah ketemu :) oh iya ternyata ada 2 tutorial berbeda yang pernah di publish, yang pertama untuk tampilan menggunakan style Page Ear Javascript, trus..sama ini yang kedua Sexy Curls jQuery Plugin. Nah, buat rekan yang rada asing dengan istilah Page Peel, silahkan buka kembali arsip terdahulu pada kedua link diatas ya.
Ok lanjut, nah kali ini saya menemukan Page Peel terbaru buatan Sohtanaka.com dengan koding yang tentu saja sangat berbeda dengan kedua Page Peel diatas, Sohtanaka tidak menggunakan setup koding yang rumit, jadi rekan tinggal langsung memasangnya saja dihalaman blog. Walaupun masih ada sedikit yang harus diedit, itupun hanya sekedar mengubah tampilan gambar dan link tujuannya saja. Bila dilihat sekilas, untuk style tampilannya hampir sama saja, dimana ketika kita mengarahkan mouse pada area PagePeel ini, maka akan terlihat halaman menggulung layaknya anda membuka selembar kertas dan menemukan halaman lain dilembar sebaliknya. Lihat demonya disini.
Cara Pasang:
Letakan script code jQuery dibawah ini diatas kode <b:skin><![CDATA[
<script src='http://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$(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>
Kemudian letakan kode CSS dibawah ini diatas kode ]]></b:skin>
#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://img222.imageshack.us/img222/9213/subscribe.png) no-repeat
right top;
}
Letakan kode ini dibawah tag <body>
<div id='pageflip'>
<a href='http://feeds2.feedburner.com/namafeedkamu'>
<img alt='' src='http://img224.imageshack.us/img224/8315/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>
Silahkan disimpan dan lihat hasilnya. Ingat! Tampilan diatas hanya sebagai contoh saja ya, rekan bisa mengganti gambar dan link tujuan apa saja sesuai keinginan. Silahkan langsung dicoba :)
94 comments:
pertamaxx om
wuahaa.. thanks om... jadi seger lagi ni mata ;)
ketigaxxx nggak ya...
Keren kang... nyobain ah.. biar agak2 beda gitu theme-nya... biar nggak bosen.. mudah2an gak bikin berat... :D
asik ketigax!!! :D
arghhhhhhh.................. :( :( :(
hayo pasang iklan bergulung...
hahhah... yang matre pada nambah space iklan lg nih...
keren om.........
dah lama ga maen ke sini, sip dah nih tutornya
om di blog punyaku kok jadi kea gini yah
ad garis pinggir warna ungunya.. ga ngerti nih.. :((
coba liad dsini om, http://za3mon.com
tulung omm..! ~x(
wah ada peluang baru nih supaya iklan kita diklik, makasih ya om atas ilmu nya
omm, trnyata eror gitu kalo d Firefox aja
aku coba buka pake Chrome normal e..
walah.. ~x(
thank's ilmunya
langsung di coba nih !!
Wah jadi teringat nih om, file2 pendukungnya masih tersimpan di google pages, tinggal dicoba saja cara terbarunya. trims..=((
Bisa dicoba nich
kalo yang ini terkesan kurang melipat
cuma kek geser aja yaaa
tapi keren om
:)
Nanti saya coba di blogger deh, moga ilmunya dapat berkah ya om :)
beda nya dulu pake Flash ya mas?
Hehe sok tau nih saya...
Pagi semuanya :)
Mantap Juragan,, Ngiler mode = 'ON'
Paling nggak image source nya harus diganti ya om? nanti kalo tiba2 diganti gambarnya jadi gambar iklan sama pembuatnya kan bisa repot hehe...
Om Aku mau tertawa dulu :))
Soalnya lihat punya om Agus lucu :))
Makasih ya om
kl yang ini bikin berat gak ya om?
Excellent blog post,
Design Toronto Web is committed to marketing projects that move business. As an integrated website developer, we serve a diverse list of clients and industries. Design Toronto Web offers a cross-fertilization of strategic ideas in brand strategy, communications, web design and multi-media solutions.
Toronto e-commerce development
Mantep nih om.... Makasih ya om....
Bikin blog tambah keren. Mberatin gak ya om ?
cek tkp dulu mas..^^
sip om, thanks :D
makasih om..di coba ya..
kira2 bikin berat ga ya 8-}
Keren nih Om, padahal tutor page ear javascript yg dulu aja belom sempet sy coba,eh ini ada model page ear baru lg... keren smua..
bikin mantapz tampilan ini
thx bro buat ilmunya
sip bos...
kurang efek slide na ya om
eh ada jg ding yg instan pk flash, tpi ya gt, msh ada link web nya kekeke dan area di sekitar peel nya g bisa di klik kl ada link nya
om lupa lagi nich..mau tanya dong..klo kita pasang id rssnya dua gman feedblizt sama feddburner..jadi id feedbliztnya di taro di bawah id feedburner..bisa ga om..thanks ya..mohon konfirmasinya..
Mas O-om emang selalu memberikan yang bermanfaat buat semu orang, makasih mas tutorialnya.
langsung dicuba nie...thanks o-om 4 this tutorial and peel away
keren2 neh oom emang jozzz,,,
coba2 omz.. sapa tau keren :D
wach mantap kang makin keren aja nieh idenya
all dukung saya di contest blogspottemplate yach thank buat KANG ROHMAN dan O-OM yang dach bersedia comment dan mendukung .......
akhirnya nemu juga scriptnya...makasih ya oom, mau dicoba di blog baru
boleh dicoba nich...thx....
oow, tutorial keren neh.
langsung coba lah
thank's ya mas oom
udah di coba
tapi ga jadi make - kurang kereen 8-}
ga cocok sama template saya kali ~x(
coba dulu ahhh :D
Keren om tutorialnya
makin hari makin keren ya om blogger :)
Waduh kacau mas Agus...!
tampilan nya jadi acak-acakan,page efek jQuery & CSS nya jd ketimpa template kita...
gimana cara ngerubahnya ya...
apik om..
aku nyari yang mbuat feature post itu aaah...
Mantap Om.
Ngomong-ngomong Google sedang maintenance seperti yang disampaikan ya, Om. Saya mau coba pasang comment luv di Blogger tapi mau cek email dan masuk dasbor Blogger kagak bisa.
wah....mantap nih om
Semakin simpel nih caranya.
Tapi saya koq tetap ragu soal pengaruhnya ke loading blog. Bakal jadi tambah lama gak, Om?
siiip nih tutornya tak coba aahh biar lebih bagus yaa...
Mantap juge ni, om...
O.. nggak ngerti ah, pusing :D
keren, langsung ke TKP
Mantep nieh om...
Tapi, hasilnya agak aneh ya, ketimbang sama page peel yang sebelumnya....
wiii keren, nyoba a...
Tapi berat ga si om?
wuiss... ilmu o-om ini ternyata banyak banget dan atraktif, kita bisa membuat blog kita jadi tampak maching....
Wow ...jadi keren blognya. Itu bikin berat blog kita gak Om?
@ALL: behubung pertanyaan paling banyak menanyakan bikin berat blog apa enggak ya om bilang apapun yang berhubungan dengan javascript dan gambar tentu saja mengurangi kecepatan loading page, tapi biasanya gak seberapa berat juga kok :)
Kalo kebanyakan followers/penggemar kaya blok kamu ini, juga bikin berat blog nggak oom, ck..ck.ck...bisa masuk guiness book of records nih nanti blog master ini :) :D
Wah om emang keren, dah bisa om aku praktekkan lngsing eh langsung :)) Tanks yh om. sekali2 mampir dunk om. Kehormatan bgi sya jika blog sya dknjungi master kya om. ;;)
coba deh
Om,, sorry kalo pertanyaan nya agak g` nyambung,,,
Om, saya sudah ikutin tutorial nya om yang cara pasang auto read more terbaru(part2).
tapi setelah saya laksanakan. koq saat saya membuat postingan baru dan saya klik read more nya keluar nya hanya gambar utama saja,,, om tolongin donk,, gimana ni,,,
kira2 dimana letak kesalahannya... plis omm,,,
aku juga mau sukses kayak oom ne,,,:D
ym aku:irfanrosandi
please y bantuin, semoga oom makin sukses,,,
Saye heran.... Dimane belajar,om. Camne bise mantap camtu...
mantap....makasih bang..:D
tipsnya keren banget....akhirnya berhasil juga...
mantapzzz bro...
Kalo buat promosi feedburner sih enakan pake strip-ad om, lebih keliatan dan nyaman di mata....
artikel??? ... ok ... smw
saya kenal blog belum 1 bulan
saya coba baca2 artikel yg ada disini ... hasilnya puas untuk saya sebagai seorang pemula
Btw .. mohon komentar seputar design dan tampilan blog saya, saya harap masukannya agar blog saya bisa enak dilihat smw orang
saya tunggu masukannya!!!
tx yaaa ... om
sorry, you comment I follow, please check my blog
-------------------------------------------
http://businessinternetmanagement.blogspot.com/
wah..
bakl jadi lebih keren nih kalo blognya ada ginian.. :D
langsung berhasil om..thanks atas semua ilmunya..
mdh2an makin top aja ya om
super kereen... makasih mas Agus :)
ITemplatez.com offers professional web templates, flash templates ,swish templates, dreamweaver templates, and other web design productsavailable for immediate download.
klo bwt wordpress gmn Om???
makasih ommmmmm ya
atas info dan tip dan trick yang diberikan kepada saya..
semoga bermanfaat deh untuk semua
thanks infonya... ;)
http://mig33soroako.forumotions.com/forum.htm
Dari tiga trik yg ada keknya yg ini yg gampang dipake dan plg sedikit scriptnyah... ;)
artikelnya selalu menarik trims om
mantap :D
thanks banget info'nya om :)
------------------------
http://mig33soroako.forumotion.org/
Sip deh tips triknya makasih OM Indonesia online archive
business marketing management
Top One Online
Best Places
Bagus pisan euy tricksnya thanks ya kang oom ;)
makasich infonya
kalau kode yang buat image gak bisa di klik kayak di digitalartinterior.blogspot.xxx da ga mas,,, nemu teampleate bagus tapi ga mudeng mau tak aplikasikan di blog yang lain...
Tipsss yang Jitu
itu berlaku untuk wordpress aja kah??? atau template bikinan kita sendiri bisa?
kk ..
nyari nama feed ku dimana ??
mohon bantuan nya ..
terima kasih atas infonya kang.....parmisi saya goyang dikit ah, sikat langsung menuju ke TKP...
Kang saya mau ngucapin terima kasih atas infonya ini. info ini sangat menarik buat saya.......
Kalau posisinya mau diganti ke pojok kiri atas gimana Om? Saya ganti ke left top kok belum berhasil ya... Thanks be4
gokil
hmm, blog q jadi berat gara2 ini.. :(
lumayan menarik tampilan ny :D
Very nice content for j query and css help i am thankful to you for your sharing.
Terima Kasih, Tulisan yang sangat membantu
mantep ni om langsung tak cobain
Poskan Komentar
Silahkan beri komentar dengan bijak dan jangan sampai komentar anda masuk dalam {COMMENTS SPAM}. Thanks