Anti Copy Image With Css3

Setelah kemarin dulu sempat membuat Anti klik kanan pada gambar dengan jquery, kali ini kita akan membuat Anti Copy Gambar Dengan Css3 Seperti apa Anti Copy nya Langsung saja Demo nya.

DEMO

Coba anda klik kanan pada gambar - gambar itu dan lihat apakah ada menu untuk mengcopy gambar nya, biasanya kalau pake browser Firefox tulisannya Copy Image Location kalau di Chrome biasa tulisannya Salin URL gambar ( jika Chrome nya berbahasa indonesia ) Nahh ada atau tidak menu untuk menyalin gambarnya..?

Letakan kode di bawah ini di atas kode ]]></b:skin>

.antimalingKiri, .antimalingTengah, .antimalingKanan {
     position:relative;
     float:left;
     padding:0;
}
.antimalingTengah {
     float:none;
     margin:0 auto;
     text-align:center;
}
.antimalingKanan {
     float:right;
     padding:0;
}
.antimalingKiri:before, .antimalingTengah:before, .antimalingKanan:before {
     content:"";
     padding:2px;
     height:100%;
     margin-top:-5px;
     margin-left:-5px;
     width:100%;
     left:0;
     top:0;
     position:absolute;
}

6. Klik Simpan Template

Setelah itu jika anda ingin gunakan Anti Copy gambar nya di postingan silahkan gunakan kode di bawah ini, tapi ingat selalu gunakan mode EDIT HTML saat mem-posting

Kode Gambar Posisi Di sebelah kiri

<div class="antimalingKiri">
<img src="Disini URL gambar" style="float:left;margin:5px 5px 5px 0;width:150px;height:200px;" />
</div>

Kode Gambar Posisi Di Tengah

<div class="antimalingTengah">
<img src=" Disini URL gambar " style="float:none;margin:5px auto;text-align:center;width:150px;height:200px;" />
</div>

Kode Gambar Posisi di sebelah kanan

<div class="antimalingKanan">
<img src=" Disini URL gambar " style="float:right;margin:5px 5px 5px 0;width:150px;height:200px;" />
</div>

Kan Biasanya kalau kita posting pasti gambar ada yang di kiri, tengah, dan kanan, nah untuk itu kode nya juga sudah di variasi dengan posisi di kiri, tengah, dan kanan.

Sumber: Gubhugreyot