Cara Membuat Efek Peel Away dengan jQuery

Javascript 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/AVvXsEhuoIM08SLNjTUfAQ8T83fjNavtbiD4XbA60GN_f6MwKF9scjbsb6DfU2Ir7zM76BQPdJoD1W1_drijUz7nkIjLk9sNdEBoTBcL4IY8H7jbIuLQnFpfC7k0Z_u_Nxxxh3yUlBnkj64n78I/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...

Artikel Terkait

  • Seleksi otomatis tag blockquote dan pre
    Jika blog anda adalah sebuah blog yang terkadang menyuguhkan kutipan/baris tag kode untuk tutorial blogger maka trik ini sangat berguna untuk diterapkan. selain mempermudah pengunjung untuk menyalin kode tag anda berikan trik ini juga mempercepat pengunjung anda menyalin kode tag yang terkadang cukup panjang tanpa harus memblock semua kode sec…
  • Spammer dan no live link
    Terkadang kita sering dipusingkan dengan banyaknya spmmer pada komentar, dengan menyimpan link aktif /hidup dan berbagai promosi yang tidak ada hubungannya dengan posting. Kebanyakan dari mereka komentarnya tidak bermutu, dan hanya mengharapkan backlink. Tentunya kita harus mengambil cara agar para spammer tidak seenaknya menyimpan tautan akti…
  • Memgenal javascript dan cara menggunakan
    Dalam artikel ini Anda mempelajari dasar-dasar JavaScript dan membuat program JavaScript pertama Anda. Apa itu JavaScript? JavaScript adalah bahasa scripting yang digunakan untuk script sisi klien. JavaScript dikembangkan oleh Netscape pada tahun 1995 sebagai metode untuk memvalidasi bentuk dan menyediakan konten interaktif ke situs web. yan…
  • Pop-up kode menggunakan CSS3 dan jQuery
    Menambahkan jendela pop-up dengan cara yang sangat mudah menggunakan CSS3, Hal ini dapat digunakan untuk menampilkan kode sumber, gambar dan apa pun yang kita inginkan. Posting ini menjelaskan cara menambahkan jendela pop-up sederhana untuk blogger menggunakan CSS3 dan beberapa baris kode jQuery. Jendela Script Ini hanya tampilan sederhana…
  • Teknik dasar untuk lebih memahami apa itu jQuery
    Jika kita kembali sejenak untuk melihat di situs resmi jQuery pada bagian documentasi ( http://docs.jquery.com/ ) maka akan ada aebelas yang harus kita pelajari untuk lebih memahami jQuery dan ini di sebut jQuery API ( Aplication Progamming Interface ). berikut ini sebelas hal tersebut: 1. jQuery    core 2.  Selec…
  • Membuat tombol spoiler di blogger
    Spoiler memiliki banyak kegunaan, selain untuk mengemas posting/konten yang terbilang panjang spoiler juga dapat di gunakan untuk meletakkan note/cuplikan khusus. Dengan Spoiler ini memiliki satu kelebihan penting, yaitu hanya menggunakan satu elemen tunggal. Elemen tombol pembuka/penutup spoiler tidak perlu kita sertakan di sini karena JQuery…

Tidak ada komentar :

Kode klik emo: :) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT

Back to Top
Loading...