email
PhotobucketPhotobucketPhotobucket

Cara membuat Halaman yang Bisa Ngelipat/ Page Peel Effect

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[
dan letakkan kode berikut di atasnya:

<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>

3. Lalu cari lagi kode ]]></b:skin>

Dan letakkan kode berikut tepat di atasnya:


#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/AVvXsEhnK4-3GsE3AbBJo3lzrb2plq9JmxdVR5jSx9SIN9yu5-w9E8Tam7uS4qYjaZfFncFzQkUOfiju0UDrohcmEY5W_JguEAwIlB1BHZsr2AIXLyp6G7rTghMDK7g1QigFlY7YN_Z4z3tQcTRb/s1600/berlangganan_kelipat.PNG) no-repeat right top;
text-indent: -9999px;
}


4. Cari kode <body>

Dan lettakkan kode berikut di bawahnya:

<div id='pageflip'>
<a href='http://black-links.blogspot.com/2011/03/cara-membuat-halaman-yang-bisa-ngelipat.html' target='_blank'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU7Hrj3aiwJwm-V6RLGQ32Y4Twc3-WigZF1DobzChnmNwCee0L_u9hussH67WXzOL49pUUTaaiw_xMEVIC3Ys1lJwWBMZq-j6TKKUNvMmTgEu6x3AUebJ5vw6R5M0l1CVtIOdo4YerXwP5/'/>
<span class='msg_block'/>
</a>
</div>


*Ganti yang berwarna Hijau 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnK4-3GsE3AbBJo3lzrb2plq9JmxdVR5jSx9SIN9yu5-w9E8Tam7uS4qYjaZfFncFzQkUOfiju0UDrohcmEY5W_JguEAwIlB1BHZsr2AIXLyp6G7rTghMDK7g1QigFlY7YN_Z4z3tQcTRb/s1600/berlangganan_kelipat.PNG) no-repeat right top;
text-indent: -9999px;
}

Bookmark and Share

0 komentar:

Posting Komentar

 

Blogger Tube

Blogger Tube
contoh DEMO klik gambar

Rock All Night

Rock All Night
contoh DEMO klik gambar

Business View

Business View
contoh DEMO klik gambar

Cameo

Cameo
contoh DEMO klik gambar

Studeno

Studeno
contoh DEMO klik gambar

FRANKLE

FRANKLE
contoh DEMO klik gambar

Photo Gallery

Photo Gallery
contoh DEMO klik gambar

Malina

Malina
contoh DEMO klik gambar

Guild Wars

Guild Wars
contoh DEMO klik gambar

Liberation

Liberation
contoh DEMO klik gambar

i Movies

i Movies
contoh DEMO klik gambar

New Story

New Story
contoh DEMO klik gambar