Cara Melindungi Blog dari Pencuri Artikel 2016

BLOGGINGPASURUAN, Kali saya saya akan share “ Bagaimana cara melindungi Arikel Blog Anda dari plagiatisme “ disini saya akan membagikan beberapa tips yang bertujuan untuk melindungi artikel blog agar tidak mudah dicuri/jipak oleh para pengunjung.

TIPS 1# Modifikasi tag BODY

Sekarang coba masuk ke TEMPLATE kemudian pilih Edit HTML. Untuk menonaktifkan fungsi blok dan klik-kanan mouse sebenarnya sangatlah sederhana. Anda hanya perlu mengganti tag <body> dengan kode ini:

HTML - Bloggingpasuruan

Klik Simpan Template kemudian lihat halaman blogmu.

Sekarang coba klik-kanan mousemu, maka tidak akan ada menu apapun yang akan tampil. Coba juga untuk mengeblok tulisan-tulisan di halamanmu. Tidak bisa kan? Begitulah salah satu cara jitu untuk melindungi hasil karyamu di blog. Namun sayangnya, cara ini juga mempunyai sebuah efek samping, yaitu akan membuat kotak penelusuran posting bawaan dari template blogmu menjadi tidak berfungsi. Satu-satunya jalan keluar untuk mengatasi masalah ini mungkin hanya dengan menampilkan kembali navbar blog jika kamu merasa bahwa kotak penelusuran itu sangat penting.

TIPS 2# Menonaktifkan Klik-Kanan dengan JQuery

Keistimewaan sistem keamanan ini dibandingkan dengan sistem keamanan pencegahan klik-kanan dengan alert adalah sasarannya yang dapat ditentukan sesuka hati. Sistem keamanan ini juga lebih mengandung unsur seni karena saat aksi klik-kanan dilakukan, sebuah tabir/overlay akan muncul untuk menutupi semua halaman:

Ide dasar dari pembuatan sistem keamanan ini adalah dari plugin JQuery klik-kanan yang sempat Saya dapatkan dari A Beautiful Site. Caranya sangat sederhana: Cukup dengan menyisipkan plugin tersebut ke dalam proyek, kemudian kita jalankan fungsi .rightClick() untuk menampilkan overlay saat aksi klik-kanan dilakukan:

Jquery - Bloggingpasuruan

jQuery Right-Click Plugin

Version 1.01

Cory S.N. LaViska

A Beautiful Site (http://abeautifulsite.net/)

if(jQuery)(function(){$.extend($.fn,{rightClick:function(a){$(this).each(function(){$(this).mousedown(function(b){var c=b;$(this).mouseup(function(){$(this).unbind("mouseup");if(c.button==2){a.call($(this),c);return false}else{return true}})});$(this)[0].oncontextmenu=function(){return false}});return $(this)},rightMouseDown:function(a){$(this).each(function(){$(this).mousedown(function(b){if(b.button==2){a.call($(this),b);return false}else{return true}});$(this)[0].oncontextmenu=function(){return false}});return $(this)},rightMouseUp:function(a){$(this).each(function(){$(this).mouseup(function(b){if(b.button==2){a.call($(this),b);return false}else{return true}});$(this)[0].oncontextmenu=function(){return false}});return $(this)},noContext:function(){$(this).each(function(){$(this)[0].oncontextmenu=function(){return false}});return $(this)}})})(jQuery);

// Jalankan fungsi...

$(function() {

$(document).rightClick(function(e) {

$('#no-right-click-overlay').show(); //menampilkan overlay saat aksi klik-kanan dilakukan

});

$('#no-right-click-overlay').click(function() {

$(this).fadeOut("fast"); //menghilangkan overlay saat overlay diklik

});

Berikut Langkah Penerapannya :

Berikut ini adalah langkah-langkah menerapkannya untuk menciptakan sistem keamanan

√ Pertama-tama pastikan dulu bahwa templatemu sudah dilengkapi dengan JQuery. Jika belum ada, kunjungi halaman ini terlebih dahulu kemudian salin script JQuery-nya saja. Plugin easing tidak diperlukan dalam proyek ini.

√ Setelah itu salin kode ini kemudian letakkan tepat di bawah JQuery tadi:

Javascript - Bloggingpasuruan

jQuery Right-Click Plugin

Version 1.01

Cory S.N. LaViska

A Beautiful Site (http://abeautifulsite.net/)

// Run this fungtions...

$(function() {

$(document).rightClick(function(e) {

$('#no-right-click-overlay').show(); //menampilkan overlay saat aksi klik-kanan dilakukan

});

$('#no-right-click-overlay').click(function() {

$(this).fadeOut("fast"); //menghilangkan overlay saat overlay diklik

});

</script>

√ Berikutnya letakkan elemen ini tepat di atas tag </body>:

HTML - Bloggingpasuruan

Teks peringatan letakkan di sini...

</div>

√ Terakhir, Salin kode CSS ini, kemudian letakkan tepat di atas kode ]]></b:skin> atau
</style>:

CSS - Bloggingpasuruan

#no-right-click-overlay {

background:#000;

font:bold 30px 'Comic Sans MS',Calibri,Arial,Sans-Serif;

color:#f10c0c;

position:fixed !important;

position:absolute;

top:0px;

right:0px;

bottom:0px;

left:0px;

width:90%;

height:100%;

text-align:center;

padding:5%;

display:none;

}

√ Klik Simpan Template.

Selengkapnya

Dalam script di atas Saya menerapkan fungsi .rightClick() pada $(document). Itu artinya bahwa kita melarang orang lain melakukan aksi klik-kanan pada semua area dalam dokumen. Namun, jika Anda ingin menonaktifkan klik-kanan pada area/elemen tertentu saja, selektor $(document) bisa Anda ganti dengan selektor lain. Misalnya seperti ini:

$('#dilarang').rightClick(function(e) {

$('#no-right-click-overlay').show();

});

Kode di atas akan melarang orang lain untuk melakukan aksi klik-kanan pada area #dilarang saja, sedangkan untuk area lainnya dapat dikenai aksi klik-kanan

Tips 3# Menonaktifkan Klik-Kanan Mouse dengan Alert

Cara Melindungi Blog dari Pencuri Artikel 2016

Itu adalah pesan yang akan muncul jika kamu melakukan klik-kanan pada halaman yang telah dilengkapi script ini. Fungsinya tentu saja, untuk membuat seorang pengunjung menjadi sedikit kerepotan ketika hendak menyalin sesuatu di blog kita. Dan secara otomatis, jendela peringatan ini akan mencegah para pengunjung untuk menyalin sesuatu di halamanmu. Meskipun sebenarnya kita juga bisa menggunakan perintah Edit » Copy atau cukup menekan tombol CTRL+C di papan kunci, tapi paling tidak cara ini bisa sedikit memberi peringatan bahwa di sini ada monster berbahaya (???)

Salin kode ini kemudian letakkan dalam sebuah elemen halaman HTML/JavaScript, kemudian simpan:

HTML atau CSS - Bloggingpasuruan

// Sumber: http://bloggingpasuruan.blogspot.co.id

var message="Jangan dicopas dong ...!!!!!";

function clickIE4(){if (event.button==2){alert(message);return false;}}

function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message);return false;}}}

if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;}

else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;}

document.oncontextmenu=new Function("alert(message);return false")

</script>

Ganti teks yang berwarna merah dengan kata-kata peringatan Anda sendiri.

Tips 4# CSS Selection untuk Mempercantik Tampilan Teks Terseleksi dan Melindungi Konten

CSS Selection/CSS Seleksi dapat digunakan untuk mempercantik tampilan teks-teks yang terseleksi. Secara umum, tampilan teks yang terseleksi akan diliputi dengan latar belakang berwarna biru dan warna teks berwarna putih, namun dengan CSS seleksi, kamu bisa mendapatkan efek teks terseleksi yang beraneka ragam.

Kode CSS

Selektor dan deklarasi CSS Selection dapat dituliskan seperti ini:

::selection {background:#3C993C;color:#FFB46A;text-shadow:none;} /* Safari & Chrome */

::-moz-selection {background:#3C993C;color:#FFB46A;text-shadow:none;} /* Firefox */

background:#3C993C; digunakan untuk menentukan warna latar belakang teks terseleksi, sedangkan color:#FFB46A; digunakan untuk menentukan warna teks terseleksi. Deklarasi text-shadow:none; sebenarnya tidak terlalu penting, namun dalam browser Chrome, CSS Text Shadow terkadang juga ikut terlibat dalam teks-teks terseleksi. Hal ini tentunya akan membuat hasil tampilan menjadi kurang sempurna. Untuk itu diterapkanlah deklarasi text-shadow:none; untuk menetralkan tampilannya.

CSS Seleksi merupakan salah satu anggota dari CSS3 Pseudo-Element. Oleh karena itu, kita juga bisa menerapkan CSS Seleksi ini pada area tertentu saja. Bahkan, dengan ide ini kita juga bisa membuat sebuah sistem sederhana untuk melindungi konten halaman artikel kita (atau lebih tepatnya: seolah-olah melindungi).

Melindungi Konten Artikel dengan CSS Selection

Untuk melindungi konten artikel dengan CSS Seleksi, yang kita butuhkan adalah dua buah penerapan deklarasi CSS. Deklarasi yang pertama kita gunakan untuk menyatakan efek seleksi secara umum (keseluruhan), sedangkan deklarasi yang ke dua kita gunakan untuk menyatakan efek seleksi pada area khusus saja:

Letakkan baris kode ini di atas ]]></b:skin> atau </style>

CSS - Bloggingpasuruan

/* Cara Melindungi Artikel dengan CSS selector
http://bloggingpasuruan.blogspot.co.id

--------------------------------------------

menyatakan bahwa semua elemen akan tampak sama saat terseleksi.

script di bawah ini akan memberikan kesan seolah-olah teks tidak bisa diseleksi

::selection {

background:transparent !important;

color:#222; /* samakan dengan warna teks */

}

::-moz-selection {

background:transparent !important;

color:#222; /* samakan dengan warna teks */

}

/* -----------------------------------------

Nyatakan bahwa elemen-elemen yang berada di dalam tag <code>, <textarea> dan <input> dapat diseleksi

code::selection,

textarea::selection,

input::selection {

background:red;

color:white;

text-shadow:none;

}

code::-moz-selection,

textarea::-moz-selection,

input::-moz-selection {

background:red;

color:white;

text-shadow:none;

}

Hasil Akhir Setelah Teks Dilindungi

Meskipun hasil akhir area di atas menunjukkan bahwa teks yang berada di luar tag <code> tidak bisa diseleksi, namun sebenarnya semua teks tersebut dapat di seleksi. Hanya saja tampilan teks terseleksi yang berada di luar area <code> ... </code> telah diatur agar warna latar belakang tetap transparan dan warna teks tetap sama dengan warna teks dalam keadaan normal, sehingga seolah-olah teks tersebut tidak bisa diseleksi.

Semoga bermanfaat..

Wong Pasuruan

Cara Melindungi Blog dari Pencuri Artikel 2016

HTML - Bloggingpasuruan

Jquery - Bloggingpasuruan

Javascript - Bloggingpasuruan

HTML - Bloggingpasuruan

CSS - Bloggingpasuruan

HTML atau CSS - Bloggingpasuruan

CSS - Bloggingpasuruan

2 comments: