Blogger Kod Tutorial

Trik Membuat Peel Off di Blogger

Bismillah,

 

Peel Off adalah seperti imej di atas merupakan efek yang menggunakan skrip JQuery. Teknik ini telah di uji di blogger.com. Di halaman web/blog akan ada efek di mana jika dijalankan cursor disebelah hujung penjuru blog seolah-olah helaian akan terbuka. Ramai juga pemilik blog membuat efek ini sebagai tarikan untuk meletakkan iklan, link RSS Feed Burner bagi meramaikan jumlah subscriber dan beberapa lagi tujuan lain. Bagi WordPress, terdapat plug-in peel off ini. Bagi pengguna Blogger Blog anda bolehlah menyalin kod yang saya sediakan di bawah.
Langkah 1
Masukkan J-Query plugin (Abaikan langkah ini jika anda sudah ada/sedia ada skrip ini)
Salin kod di bawah di dalam <head>
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js’ type=’text/javascript’/>
Langkah 2
Pergi ke Design > Edit HTML
Copy & Paste kod di bawah dan letakkan di atas </head>

<style type=’text/css’>img { behavior: url(iepngfix.htc) }#pageflip {position: absolute;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 .back-img {width: 50px; height: 50px;overflow: hidden;position: absolute;right: 0; top: 0;z-index:98;background: url(http://2.bp.blogspot.com/-ozIbZSc4kLo/T1SpesMOYpI/AAAAAAAAAKM/NtX4Wf48t_o/s200/rss+netoops+blog+page+peel.png) no-repeat right top #fff;}</style><a href=’http://netoopsblog.blogspot.com’><img src=’http://1.bp.blogspot.com/-RikrI-c_pyQ/T2DTcP6aMvI/AAAAAAAAAL0/H6v7PVoHM_w/s1600/1x1juice.png‘/></a><script type=’text/javascript’>$(document).ready(function(){//Page Flip on hover$(&quot;#pageflip&quot;).hover(function() {$(&quot;#pageflip img , .back-img&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;.back-img&quot;).stop()    .animate({    width: &#39;50px&#39;,    height: &#39;50px&#39;    }, 200);});});</script>

Langkah 3

Copy & Paste kod di bawah dan masukkan di dalam <body> atau <body……………………>

<div id=’pageflip’><a href=’http://feeds.feedburner.com/j-reka/VAom‘><img alt=’Pereka Web dan Blog’ src=’http://2.bp.blogspot.com/_1fRuBdlSpLw/TJcc3k62mWI/AAAAAAAAAps/uSj6nCe_CB4/s1600/page_flip.png‘/></a><div class=’back-img’/></div>

*Gantikan pautan yang berwarna merah dengan pautan anda atau feedburner anda. Dan gantikan juga pautan berwarna biru jika anda ada desain tersendiri.

Save Template

Ok, dah siap!

Wassalam..

kredit untuk techtips9 dan all-coder

Leave a Reply

Your email address will not be published. Required fields are marked *