HTML kbd tag dengan Efek Double Click pada Blog

Element <kbd> sering di gunakan untuk membuat masukan perintah dari keyboard, dan bisa juga di gunakan untuk membuat perintah (voice command). Namun tag kbd ini juga di gunakan para pengguna situs web untuk membuat perintah di tengah teks, seperti blog Tutorial Umum sendiri juga menggunakan tag kbd untuk memudahkan pengunjung dalam mengcopy script/kode.

Langkah-langkah Memasang HTML kbd tag
1. silahkan buka Blogger > Template > Edit HTML > Kemudian cari kode ]]></b:skin> atau style .
2. copykan kode CSS berikut ini sebelum kode ]]></b:skin> atau style .

 kbd{position:relative;color:#28a1f0;-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} 

Konfigurasi :
• 📑#28a1f0 adalah warna teks kbd, warna tersebut bisa di ganti sesuai yang diharapan.
• 📑Double click to select adalah efek hover teks, tulisan tersebut bisa di ganti sesuai yang diharapan.
• 📑#4c4c4c adalah warna background dari hover teks, silahkan ganti sesuai keinginan.

Anda juga bisa mengubah warna tema background atau text dengan menggunakan kode warna seperti pada link HTML Color Code & Name

3. Masukan kode JavaScript 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> 

4. Simpan Tema

Cara Menggunakan HTML kbd tag
1. buat atau edit postingan yang telah ada
2. ketik script text pada tab compose terlebih dahulu

<b:loop valuaes='data:posts' var='post'>

3. selanjutnya pilih tab HTML, masukkan kode tag kbd di antara script yang dibuat seperti panduan script berikut ini.

<kbd>&lt;b:loop valuaes='data:posts' var='post'&gt;</kbd>

4. Publikasikan / Perbarui postingan yang anda buat & lihat hasilnya