Suatu 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
| <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>
| ]]></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/AVvXsEg0YBenw5KjQuL_tVC29mOqpJbsvHX8iori2h998Q8kcXYCBc0RA4-SkjR_teAdWHPoJIb-aOEcwgL7ZCYMZO3_lsIaw1JZe2YOFpjjKinsC2SLxmwAndH6o9QPU8C-2g-cF8EhBWQwzh3v/) 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/AVvXsEg0YBenw5KjQuL_tVC29mOqpJbsvHX8iori2h998Q8kcXYCBc0RA4-SkjR_teAdWHPoJIb-aOEcwgL7ZCYMZO3_lsIaw1JZe2YOFpjjKinsC2SLxmwAndH6o9QPU8C-2g-cF8EhBWQwzh3v/) 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/AVvXsEh9vg62BUEcSXoumZACVs-btTUcaWcBK8lC2bqn74j8YCZWq98n3qfhjMY6u4BoXA9TCHyoNFpJ67Azi84j7PVpnhRQpVtzE5VN5zd_p5yJ18ZnQUQissc1AIgnoBjF1IipUx1zbPBlqmRW/'/>
<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/AVvXsEh9vg62BUEcSXoumZACVs-btTUcaWcBK8lC2bqn74j8YCZWq98n3qfhjMY6u4BoXA9TCHyoNFpJ67Azi84j7PVpnhRQpVtzE5VN5zd_p5yJ18ZnQUQissc1AIgnoBjF1IipUx1zbPBlqmRW/'/>
<span class='msg_block'/>
</a>
</div>
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0YBenw5KjQuL_tVC29mOqpJbsvHX8iori2h998Q8kcXYCBc0RA4-SkjR_teAdWHPoJIb-aOEcwgL7ZCYMZO3_lsIaw1JZe2YOFpjjKinsC2SLxmwAndH6o9QPU8C-2g-cF8EhBWQwzh3v/) no-repeat right top;
text-indent: -9999px;
}
Semoga Bermanfaat []
kok gak bisa ya om...
ReplyDeleteSUSAH GAN....
ReplyDeletehttp://www.infoteknonews.blogspot.com
wah ane berhasil thanks om buat ilmunya :-D
ReplyDeletetlg gmn ya bt desain halmn blog,,,,
ReplyDeleteMUANTAB GAN...SEKALI COBA LANGSUNG TANCAP GAS...mathur Thangkyu buat pelajarannya.
ReplyDeletegan, saya dah berhasil
ReplyDeletetapi RSS Subcribe yg keluar, gmn cara mengganti ny tu gan
makasi
eh , blog saya kok html nya error , ngga bsa di edit lgi , trus jugaa saya sudah coba yg halaman browsingnya bsa gerak sendiri juga udah kok :)
ReplyDeletemakasih yaa :)
sama2 sering2 mampir lagi y ke blog ane,,klau banyak kekurangan mohon dimaafkan,,namanya manusia,,,
ReplyDeletetapi bagi yang berhasil slmat dlu deh,,bagi yang belum jangan menyerah,,,,,,,,pasti bisa,,knpa org lain bisa,,itu ja yg prlu kaliaushakn,,,,
Wahhh...Asyik jadinya :D...mkasih yaa akhi.... :D
ReplyDeleteMuantaaaap buangeeet bray...
ReplyDeleteterima kasih ya? Dan salam kenal dari aq
keren gan :)
ReplyDeleteTHANKS GAN
ReplyDeletekunjungi ini juga ya gan
http://vhariet.blogspot.com
kl di blog sy tdk ada body
ReplyDeletegmn ya ???