Friday, December 25, 2015

Cara Agar Gambar di Blog Tidak Bisa di Copy #1

Mencegah Agar Gambar di Blog Tidak Bisa di Drag

Assalamu'alaikum warohmatullahi wabarokatuh. Nah, dalam posting kali ini saya akan membahas tentang bagaimana cara disable drag gambar di blog. Maksudnya gimana disable drag gambar? Jadi begini untuk membuka sebuah gambar kan bisa cuma dengan drag gambar tersebut ke tab baru, nah jadi saya bisa membuat agar gambar tidak bisa di drag sama seperti teks yang tidak bisa diseleksi / di blok. Misalnya gambar dibawah ini, tidak bisa di drag.


Musik Tulus

Bandingkan dengan gambar dibawah ini, coba drag.

Musik Tulus

Agar gambar di blog tidak bisa di drag seperti itu cukup tambahkan kode atribut onmousedown="return false" oncontexmenu="return false" onselectstart="return false" pada tag img jadi misalnya kode gambarnya akan jadi seperti berikut ini :

<img onmousedown="return false" oncontexmenu="return false" onselectstart="return false" src="https://1.bp.blogspot.com/-hqYrBybHmPw/VnyZpEA4JZI/AAAAAAAAAn4/_lyhBmeOCGo/s1600/MusikTulus.jpg" />

Jadi sederhana, setiap kali sobat mengunggah / memasang gambar di posting blog sobat cukup tambahkan kode atribut diatas pada setiap tag img. Namun bukankah cukup merepotkan kalau seperti itu, harus selalu memasang atribut setiap kali memasang gambar di blog. Ada cara lain yang lebih mudah, kita cukup memberikan atribut satu kali di salah satu sisipan kode blog. Disini kita memanfaatkan kode jquery. Pertama-tama silahkan tambahkan link Jquery berikut ini diatas </head>.

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

Setelah itu tambahkan kode berikut ini diatas tag </body>.

<script type='text/javascript'>
$(&#39;img&#39;).attr({
  &#39;onmousedown&#39;:&#39;return false&#39;,
  &#39;oncontexmenu&#39;:&#39;return false&#39;,
  &#39;onselectstart&#39;:&#39;;return false&#39;
});
</script>

Setelah itu coba lihat gambar yang sobat pasang di blog sobat, semua gambar tidak akan bisa di drag.

Mungkin cukup sekian dari saya, kalau ada yang ingin sobat tanyakan silahkan sampaikan pada kotak komentar dibawah atau bisa juga melalui halaman contact blog ini. Terima kasih, assalamu'alaikum.

Sumber :
http://www.contohblog.com/2014/08/melindungi-gambar-blog-dari-copas.html
http://jemyshombing.com/blog/mengubah-atribut-suatu-elemen-dalam-javascript/
http://www.dte.web.id/2011/12/jquery-attr-dan-removeattr.html
Disqus Comments