Cara Memasang Anti Copas, Syntax Highligter dan Double Clik To Select Text

Menulis menjadi salah satu kegiatan yang cukup menyenangkan bagi sebagian orang terutama dikalangan Blogger. Menulis menurut Admin pribadi, merupakan suatu bentuk penuangan ide yang terlintas dalam pikiran kita dimana terkadang ide-ide yang tak sempat diutarakan dalam bentuk ucapan atau tutur kata justru melalui tulisan ide-ide tersebut dapat tertuang dengan sangat baik dan terstruktur. Menulis di blog ini juga admin gunakan sebagi catatan, dimanapun dan kapanpun dapat diakses untuk dipelajari kembali.

A. Memasang Anti Copy Paste

Keaslian dari sebuah tulisan itu harus diutamakan sekalipun tulisan dari Sobat SD tidak memenuhi kaidah menulis yang baik. Platform Blogger sendiri telah mendukung pemasangan kode script penangkal copy paste sehingga peluang plagiat artikel dapat diminimalkan. Cara kerja script anti copas yaitu ketika script ini telah terpasang pada situs maka yang terjadi adalah setiap tulisan atau konten pada situs anda akan terlindungi dari kejahatan copy paste terutama dari teknik copas yang sering dilakukan kebanyakan orang seperti klik kanan - copy - paste.

Walaupun pada dasarnya, ada beberapa cara yang dapat digunakan untuk tetap dapat mencopy artikel kita, namun pengetahuan mengenai hal tersebut hanya dimiliki oleh segelintir orang yang memiliki pengetahuan khusus untuk itu. Admin berpendapat bahwa kebanyakan pembaca hanya ingin mengetahui ataupun memperoleh sedikit pengetahuan dari artikel yang kita buat.

Untuk itu walaupun fitur anti copy paste tidak menjamin bahwa artikel aman dari plagiat, Admin tetap memasangnya. Bagi Sobat SD yang juga ingin menggunakannnya dapat mengikuti cara berikut:

1. Letakkan script dibawah ini diatas atau sebelum kode ]]></b:skin>.

#post-body {
 user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 -khtml-user-select:none;
 -webkit-user-select:none
}

#post-body pre code {
 user-select:text;
 -moz-user-select:text;
 -ms-user-select:text;
 -khtml-user-select:text;
 -webkit-user-select:text
}

Untuk pengguna template Jettheme dapat langsung menggunakan sript diatas, sedangkan untuk pengguna template Viomagz dan Linkmagz, ganti yang diberi higlight dengan (.post-body). Script pertama untuk memblokir seluruh text kecuali gambar untuk dapat di copy paste, sementara script yang kedua memberikan pengecualian untuk text yang menggunakan kode "pre code" ataupun yang memiliki srcipt style seperti user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text, yang biasa ditemukan seperti dalam kode script syntax higlighter.

B. Membuat Syntax Highlihter

Syntax Highligter adalah fitur editor teks yang digunakan untuk bahasa pemrograman, skrip, atau markup, seperti HTML. Fitur ini menampilkan teks, terutama kode sumber, dalam berbagai warna dan font sesuai dengan kategori istilahnya. Fitur ini banyak digunakan dalam banyak konteks terkait pemrograman (seperti manual pemrograman), baik dalam bentuk buku berwarna atau situs web online untuk memudahkan pemahaman pembaca.

Selain untuk mempercantik tampilan blog, syntax highlihter juga digunakan untuk memudahkan menyalin text atau code yang dikecualikan pada blog yang memasang anti copy paste. Syntax Highlihter yang saya share kali ini tidak berwarna-warni seperti pada umumnya karena admin pribadi tidak suka dan agak sulit memahami/membedakan kode yang ada bila terlalu banyak warna.

1. Untuk membuat syntax highlihter, Sobat SD sesuaikan dengan masing-masing template yang digunakan. Untuk pengguna viomagz dan linkmagz langsung saja cari pada template kode </style>. Salin script dibawah ini, lalu tempatkan diatas/sebelum kode </style> tersebut.

.post-body pre {
  background-color: #292E34; /* warna background */
  border-left: 5px solid #008c5f; /* variasi border kiri */
  padding:0; margin:.5em auto; white-space:pre; word-wrap:break-word; overflow:auto; position:relative; width:100%; -moz-tab-size:2; -o-tab-size:2; tab-size:2; word-break:normal; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none; hyphens:none;
}
.post-body pre code {
  color: #f67938; /* warna huruf */
  font-size: 13px; /* ukuran huruf */ 
  max-height:250px; line-height:1.5em; display:block; background:none; border:none; padding:10px 15px; font-family:'source code pro',menlo,consolas,monaco,monospace; overflow:auto; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text
}

2. Untuk pengguna template JetTheme seperti yang Admin gunakan silahkan cari kode berikut /* JetTheme Style */. Bila ditemukan, perhatikan kode script dibawah /* JetTheme Style */ yang seperti dibawah ini:

pre {background-color: var(--jt-bg-light); margin-bottom: 1rem; padding: 1rem; font-size: 0.75rem;}

Hapus kode script tersebut dan ganti dengan kode dibawah ini:

pre {
  background-color: var(--jt-bg-light); /* warna background */
  border-left: 5px solid #008c5f; /* variasi border kiri */
  padding:0; margin:.5em auto; white-space:pre; word-wrap:break-word; overflow:auto; position:relative; width:100%; -moz-tab-size:2; -o-tab-size:2; tab-size:2; word-break:normal; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none; hyphens:none;
}
pre code {
  color: #f67938; /* warna huruf */
  font-size: 13px; /* ukuran huruf */ 
  max-height:250px; line-height:1.5em; display:block; background:none; border:none; padding:10px 15px; font-family:'source code pro',menlo,consolas,monaco,monospace; overflow:auto; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text
}

3. Untuk penggunaannya pada postingan, alihkan ketampilan HTML, lalu masukkan script dibawah ini:

<pre><code>ganti kalimat highlight berikut dengan kode syntax highligter sobat sd</pre></code>

C. Membuat Double Clik To Select

Fitur Double Clik To Select ini tidak bisa lepas dari blog yang memasang anti copy paste, terutama yang mempunyai postingan yang memiliki kode HTML, CSS, Makro dan kode lainnya. Fitur ini digunakan sebagai seleksi text yang dikecualikan dalam kode anti copy paste yang mana memudahkan pencarian text kode dalam pengeditan template. Code script ini dapat digunakan pada template Viomagz, Linkmagz dan Jettheme. Untuk Sobat SD yang ingin memasangnya ikuti cara berikut:

1. Letakkan script dibawah ini pada bagian atas atau sebelum kode ]]></b:skin>

/* CSS FOR KBD */
kbd{background-color: var(--jt-bg-light);color:#FF8C00;position:relative;-moz-border-radius:5px;box-shadow:0 0 5px #00008B;font-size: 13px;font-family:&#39;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;}
kbd:before{
  position:absolute;
  content:'Double click to select';
  display:table;
  bottom:23px;
  left:0;
  background:#4c4c4c;
  color:#fff;
  padding:4px;
  border-radius:2px;
  font-size:75%;
  line-height:1;
  opacity:0;
  visibility:hidden;
  transform:scale(0.8);
  z-index:2;
  transition:all .3s;}
kbd:hover:before{widht:100transform:scale(1.0);opacity:1;visibility:visible;transition:all .3s}

keterangan :

var(--jt-bg-light) = warna background dasar pada template Jettheme

#FF8C00 = warna huruf kode select text

#4c4c4c = warna backgoung hover content "double klik to select

#fff = warna huruf hover content "double klik to select

2. Letakkan script dibawah ini pada bagian atas atau sebelum kode </body>

<script type='text/javascript'>
//<![CDATA[
//Pre Auto Selection
var pres = document.querySelectorAll('kbd');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
//]]>
</script>

3. Untuk penggunaannya pada postingan, alihkan ketampilan HTML, lalu masukkan script dibawah ini: