Jumat, 24 September 2010

Tips memasang efek terkelupas(peel effect)

Pernah tidak sobat blogger berfikir untuk membuat sesuatu yang beru dengan tampilan blognya? Misalnya dengan membuat efek halaman terkelupas pada sudut template(add peel effect) yang serba guna dan bisa buat pasang add untuk blogger. Tampilannya yang bagus akan menarik perhatian pengunjung blog anda.Selain terlihat keren sangat baik dijadikan tempat memasang iklan.Nah, dengan bantuan javascript sebagai hack ini bekerja pada jquery dan css.
Pertama saya ingin berterimakasih pada sohtanaka untuk membuat jquery hack ini dan kemudian naeemnur untuk membuatnya berfungsi untuk bekerja di blogger.Demo
Sekarang mari kita mulai:
• Loggin ke akun blogger sobat
• Masuk ke layout(element halaman)>Edit Html>Tekan Ctrl+F
• Cari kode dan pasang kode dibawah ini tepat diatasnya

<style type='text/css'>
img { behavior: url(iepngfix.htc) }
#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://www.wallheaven.com/subscribe.png) no-repeat right top;
}
</style>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Page Flip on hover

$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .msg_block&quot;).stop()
.animate({
width: &#39;307px&#39;,
height: &#39;319px&#39;
}, 500);
} , function() {
$(&quot;#pageflip img&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;52px&#39;
}, 220);
$(&quot;.msg_block&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;50px&#39;
}, 200);
});


});
</script>






Kode garis merah merupakan url gambar yang ingin Anda tampilkan di add, silahkan sobat rubah sesuai dengan url gambar yang sobat punya.
Sekarang cari tag dan tempat kode di bawah ini setelah itu.



<div id='pageflip'>
<a href='http://feeds2.feedburner.com/anshuldudeja'><img alt='' src='http://www.wallheaven.com/page_flip.png'/></a>
<div class='msg_block'></div>





Dalam kode di atas dua tulisan berwarna  merah adalah url, Satu untuk link ke iklan dan satu ke gambar yang mengupas selama advertisement.
Nah selesai , selamat mencoba.....



6 Orang berbicara:

wah mau juga nih utak atik template kebetulan saya sedang lagi belajar ngeblog.

salam kenal ya dari bloger bali

@marthacellSelamat mencoba kawan,semoga berhasil

gan thanks really good and useful info, success is always yes!
sprei

Terimakasih atas semua artikel bermanfaat yang sudah anda publikasikan melalui blog yang menarik ini, saya tunggu postingan selanjutnya, have a nice day, kawan :)

infonya sangat bermanfaat sekali mbak/mas, makasih yach!! beritanya bagus banget dan sangat menarik untuk di baca hari ini. Ijin share juga ya, terimakasih.

nice post, gan... Keep posting!!

Posting Komentar

Related Posts with Thumbnails Daftar di PayPal, lalu mulai terima pembayaran menggunakan kartu kredit secara instan. readbud - get paid to read and rate articles