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

  • Membuat tooltip sederhana menggunakan jQuery
    Sebenarnya ada banyak cara untuk membuat tooltip, tidak hanya satu trik saja yaitu bisa dengan pseudo elements, dengan gaya CSS3 juga dengan javascript. Tooltip merupakan tampilan informasi berupa teks maupun gambar yang tampil saat cursor di arahkan (mouse over) pada sebuah item (biasanya pada link) dalam sebuah website/blog. Untuk kali in…
  • Modifikasi Alert Emoticon
    Saya telah membuat postingan Emoticon komentar otomatis namun pada postingan dahulu itu tidak ada modifikasi pemberitahuan pada saat emoticon tersebut di klik yang mana tampilannya masih menggunakan tampilan alert default. Demo Dan pada postingan saya kali ini saya akan membagikan cara modifikasi tampilan alertnya sesuka hati kita agar t…
  • Cara membuat tag pre di blogger
    Tag pre adalah sebuah elemen yang di gunakan untuk membungkus baris kode selain penggunaan menggunakan tag blokquote, tag pre umunya di gunakan oleh blog yang menyajikan barik kode tertentu pada sebuah artikel atau baris kode lainnya. buat sahabat yang masih bingung silahkan lihat gambar atau blog ini. Cara untuk membuat tag pre memang susah s…
  • Membuat javascript random teks
    Random teks adalah sebuah tulisan atau kutipan tertentu yang di tampilkan secara acara acak ketika halaman telah sepenuhnya di muat, trik random teks ini cocok untuk membuat sebuah kutikan atau tulisan tertentu yang ingin anda tampilkan secara berbeda dan saya menerapkan trik ini pada tips di blog ini. untuk lebih jelasnya silahkan anda klik l…
  • Nivo Slider, jquery slider dengan 9 efek transisi
    Saya ingin memperkenalkan Nivo Slider jquery kepada Anda. Ini plugin Jquery mengagumkan untuk slider dengan 9 efek transisi yang unik, dan terlihat sangat profesional seperti slide show Flash. Salah satu slider yang paling mengesankan yang pernah saya lihat. Demo Bagaimana tentang efek? Keren? Plugin ini telah diuji untuk sebagian besa…
  • Membuat efek linknudge pada label blog
    Salam sobat blogger, masih senantiasa berbagi untuk sobat semua dan kali ini saya akan share tentang membuat efek linknudge pada label posting blogger. walau pun trik ini sebenarnya dapat di terapkan menggunakan css yang pernah saya tulis disini, namun saya kali ini akan berbagi trik membuat linknudge menggunakan jquery. Blogging CSS SE…

Tidak ada komentar :


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...