» » Cara Menambahkan Halaman Peel Effect Pada Blog Dengan JQuery Terbaru
Edit

Cara Menambahkan Halaman Peel Effect Pada Blog Dengan JQuery Terbaru

Cara Menambahkan Halaman Peel Effect Pada Blog Dengan JQuery Terbaru

Cara Menambahkan Halaman Peel Effect Pada Blog Dengan JQuery Terbaru - Banyak sekali cara para bloger merombak tampilan situsnya. Salah satu fitur yang paling keren untuk situs Anda adalah efek yang populer yaitu Peel Effect. Efek dari halaman ini adalah untuk membuat situs lebih menarik untuk di lihat. Walaupun ada banyak metode untuk melakukan hal ini tapi di sini adalah cara sederhana yang bisa Anda ikuti bahkan jika Anda hanya seorang pemula.

Apa Itu Page Pell Effect

Apa yang dimaksud dengan page peel effect? Sobat pernah mengunjungi suatu blog dan ketika krusor atau pointer menunjuk kesudut kanan atas blog, tiba-tiba halaman tersebut terlipat? Seperti contoh image berikut:
Sebelum tersentuh pointer

Cara Menambahkan Halaman Peel Effect Pada Blog Dengan JQuery Terbaru

Setelah tersentuh pointer

Tutorial ini dibahas bagaimana cara membuat efek halaman peel menggunakan jQuery dan kami akan menjelaskannya secara rinci di sini  Dengan menggunakan jQuery, Anda dapat menyesuaikannya jika Anda merasa kurang suka efeknya.
Berikut adalah langkah-langkahnya:

  1. Log in ke blogger masing-masing
  2. Kemudian buka Dasboard >  Template dan Edit HTMLnya
  3. Pada edit HTML Klik Edit HTML dan cari kode </head>
  4. Kemudian Paste kan kode dibawah ini tepat di atas kode </head> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

<script>
<pre> //<![CDATA[
 $(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>

And before ]]></b:skin>, add this code:

/* Page Flip
 ----------------------------------------------- */
 #pageflip {
 position: relative;
 right: 0;
 top: 0px; /* Change to 30px if you have the navbar (navigation bar) */
 float: right;
 z-index:9;
 }
 #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://oi44.tinypic.com/2hheno6.jpg) no-repeat right top;
 }
 #pageflipMirror {
 position: static;
 right: 0;
 top: 0;
 float: right;
 }

    5. Kemudian copy script di bawah ini setelah kode <body> :

<div id='pageflip'>
 <a href='http://name-of_your_blog.blogspot.com/atom.xml'>
 <img src='http://oi40.tinypic.com/10fqnav.jpg' style='width: 50px; height: 52px; overflow-x: hidden; overflow-y: hidden;'/></a>
 <div class='msg_block' style='width: 50px; height: 50px; overflow-x: hidden; overflow-y: hidden; '/>
 </div>

   6. Jangan lupa save

Demikian postingan tentang Cara Menambahkan Halaman Peel Effect Pada Blog Dengan JQuery Terbaru semoga bermanfaat.

0 Response to "Cara Menambahkan Halaman Peel Effect Pada Blog Dengan JQuery Terbaru"

Post a Comment

Subscribe to: Post Comments (Atom)