Cara Membuat Efek Peel Away dengan jQuery

Pertama, peel away adalah sebuah efek seperti robekan sampul. Sama seperti widget lainnya Peel ini juga akan muncul di sudut kanan atas website/blog Anda. Setiap kali pengunjung mengarahkan mouse mereka di sudut kanan atas situs web/blog Anda, maka iklan tersembunyi dengan jQuery efek peel away akan muncul. lihat screenshot berikut untuk mempelajari cara kerjanya.

Cara Membuat Efek Peel Away pada Blogger:

Perhatikan petunjuk berikut dan terapkan dengan benar, Ingat: cara yang sama juga akan bekerja pada WordPress atau platform lain.

Buka Blogger.com >> Template >> Edit HTML.
Sekarang Dalam pencarian Template cari kode tag ]]></b:skin> dan di atasnya paste StyleSheet CSS coding berikut. Tidak perlu untuk melakukan kustomisasi di StyleSheet tersebut. Namun, jika diperlu silahkan untuk menyesuaikan.

.admin-bar #PagePeel{top:27px;}
/*Extra 20px height and width to allow for shadow and movement*/
#PagePeel{
    height:120px;
    overflow:hidden;
    position:absolute;
    right:0;
    top:0;
    width:120px;
    z-index:9999;
}
#PagePeel svg{
    overflow: hidden;
    position: absolute !important;
    right: 0;
    top: 0;
}
#PagePeel .pointCursor:hover{cursor:pointer;}
#mycontent { position:relative; margin-left:30px; }

Sekarang setelah menambahkan CSS cari tag </head> dan tepat di bawahnya Paste kode JavaScript berikut. Namun, anda juga bisa memasangnya di Html/JavaScript sesuai dengan kebutuhan.

<script type='text/javascript' src='https://googledrive.com/host/0B0WJjcJEFNziazIzXzlhMlhtWlU'></script>
<script type='text/javascript' src='https://googledrive.com/host/0B0WJjcJEFNziMmk4anpFWnRPWHc'></script>
<script type='text/javascript' src='https://googledrive.com/host/0B0WJjcJEFNzidExmT1JpWV9xNmc'></script>
<div id="mycontent">Peel Away Effect By <a href="http://defandaky.blogspot.com">defandaky.blogspot.com</a></div>
<script type='text/javascript'>
/* <![CDATA[ */
var PagePeelProParams = {"smallImageUrl":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlUvzBBR9sjgykm_fN4ToKWgspH3eQibBHzUY0z2SzHOL-CJasbeLp8qGXX0pYjoLgdaqXm7D-H_BeuiHHihGrmU9ZMawYUMpxIKUQfusr6Bv9IdefKg6G2ABZGLtuCRsJWUF2t9pex-4/s1600/DottedAdvertSmall.png","largeImageUrl":"Gambar anda disini","peelColorStart":"#545454","peelColorEnd":"#cdcdcf","pagePeelTargetUrl":"http://url anda.com","pagePeelActivateEvent":"hover"};
/* ]]> */
</script>

kustomisasi:

Ganti Gambar anda disini dengan link gambar anda dan http://url anda.com dengan link yang ingin dituju.

Setelah memodifikasi widget sesuai dengan kebutuhan dan keinginan Anda, silahkan untuk menyimpan template dengan menekan "Simpan Template". Itu saja dan situs Anda telah memiliki efek peel. Semoga bermanfaat...