Lindungi Gambar (Image Protector) dengan jQuery

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].
jQuery Image Protector

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 1
Login 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'/>
<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>
Langkah 5
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 6
Upload 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 8
Terbitkan 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
Referensi:
[1] David Walsh
[2] Simple Wikipedia : Hot-Lingking
[3] Wikipedia : Inline Linking

Membuang Link Gambar Yang Rusak Dengan jQuery

Bismillah. Gambar merupakan salah satu perlengkapan pada blog yang berfungsi sebagai penegas, pemanis, iklan, atau bahkan sebagai pengampai suatu kalimat singkat yang terkadang sulit untuk disampaikan dengan tulisan. Gambar mampu mewakili kalimat panjang yang digunakan untuk menuangkan ekspresi seseorang dan banyak lagi fungsi dari gambar. Bagi blogger yang suka mengupload gambar sebagai pelengkap suatu artikel harus lebih berhati-hati dengan hosting yang digunakan, karena bisa saja gambar-gambar yang sudah kita upload dikemudian hari akan dihapus oleh pemilik hosting. Hal ini akan merusak tampilan artikel yang sudah ditulis. Jika jumlah gambar sedikit kita bisa saja dengan mudah untuk menggantinya, bagaimana jika gambar yang sudah kita sertakan berjumlah ratusan? Pusiiiiing...
jQuery Automatic Remove Broken Image
Link gambar yang rusak atau hilang (broken image) sangat menggangu tampilan dari blog, dari pada kita harus mengecek satu-persatu gambar pada blog kita dan kemudian membuangnya, lebih baik kita menambahkan sedikit script jQuery untuk membuangnya secara otomatis link gambar yang rusak (broken image).

Kode jQuery Untuk Membuang Link Gambar Yang Rusak

Langkah 1
Login 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://code.jquery.com/jquery-latest.min.js' type='text/javascript'/>
<script type='text/javascript'>
$('img').error(function() {
$(this).remove();
});
</script>
Langkah 5
Simpan template dan preview blog anda...

Happy Blogging... :)

Bedakan Komentar Penulis Dan Pengunjung (jQuery)

Bismillah. Telah banyak yang membahas tentang cara membedakan komentar penulis dengan komentar pengunjung, bahkan jika kita mencari di mesin pencari dengan kata kunci tersebut maka kita akan menemukan ribuan blogger membahas hal tersebut, dari master sampai newbie. Tips trik blogger hack kali ini tidak akan menggunakan teknik yang sama (yang pernah dibahas kebanyakan blogger dengan menggunakan XHTML) tetapi kali ini akan melibatkan jQuery sebagai styler-nya (baca; pemberi sentuhan). Dengan beberapa keunggulan tentunya, diantaranya; lebih sederhana kode yang digunakan; lebih mudah di modifikasi; dan silahkan temukan sendiri kelebihan lainnya.

Persyaratan Untuk Memodifikasi Komentar

Dibawah ini beberapa hal yang harus diterapkan sebelum memodifikasi komentar, diantaranya:
  • Blogger anda harus memiliki widget profile/tentang/about bawaan blogger (wajib hukumnya)
  • Template anda harus sudah terpasang perpustakaan jQuery[1] (wajib hukumnya)

Kode jQuery Komentar

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Checklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:
</head>
Langkah 5
Masukan perpustakaan jQuery dibawah ini diatas kode pada langkah 4:
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'/>
Langkah 6
Cari kode dibawah ini (kode dibawah ini tersedia jika blogger anda memiliki widget profile):
<b:widget id='Profile1' locked='false' title='xxx' type='Profile'>
Masukan (copy paste) kode pada langkah 7 disini (yang di blok "xxx" sesuai penamaan yang anda berikan)
<b:else/> <!-- normal blog profile -->
Langkah 7
Masukan (copy paste) kode jQuery dibawah ini diantara kode pada langkah 6:
<script type='text/javascript'>
$().ready(function() {
$('dl#comments-block dt a').each(function(i) {
if($(this).attr('href') == '<data:userUrl/>') {
$(this).parent('dt').addClass('author-comment').next('dd.comment-body').addClass('author-comment').next('dd.comment-footer').addClass('author-comment');
}
});
});
</script>
Langkah 8
Simpan Template dan lanjutkan ke langkah berikutnya...

Kode CSS Komentar

Langkah 9
Cari kode dibawah ini:
]]></b:skin>
Langkah 10
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 9:
dl#comments-block dt.author-comment {
background-image: none;
background-color: #EDE5BE;
margin-bottom: 0px;
padding: 6px 0 6px 10px;
border: 1px solid #ccc;
border-bottom: 1px solid #FFF7CF;
}
dl#comments-block dd.comment-body.author-comment {
color: #593622;
background-color: #EDE5BE;
margin-top: 0px;
margin-bottom: 0px;
padding: 10px;
border: 1px solid#ccc;
border-top: 1px solid #CBC4AC;
}
dl#comments-block dd.comment-footer.author-comment {
background-color: #CBC39C;
padding: 3px;
margin-top: 0px;
border: 1px solid #ccc;
border-top: none;
}
Langkah 11
Simpan Template dan preview blog anda...

Keterangan:
  • Jika setelah dilakukan modifikasi ini komentar tidak mengalami perubahan ada kemungkinan kode CSS standar blogger sudah di rubah oleh pembuat template
  • Dan atau terjadi konflik (tambrakan) kode jQuery yang digunakan dengan kode jQuery lainnya
  • Lihat Demonya disini

Penjelasan tentang kode jQuery dan kode CSS akan dibahas dalam kesempatan mendatang dan itu juga jika sedang semangat untuk menulis... Happy blogging... :)

STP For Blogger - Memelihara Sebuah Blog

Bismillah. Apa sih maksudnya? jQuery apa lagi? Mungkin itu yang terlintas dibenak sahabat blogger dengan judul artikel kali ini. Judul artikelnya menggunakan bahasa Inggris bukan karena ingin di sebut "Nginggris" tapi memang agak sulit untuk kemudian menterjemahkannya kedalam bahasa Indonesia. Ide-nya muncul dari selembar kertas bungkus jajanan gorengan dikantin hari ini. Saat perut lapar kemudian masuk kekantin untuk membeli beberapa lembar goreng-gorengan dengan harga kurang dari Rp. 5000,- kemudian di bungkus dengan secarik kertas yang sudah digunting rapih hingga sebagian artikel hilang. Sambil makan gorengan aku baca-baca artikel bungkus gorengan tersebut dengan judul cukup membuat penasaran "Memelihara Sebuah Merk". Dengan santainya aku baca artikel tersebut tanpa keseriusan, bahkan sambil berkelakar dengan teman. Hingga akhirnya bacaan dalam hati ini terhenti pada satu singkatan pendek "STP" dalam kurungnya (segmentation, targeting dan positioning). Terpancinglah otak blogger-ku untuk mengimplementasikan STP pada blog.
STP For Blogger - Memelihara Sebuah Blog

Segmentation

Jika anda adalah blogger dan kemudian berencana ingin menciptakan agar blog kita menjadi terkenal dengan jumlah pengunjung jutaan sehari maka hal yang terpenting adalah menentukan tema artikel utama blog kita untuk para pengunjung. Tema disini dimaksudkan agar pengunjung blog kita menjadi fanatik dengan artikel-artikel yang kita buat karena mereka yang berkunjung adalah orang-orang tertentu/khusus. Misal tema tentang JavaScript, jQuery, Mootools, XHTML, CSS, Elektronik, Otomotif, atau yang sesuai dengan keahlian anda didunia maya atau dunia nyata. Hindari membuat tema yang berisi informasi tak karuan, acak-acakan dan tak jelas target pembacanya. Segmentation adalah menentukan tema utama blog dengan segmen (cakupan target pembaca) pada jenis atau kategori tertentu.
Salah satu kesalahan blogger Indonesia adalah masalah tema blog yang topiknya tidak menentu dan tidak jelas cakupan target pembacanya, sehingga menggunakan trik yang cukup "jorok" untuk memancing (baca: memaksa) pembaca agar berkunjung ke blog miliknya. Blogwalking adalah salah satu cara yang paling banyak digunakan oleh para Blogger Indonesia untuk mengajak blogger lain berkunjung. Pada mulanya blogwalking dilakukan untuk mencari dan menemukan informasi menarik yang digunakan untuk memicu ide-ide segar dalam otak kita. Atau ada juga yang menyebutkan bahwa blogwalking dilakukan untuk memberikan apresiasi terhadap artikel sahabat blogger lain. Tapi kemudian kegiatan blogwalking dilakukan hanya untuk memancing (baca; memaksa) blogger lain agar berkunjung ke blog kita, sehingga komentar-komentar yang ditinggalkan pada blog kita hanya sebagai suatu balasan tanpa maksud dan tidak terencana setelah melihat dan membaca artikel-artikel yang dibuat kurang begitu bermutu dan tanpa arah.

Targeting

Targeting adalah menentukan jumlah pengunjung untuk blog kita pada periode tertentu. Hal ini penting agar kita dapat mengetahui seberapa populer dan penting blog kita dimata para pengunjung. Buatlah target jumlah pengunjung para periode tertentu, hal ini digunakan sebagai salah satu instrumen bahan evaluasi pada blog kita, sehingga pada periode tertentu kita dapat menemukan kekurang-kekurangan yang harus diperbaiki pada blog kita, baik itu dari sisi mutu artikel maupun dari sisi layout. Perhatikan para pengunjung blog kita apakah berasal dari satu alamat ataukah dari berbagai alamat yang silih berganti dan berubah-ubah dalam periode tertentu. Jika para pengunjung yang datang kebanyakan berasal dari satu alamat tertentu dan tidak berubah-ubah pada periode tertentu maka ini salah satu instrumen bahwa blog kita bermanfaat dan penting bagi mereka. Tapi jika para pengunjung berasal dari berbagai alamat yang berubah-ubah pada periode tertentu maka hati-hatilah karena ini merupakan indikasi bahwa blog kita kurang bermanfaat dan tidak penting bagi para pengunjung walaupun bisa saja jumlah pengunjung dalam jumlah banyak setiap harinya. Segera lakukan evaluasi pada blog kita dengan berbagai pertanyaan "mengapa", jika kita mau terus berusaha mengevaluasi maka suatu hari blog anda akan masuk dalam kategori profesional saat kita sendiri sebagai pemilik tidak/belum menyadarinya.

Positioning

Positioning adalah memperhatikan posisi blog kita saat ini baik dimata pengunjung ataupun dimata mesin pencari. Hal ini juga penting secara internal maupun eksternal agar kita dapat dengan mudah mengevaluasi kekurangan blog kita. Jika posisi blog kita saat ini bagus dari sisi jumlah kunjungan maupun dari sisi mesin pencari maka itu menandakan bahwa blog kita cukup unik dan khusus. Secara internal positioning sangat berpengaruh terhadap semangat pemilik blog untuk terus menulis artikel dan memperbaiki kualitas artikelnya. Secara eksternal positioning juga berpengaruh terhadap jumlah kunjungan karena para pengunjung akan merasa menemukan suatu blog yang unik dan khusus yang sangat cocok bagi mereka.
Terus pantau posisi blog kita agar kita dapat terus meningkatkan kualitas blog kita serta bandingkan (compare) posisi blog kita dengan blog-blog yang sejenis agar kita dapat menemukan keunikan yang harus di tonjolkan pada blog kita. Untuk melakukan perbandingan antara blog kita dengan blog kompetitor bisa menggunakan situs-situs penyedia layanan compare seperti Google dan Alexa.

Jika kita mampu merumuskan STP dengan baik bukan tidak mungkin blog kita akan menjadi blog yang profesional dan berujung dengan penghasilan yang bukan saja lumayan tapi muantaaap! Karena STP adalah salah satu faktor marketing yang bertujuan untuk mempopulerkan blog kita dan memposisikan blog kita sebagai blog yang profesional. Mari terus belajar untuk menggunakan tips dan trik yang bersih. Blog kita adalah rumah kita dan produk kita, memperhatikan dan merawatnya berarti juga memperbaiki kehidupan kita. Insya Allah...

Happy Blogging :)