Cara Membuat Efek Double Click to Select di Postingan Blogger

Jagoandzgn.com - Pada kesempatan kali ini saya akan memberikan bagaimana Cara Membuat Efek Double Click to Select di Postingan Blogger,selection ini biasanya sangat sering digunakan untuk para blogger yang membahas tentang tutorial tujuannya untuk mempermudah pembaca bila ingin mempraktekan tutorial yang dibuat dengan klick kata dituju agar pembaca tidak harus mengcopy paste lagi.

Terlebih lagi apabila kamu memasang kode script antri copas dengan tag kbd yang dipasang pada HTML akan memberikan efek khusus pada kata yang kita inginkan di blog agar bisa diseleksi menggunakan double click.

Keuntungan Memasang Double Click di Blogger

- Mempermudah pengunjung menerapkan tutorial yang ada didalam artikel dan melindungi dari pencurian artikel.
- Agar pengunjung dapat mengcopy kode tersebut tanpa perlu copy [klick kanan].
- Membuat blog lebih proffesional.

apabila kamu memasang kode script anti copas dengan efek double click ini, kamu tidak perlu khawatir karena kata yang di berikan kepada tag kbd bisa di copy paste dengan mudah.

Cara Membuat Efek Double Click to Select di Postingan Blogger

1. Silahkan kamu login ke blogger.com dengan menggunakan Gmail.
2. Masuk kemenu Dashboard dan klick menu TEMA > Klick Edit HTML.
3. Silahkan kamu cari kode berikut ini ]]></b:skin> dan kemudian kamu copy kode css dibawah ini, dan letakkan kode tersebut SEBELUM kode ]]></b:skin>.

/* CSS FOR KBD */
kbd{position:relative;color:#770e0e;-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{transform:scale(1.0);opacity:1;visibility:visible;transition:all .3s}

#770e0e adalah kode warna tag kbd ditampilkan
Double click to select adalah tulisan efek Hover
#4c4c4c adalah warna Background teks hover kbd
75% adalah ukuran font teks hover

Agar lebih responsive silahkan kamu modifikasi kode diatas sesuai dengan selera kamu masing - masing.

4. Selanjutnya silahkan kamu cari kode </body> letakkan kode js berikut ini tepat sebelum kode </body> tersebut.

<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>

Cara Penerapan Tag HTML kbd di Postingan

Silahkan kamu buat postingan baru setelah, dan masuk ke mode HTML dan pilih kata yang ingin kamu beri efek Double Click to Select seperti berikut ini.

<kbd>Ketikkan teks disini</kbd>

Silahkan kamu ganti tulisan Ketikkan Teks disini dengan teks pilihan kamu. Sebelum kamu memasukan tag HTML dan Javascript silahkan kamu parse dahulu kodenya agar kode bisa berfungsi. untuk Parsenya klick Disini.