Jumat, 02 Mei 2008
Cara membuat Halaman yang Bisa Ngelipat/ Page Peel Effect
uatu ketika lagi ngenet tiba-tiba menemukan suatu web yang unik tampilan halamannya. 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.
Teman-teman juga bisa menemukannya di blog ini. Yang seperti ini lho...
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
dan letakkan kode berikut di atasnya:
3. Lalu cari lagi kode
Dan letakkan kode berikut tepat di atasnya:
4. Cari kode
Dan lettakkan kode berikut di bawahnya:
*Ganti yang berwarna Ijo dengan Link yang anda inginkan. Saran: Link RSS ataulink 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKtN4fVOMJdycBaD00uJ60Xkw4dPXpESD33_Xt8oTsAW90mZKfWlbrRbqP_heECebIg0VO8WJAnhjfD7IfdoTSda30uWZizkCxzVk2aX3D1kBlKhnTBwFBVpwWnVKMq5qEkcwaXkkKkydT/) no-repeat right top;
text-indent: -9999px;
}
Artikel Cara membuat Halaman yang Bisa Ngelipat/ Page Peel Effect ini diposting oleh Prasetyo pada hari Jumat, 02 Mei 2008. Terimakasih atas kunjungan anda serta kesediaan anda membaca artikel ini, Kritik dan saran dapat dapat sampaikan melalui kotak komentar. Semoga Artikel Cara membuat Halaman yang Bisa Ngelipat/ Page Peel Effect dapat Bermanfaat .. ^_^
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKtN4fVOMJdycBaD00uJ60Xkw4dPXpESD33_Xt8oTsAW90mZKfWlbrRbqP_heECebIg0VO8WJAnhjfD7IfdoTSda30uWZizkCxzVk2aX3D1kBlKhnTBwFBVpwWnVKMq5qEkcwaXkkKkydT/) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKtN4fVOMJdycBaD00uJ60Xkw4dPXpESD33_Xt8oTsAW90mZKfWlbrRbqP_heECebIg0VO8WJAnhjfD7IfdoTSda30uWZizkCxzVk2aX3D1kBlKhnTBwFBVpwWnVKMq5qEkcwaXkkKkydT/) 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk2dQjZqj5tVGYathHcGjvM-UyFbmUyvhhCT0BT2OwdQFSr6hAUzbFy-GSqETobuq5r7xUmweAjBUUb7_LgZaIIL1zfe3T6rDYPVP6QUHFCO3T7a8NoOnTeUB7qOTCLlKziJ1GUyFTrrBD/'/>
<span class='msg_block'/>
</a>
</div>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=tutorialbloggingdiblogger' target='_blank'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk2dQjZqj5tVGYathHcGjvM-UyFbmUyvhhCT0BT2OwdQFSr6hAUzbFy-GSqETobuq5r7xUmweAjBUUb7_LgZaIIL1zfe3T6rDYPVP6QUHFCO3T7a8NoOnTeUB7qOTCLlKziJ1GUyFTrrBD/'/>
<span class='msg_block'/>
</a>
</div>
*Ganti yang berwarna Ijo dengan Link yang anda inginkan. Saran: Link RSS ataulink 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKtN4fVOMJdycBaD00uJ60Xkw4dPXpESD33_Xt8oTsAW90mZKfWlbrRbqP_heECebIg0VO8WJAnhjfD7IfdoTSda30uWZizkCxzVk2aX3D1kBlKhnTBwFBVpwWnVKMq5qEkcwaXkkKkydT/) no-repeat right top;
text-indent: -9999px;
}
Di Posting Oleh : Prasetyo ~ http://stefpousibelv1.co.cc/
Artikel Cara membuat Halaman yang Bisa Ngelipat/ Page Peel Effect ini diposting oleh Prasetyo pada hari Jumat, 02 Mei 2008. Terimakasih atas kunjungan anda serta kesediaan anda membaca artikel ini, Kritik dan saran dapat dapat sampaikan melalui kotak komentar. Semoga Artikel Cara membuat Halaman yang Bisa Ngelipat/ Page Peel Effect dapat Bermanfaat .. ^_^
Langganan:
Posting Komentar (Atom)
Tukeran Link
0 Tulis Komentar:
Posting Komentar