Anti Copy/ No Copy Image using CSS3

Sebuah fungsi anti copy yang sering juga disebut sebagai no right click, disable right click tidak hanya dapat difungsikan secara total pada sebuah blog ataupun web, namun juga dapat difungsikan pada bagian-bagian terkecil dari blog atupun web, seperti halnya image/gambar. Fungsi anti copy/no right click/disable right click dapat dibangun menggunakan javascript atau kode CSS. Sekalipun sebuah fungsi anti copy tak mungkin seratus persen dapat menjamin blog/web atau image tak dapat dicopy atau dibongkar kode html-nya, namun setidak-tidaknya bisa sedikit menjaga agar beberapa bagian yang yang ingin dirahasiakan tetap aman.

Jika dibanyak panduan dan tutorial ataupun tips & trick blogger sebuah anti copy lebih banyak dibuat menggunakan javascript, namun untuk kali ini kita akan buat menggunakan kode CSS3. Tak banyak kode CSS yang akan kita gunakan, namun anti copy ini cukup mampu memberi sedikit kejutan karena akan terlihat sebagai sebuah tipuan kecil bagi pengunjung. Mengapa kita sebut sebagai sebuah tipuan kecil? Yah ... karena klik kanan akan tetap berfungsi namun bukan lagi fungsi yang berkaitan dengan image atau apa yang sebelumnya diharapkan pengunjung. Bagaimana ini bisa terjadi dan apa maksud sebenarnya? He ... he ... silahkan saja coba dengan klik pada demo yang dapat dibuka melalui link di bawah ini:

D e m o

D E M O

Cara membuat anti copy pada image/gambar
Untuk membuat fungsi anti copy image/gambar menggunakan css3 kita hanya memerlukan kode css yang nantinya harus disimpan di atas kode ]]></b:skin> yang letaknya di atas tag penutup </head>.

1. Login ke blogger
2. Halaman Dasbor (Dasboard)
3. Klik Rancangan (Design)
4. Klik Edit HTML
5. Cari kode ]]></b:skin>. Gunakan Ctrl + F untuk mempermudah dan mempercepat pencarian kode. Bagi yang belum jelas buka Special Tutorials yang ada di deret menu sebelah kiri.
6. Latakkan kode CSS tepat di atasnya
7. Klik Save Template

Kode CSS dan posisinya thd ]]></b:skin>

/* gubhugreyot * 02 januari 2012 */
.anticopy_left, .anticopy_center{
     position:relative;
     float:left; /* original code by: gubhugreyot.blogspot.com */
     padding:0;
}
.anticopy_center{
     float:none;
     margin:0 auto;
     text-align:center;
}
.anticopy_left:before, .anticopy_center:before{
     content:"";
     padding:5px;
     height:100%;
     margin-top:-5px;
     margin-left:-5px;
     width:100%;
     left:0;
     top:0; /* original code by: gubhugreyot.blogdetik.com */
     position:absolute;
}

]]></b:skin>

Kode HTML posting anti copy: Image di kiri

<div class="anticopy_left">
<img src="image.jpg" style="float:left;margin:5px 15px 5px 0;width:...px;height:...px;" />
</div>

Kode HTML posting anti copy: Image di Tengah

<div class="anticopy_center">
<img src="image.jpg" style="float:none;margin:10px auto;text-align:center;width:...px;height:...px;" />
</div>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

� Happy Blogging - gubhugreyot �