Bismillah. Kata "melindungi" menunjukan adanya kelemahan, dan seandainya dijabarkan lebih jauh maka sesuatu hal yang dilindungi tetap memiliki celah keamanan yang bisa saja digunakan untuk mengeksploitasi. Kata seorang pakar jaringan melindungi itu memiliki tingkat kekuatan sekitar 99% terhadap exploitasi dari luar. Begitu pula dengan tips trik jQuery kali ini, tujuannya untuk melindungi gambar yang kita upload pada halaman blog agar tidak mudah untuk diambil dan disebarkan lagi oleh orang lain. Tetapi bukan berarti gambar benar-benar aman dari pencurian karena masih banyak cara untuk bisa mengambil gambar dari suatu situs walau gambarnya dilindungi. Plugin jQuery Image Protector ini buat oleh David Walsh[1].
Kenapa gambar perlu di lindungi?
- Menjaga keaslian sumber, seandainya kita adalah pemilik atau pembuat gambar
- Menjaga gambar dari olahan citra digital tangan-tangan jahil, jika gambar tersebut merupakan hasil photo shoot sendiri atau keluarga
- Menghindari hotlinking[2] yang bisa mengakibatkan hosting pribadi kita kehilangan banyak bandwidth. Hotlinking sangat merugikan bagi blogger yang menggunakan hosting sendiri, bagi pengguna blogspot jangan takut dengan hotlinking.
Apa hotlinking?
Hotlinking atau sering disebut juga inline linking, leeching, piggy-backing, direct linking, offsite image grabs, bandwidth theft adalah suatu cara pengambilan gambar dari suatu situs untuk kemudian ditampilkan kembali pada situs lainnya dengan menggunakan link dan file gambar yang sama. Sederhananya; orang lain mengambil gambar dari situs kita secara langsung menggunakan link dari hosting yang sama tanpa menguploadnya lagi. Lebih sederhananya; "SALIME" artinya SAtu LInk gaMbar rame-ramE. Hal ini merugikan bagi penyewa hosting karena mereka akan kehilangan banyak bandwidth bahkan bisa over quota sedangkan yang membayar adalah penyewa hosting. Sedangkan penyedia layanan hosting tidak bisa melakukan apapun pada mereka para hotlingking. Lebih lengkapnya tentang Hot-Linking silahkah baca disini[3] tapi anda harus banyak makan roti dulu biar lancar bahasa Inggris (hahaha...)
Integrasi jQuery Image Protector pada Blogger
Langkah 1Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:
</head>Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>Langkah 5
<script type='text/javascript'>
jQuery.fn.protectImage = function(settings) {
settings = jQuery.extend({
image: 'http://lh3.ggpht.com/_xcD4JK_dIjU/TQukGToihnI/AAAAAAAAEqo/58_UsBfwHdo/s800/blank.gif',
zIndex: 10
}, settings);
return this.each(function() {
var position = $(this).position();
var height = $(this).height();
var width = $(this).width();
$('<img />').attr({
width: width,
height: height,
src: settings.image
}).css({
top: position.top,
left: position.left,
position: 'absolute',
zIndex: settings.zIndex
}).appendTo('body')
});
};
$(window).bind('load', function() {
$('img.protect').protectImage().parents('a').removeAttr('href');
});
</script>
Simpan template dan baca langkah selanjutnya...
Memasukan kode jQuery Image Protector pada gambar
Setelah plugin jQuery Image Protector di integrasikan dengan template, maka langkah selanjutnya memasang kode protector pada gambar yang akan dilindungi.
Langkah 6Upload suatu gambar pada artikel atau pada blog anda dan pindahkah mode editor ke mode "Edit HTML"
Langkah 7
Sisipkan kode dibawah ini:
class="protect"Pada kode gambar seperti dibawah ini:
<img src="1.jpg"/>Sehingga menjadi:
<img class="protect" src="1.jpg"/>Misal:
Sebelum disisipkan kode:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="1.jpg">
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 222px;" src="http://modification-blog.blogspot.com/contoh.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_XXX" />
</a>
Setelah disisipkan kode:<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="1.jpg">
<img class="protect" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 222px;" src="http://modification-blog.blogspot.com/contoh.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_XXX" />
</a>
Langkah 8Terbitkan artikel anda dan silahkan cek dengan klik kanan "View Image", klik kanan "Save Image as..." atau klik gambar lalu drag pada tab baru...
Keterangan:
- Jika anda pernah memasang perpustakan jQuery maka kode pada langkah 4 baris 1 tidak perlu diikut sertakan, baca disini
[1] David Walsh
[2] Simple Wikipedia : Hot-Lingking
[3] Wikipedia : Inline Linking
