Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Page Peel Animation

Sangat jarang sekali blog yang menggunakan Page peel effectsebagai penambah daya tarik blog. Page peel effect biasanya ditempatkan di ujung kanan atau kiri atas halaman blog. Dibalik lembar page peel yang dapat tersingkap (di buka) dimanfaatkan dengan diisi informasi atau image yang membuat pembaca blog penasaran sehingga tertarik untuk membukanya. Di dalamya juga disertakan sebuah link dalam bentuk link html atau yang lain.

Memebuat Page peel effect tidaklah sesulit yang di bayangkan, hanya saja Page peel dengan luas yang cukup besar membutuhkan gambar yang cukup besar pula sehingga tentu saja beban blog bertambah besar. Untuk menyiasati hal ini gunakanlah gambar/image yang tidak terlalu besar dan pilihlah file image yang sesuai (gif, png atau jpg) sehingga muatan gambar juga menjadi entheng.

Untuk membuatnya kita akan gunakan JQery-Latest.js, KODE CSS dan sedikit javascript tambahan sebagai pengembangan fungsi jquery-latest.js.

O..., ya..., kamu bisa juga melihat bagaimana sebenarnya yang dimaksud dengan Page peel melalui DEMO yang sudah saya sediakan.

Langkah pembuatan Page peel Animation:

1. Amankan template terlebih dahulu dengan cara:

Login ke Blogger --> Tata Letak --> Edit HTML -->

Download Template Lengkap --> Simpan di Folder PC

2. Tetap di Edit HTML. Cari KODE ]]></b:skin> (kode ini ada di atas KODE </head>) kemudian letakkan KODE CSS di atasnya sedang jQuery-latest.js dan javascript pendukung persis di bawahnya.

KODE CSS

#pagepeel {
position: relative;
right: 0; top: 0;
float: right;
}
#pagepeel img {
background:url(http://i49.tinypic.com/ev8j09.gif) no-repeat;
border:0;
width: 100px; height: 100px;
z-index: 99;
position: absolute;
right: 0; top:0;
-ms-interpolation-mode: bicubic;
}
#pagepeel .msg_block {
width: 100px; height: 100px;
overflow: hidden;
position: absolute;
right: 0; top:0;
background: url(http://i49.tinypic.com/2mr8gly.jpg) no-repeat right top;
}

jQuery-latest.js dan javascript

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
$("#pagepeel").hover(function() {
$("#pagepeel img , .msg_block").stop()
.animate({
width: '487px',
height: '487px'
}, 2000);
} , function() {
$("#pagepeel img").stop()
.animate({
width: '100px',
height: '100px'
}, 2220);
$(".msg_block").stop()
.animate({
width: '100px',
height: '100px'
}, 2200);
});
});
</script>

3. Gunakan KODE HTML berikut di bagian body di antara tag <body> dan tag </body> (di bawah <body>).

x HTML

<div id="pagepeel">
<a href="http://gubhugreyot.blogspot.com" target="_blank"><img src="http://i48.tinypic.com/2prsb41.png" alt="" border="0"/></a>
<div class="msg_block">
</div>

Catatan :

1. Page peel ini disebuat Page Peel Animation karena menggunakan image dengan animasi gif untuk menciptakan animasi gerak pada page peel.

2. height dan width pada javascript (487px) menyatakan panjang dan lebar page peel yang dapat di buka.

width dan height yang lain untuk menciptakan effect lipat pada halaman yang paling ujung.

3. Modifikasi image yang ada untuk mendapatkan page peel yang sesuai dengan blog kamu!

1 komentar:

  1. kenapa saat di preview tulisanya "Template tidak dapat di parse"?

    BalasHapus

 
GR | Edited by | gubhug reyot