Cara Membuat Double Click To Select Dalam Postingan Blog

Kembali lagi bersama sobat husen, kali ini kita akan membahas tentang cara membuat Double click to select menggunakan tag kbd pada blogger. Mungkin dari sebagian orang sudah mengetahui fungsi dari menggunakan tag <kbd> </kbd> ini. Bagi yang belum tahu dapat di simak di artikel sobat husen ini.

Fungsi dari Double Click To Select menggunakan kode <kbd> ini berfungsi untuk mempermudah pengunjung dalam melakukan copy & paste suatu kata atau kalimat yang penting. Contoh kasus penggunaan Double Click To Select.

Kasus: Setelah masuk ke dalam halaman blogger.com selanjutnya masuk ke dashboard > Tema > Edit HTML kemudian cari </head>

Dengan cara double click to select  </head> diatas pengunjung dengan mudah dengan cara klik kata tersebut dengan double klik maka secara otomatis kata ter-block dan pengunjung tinggal menekan CTRL+C untuk meng-copy kata penting tersebut. Baca juga Cara Membuat Kotak Script Dalam Halaman Postingan Blog

Cara Membuat Double Click To Select Dalam Postingan Blog

# Langkah 1: Masukan Kode CSS KBD

Pertama sobat harus login terlebih dahulu ke blogger.com kemdian masuk ke dashboard > Tema > Edit HTML. 

Kemudian cari kode ]]></b:skin> atau </style> simpan kode tersebut di atasnya, copy & paste kode css untuk <kbd> dibawah ini.

/* CSS KBD www.sobathusen.com */
kbd{position:relative;color:#47c0ba;-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}

Catatan: Anda dapat mengganti kode warna dan text yang telah di tandain di atas

• Kode #47c0ba mengganti warna teks yang ditandai <kbd>

• Tulisan Double click to select mengganti teks yang akan muncul ketikan kursor di arahkan

• Kode #4c4c4c mengganti background teks hover yang muncul <kbd>

• Size 75% mengganti ukuran text hover yang muncul <kbd>

# Langkah 2: Masukan Script Pre Auto Selection

Terakhir masukan script pre auto selection dengan mencari kode </body> simpan di atas kode tersebut. copy & paste kode script dibawah ini.

<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 Menggunakan Double Click To Select Dalam Postingan Blog

Caranya sangat mudah sekali sobat tinggal buka entri baru atau halaman baru, kemudian masuk ke mode HTML kemudian ketikan kode berikut ini.

<kbd>TULISAN ANDA DISINI ...!</kbd>

Hasil penulisan kode diatas akan seperti dibawah ini.

TULISAN ANDA DISINI ...!

Begitulah Cara Membuat Double Click To Select Dalam Postingan Blog semoga membantu dan bermanfaat bagi kalian. Wassalamualaikum.