Agar Artikel Tidak Bisa Di Copy Paste Dengan CSS

Agar Artikel Tidak Bisa Di Copy Paste Dengan CSS - Memiliki blog yang bagus dan selalu terupdate dengan artikel-artikel yang berkualitas pasti akan menjadi rujukan bagi pemilik blog yang lainnya. Baik untuk mempelajari apa yang di bahas didalam blog tersebut, sekedar membaca isinya, atau sekedar meninggalkan komentar sebagai salah satu ciri khas dalam blogwalking. Dari sekian cara yang dilakukan pengunjung blog adalah kebiasaan lama yang mungkin tidak bisa hilang yaitu melakukan copy paste artikel, gambar, video, atau pun konten lainnya yang mungkin konten tersebut akan melengkapi konten atau artikel blog yang lainnya yang ada didalam blog mereka

Banyaknya pengunjung blog yang datang dengan berbagai sifat, sikap dan perilaku terkadang membuat khuatir bagi pemilik blog dan akhirnya memilih untuk melindungi semua atau sebagian artikel yang ada di blognya agar artikel tersebut tidak bisa di copy paste. Dan bagi Anda yang khawatir dengan artikel blog Anda dan ingin melindungi artikel tersebut, silahkan gunakan cara yang akan saya bahas berikut ini. Namun jika Anda menginginkan artikel blog Anda diberi password, silahkan baca Memasang password artikel blog

Untuk melindungi blognya agar artikel tidak bisa di copy paste, banyak yang menggunakan script anti copy paste, baik script yang berupa peringatan atau mematikan fungsi klik kanan pada mouse dan pada artikel ini saya menggunakan kode css agar artikel blog tidak bisa di copy paste yaitu dengan mematikan atau mendisable fungsi blog pada artikel yang dipilih menggunakan mouse atau dalam bahasa awamnya adalah Disable Text Selection

Daaann ternyata sudah banyak yang membahas tentang disbale text selection ini, saya sendiri menulisnya sesuai dengan ide saya sedangkan untuk sumbernya tidak mungkin saya tulis karena di Google sudah sangat banyak yang membahasnya. Nanti kalau saya tulis satu sumber, yang lainnya malah minta di tulis juga, namun yang pastinya tidak ada artikel yang sama seperti apa yang saya tulis ini karena saya menulis menggunakan kalimat dan bahasa saya sendiri. Kalau ada yang mengaku ada tulisan atau artikel yang sama dengan artikel ini, silahkan banding kemanapun

Perhatikan tampilan gambar berikut ini




Gambar diatas merupakan bentuk dari penerapan dari text selection yang saya buat sedemikian rupa. Ada 2 tampilan yang terdapat didalam gambar tersebut yaitu adanya artikel yang bisa di blok dan tidak bisa di blok. Sedangkan untuk DEMO langsung dari, saya menerapkan disable text selection ini pada 2 tulisan berikut ini

Gunakan mouse Anda untuk memblok 2 artikel berikut ini dan lihat hasilnya

1. Belajar ngeblog di Panduantemplateblog.com ternyata mudah sekali
   
2. Hayoo ajak teman-teman Anda untuk belajar disini! Gratis loh....

Itulah cara kerja text selection, jika kita memblok sebuah artikel atau paragrap maka akan terpilih sesuai dengan keinginan dan kita bisa menyalin artikel yang telah dipilih tersebut. Namun jika kita mendisable text selection ini maka hasilnya akan seperti pada poin 1 atau pada gambar yang bergerak diatas. Dan dengan menghilangkan fungsi text selection tersebut maka artikel tidak bisa di copy paste secara langsung

Dengan menggunakan kode CSS dari Text Selection ini lah, kita bisa melindungi blog kita agar artikel tidak bisa di copy paste. Dan untuk menerapkannya kedalam blog, salin kode berikut ini kedalam kode template blog

.disable_text_selection {
-webkit-touch-callout:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}

Dan salin markup html berikut ini untuk memanggil fungsi dari kode CSS disable_text_selection diatas. Penempatan kode markup sesuai dengan keinginan, bisa di artikel atau pun di bagian sidebar blog

<div class="disable_text_selection">
Letakkan artikel blog disini agar tidak bisa di copy paste
</div>

Jadi dengan menggunakan kode CSS dengan menghilangkan fungsi text selection tersebut maka artikel tidak bisa di copy paste secara langsung. Memang cara ini sangat sederhana namun setidaknya masih membingungkan orang yang akan melakukan copy paste terhadap artikel blog kita

Baru: Memasang Peringatan Anti Copy Paste di Blog

Memasang Peringatan Copy Paste di Blog - Memasang sesuatu di blog yang digunakan untuk memproteksi atau sekedar memberi peringatan atas kepemilikan yang kita terkadang menjadi sebuah dilema karena seampuh apapun proteksi yang dipasang, tetap saja mudah dikelabui. Pun begitu dengan artikel atau tulisan yang ada di blog, sudah banyak trik yang digunakan untuk melindungi keberadaan artikel blog kita, baik menggunakan script anti copy paste, anti klik kanan atau disable klik, bahkan beberapa cara yang digunakan agar tidak terjadi copy paste terhadap artikel blog ternyata hasilnya sia-sia belaka karena semua cara tersebut mudah ditembus dan dan mudah ditemukan titik lemahnya

Kenapa anti copy paste di artikel blog yang kita pasang mudah ditembus?
Karena kode-kode yang terdapat didalam template blog yang kita gunakan dari berbagai platform (Blogger, WordPress, Joomla, Tumblr, dan sebagainya) menggunakan open source yang sangat mudah dibuka dan diketahui, apalagi penggunaan open source tersebut juga semakin dipermudah dengan adanya program dari browser yang digunakan

Apakah memasang anti copy paste di blog sia-sia dilakukan?
Tidak. Karena dengan memasang anti copy paste tersebut akan sedikit mempersulit dalam melakukan copy paste terhadap artikel blog yang diinginkan, meskipun pada akhirnya artikel tersebut berhasil di salin,, hehehee

Dan bagaimana dengan artikel ini? Artikel ini hanyalah sebuah tips saja dan bukan script anti copy paste yang biasa dan sering banyak digunakan. Script pada artikel ini hanyalah peringatan agar tidak terjadi copy paste terhadap artikel blog. Peringatan akan muncul jika ada yang melakukan blok pada artikel, tidak hanya pada artikel, pada satu huruf pun didalam artikel tersebut akan memunculkan peringatan agar tidak melakukan copy paste

CSS Anti Copy Paste
Silahkan salin kode CSS berikut kedalam template blog Anda, salin sebelum kode ]]></b:skin> atau diantara <style type='text/css'>Code Disini</style>

.copypastetips {display:none;top:0;position:absolute;background:#333;color: #f16786;width:300px;height:32px;position:absolute;margin-left:-20px;padding:5px;opacity:0;filter: alpha(opacity=0);z-index: 99;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease;transition: all 0.3s ease-in-out;border-radius:3px;border:1px solid #333;}
.copypastetips span {position:absolute;content: " ";border: solid rgba(0, 0, 0, 0);border-width: 7px;height: 0;width: 0;margin: 0;top: auto;left: auto;top: 100%;border-top-color: #333;margin-left: -7px;left: 50%;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease;transition: all 0.3s ease-in-out;}
.copypastetips a {color:#f16786;}
.copypastetips:hover {background:#3D566E;}
.copypastetips:hover span {border-top-color:#3D566E;}
.copypastebox {position:relative;display:block;width:100%;height:100%;top:0;left:0;}
.copypastebox a {width:100%;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxHT0DQsaEo1kUSC6J1oJ2VRSxnBQrDyDb3vY95yYg4vM8S5ISIcarJm3NS6FUSgc2jKQeZYi1aMM4VO0HcC0jri6Cm_JYR5oSQl1mypeMshOYx7EUKMvT8-5NvMExg-FH4DbsEXNFVks/s1600/copy-paste.png) 0px 0px no-repeat;padding:0;left:0;top:0;height:100%;text-decoration:none;display:block;}
.sharingLink {display:block;position:absolute;text-indent:-9999px;}

JavaScript Anti Copy Paste
Silahkan salin kode berikut kedalam template blog Anda, salin sebelum kode </head>

<script type='text/javascript'>
      //<![CDATA[
$(document).ready(function() {
 cpShow='';
  $(document).mousemove(function(m) {
   generateTooltipPosition();
  });
});
$(document).mouseup(function() {
  $(document).mousemove(function(m) {
   generateTooltipPosition();
  });
 var cpShow=getcpShow();
 var copypastetips=document.getElementById("copypastetips");
 if (cpShow!='')showMeTooltip();

});
$(document).click(function() {
 var cpShow=getcpShow();
 var tooltipTitle = null;
 var newTooltipTitle = $("#copypastetips").attr("title");
  if (newTooltipTitle == "") return;
 if (newTooltipTitle !== tooltipTitle) $('#copypastetips').animate({ opacity: 0 }, 30);
 if (cpShow != "") showMeTooltip();
});
$(window).resize(function() {
 if ($('#copypastetips').show()){
    $('#copypastetips').animate({ opacity: 0 }, 30);
 }
});
function showMeTooltip() {
 var pageURL = window.location.toString();
 var myLink = "";
 
 $('#copypastetips').show();
 $('#copypastetips').animate({ opacity: 1 }, 30);
 $('#toMyLink').attr('href', myLink );
}
function getcpShow(){
  showCP = '';
  if(window.getSelection) {
                showCP = window.getSelection();
    generateTooltipPosition();
            }
            else if(document.getSelection) {
    showCP = document.getSelection();
    generateTooltipPosition();
            }
   return showCP;
}
function generateTooltipPosition(){
 var selection = window.getSelection && window.getSelection();
 if (selection && selection.rangeCount > 0) {
   range = selection.getRangeAt(0);
   pos = $(window).scrollTop();
   selection_text = selection.toString(),
   rect = range.getBoundingClientRect();
    $('#copypastetips').css({
      top: (rect.top + pos - 20) - 32 + 'px',
      left: rect.left + (rect.width/2) + 'px',
     });
  }
}
//]]>
</script>

HTML Markup Anti Copy Paste
Silahkan salin kode berikut kedalam template blog Anda, salin sebelum kode </body>

<div class='copypastetips' id='copypastetips'>
  <div class='copypastebox'><a href='/'><span/></a></div>
</div>

Cara Kerja Script Anti Copy Paste
Saat ada yang melakukan blok atau seleksi pada setiap artikel atau teks atau huruf didalam blog, maka akan muncul pernyataan atau pesan agar tidak melakukan copy paste terhadap artikel, teks, huruf, atau tulisan yang telah di blok atau di seleksi, baik sebagian atau pun keseluruhan

Demo untuk script Anti copy paste ini tidak saya terapkan di blog ini, dan berhasil saya terapkan di blog saya yang lain yang saya gunakan sebagai blog percobaan. Untuk hasilnya silahkan lihat pada video berikut ini