Cara Membuat HTML kbd tag dengan Efek Double click to select

Element <kbd> biasa 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 membuat sebuah perintah untuk pengunjung. Untuk itulah pada tutorial kali ini saya akan memberikan cara membuat HTML kbd tag dengan efek double click to select.

(Baca juga : Cara Membuat Efek Tombol Keyboard di Blogger Dengan CSS)

Agan juga bisa mengatur warnanya sesuai keinginan agan. Dan juga untuk efek hover teksnya, agan juga bisa menggantinya sesuai keinginan agan. Apabila agan tidak ingin menggunakan JavaScript dari tag kbd ini, agan tidak perlu memasukan JavaScriptnya, karena JavaScript dari tag kbd ini di gunakan agar memudahkan pengunjung untuk memblok text kbdnya.

Untuk tampilan element kbd tag ini, silahkan lihat di bawah ini.

Langsung saja untuk cara memasang HTML kbd tag ini, silahkan ikuti langkah-langkah dari saya di bawah ini.

(Baca juga : Cara Membuat Syntax Highlighter Otomatis Tanpa Javascript di Blogger)

Cara Memasang HTML kbd tag dengan Efek Double Click To Select di Blog

• Langkah pertama silahkan masuk ke akun Blogger agan
• Pilih menu Tema, klik Edit HTML, kemudian masukan kode CSS di bawah 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}

• Pengaturan :
• #28a1f0 adalah warna teks kbdnya, silahkan ganti warnanya sesuai keinginan agan.
• Double click to select adalah efek hover teks, silahkan ganti sesuai keinginan agan.
• #4c4c4c adalah warna background dari hover teks, silahkan ganti sesuai keinginan agan.
• Selanjutnya masukan kode JavaScriptnya 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>

• Setelah selesai, pilih Simpan tema.

(Baca juga : Cara Membuat Button Dengan Animasi Bounce Effect)

Cara Menggunakan HTML kbd tag

1. Langkah pertama silahkan masuk ke artikel agan.
2. Masuk ke tab HTML.
   
3. Kemudian masukan tag kbdnya seperti contoh di bawah ini.
   
4. Setelah selesai, silahkan lihat artikel blog agan yang sudah di edit.

(Baca juga : 2 Cara Membuat Sticky Widget Sidebar dengan CSS dan jQuery)

Demikian tutorial dari saya mengenai cara membuat HTML kbd tag dengan efek double click to select. Jika ada pertanyaan mengenai HTML kbd tag ini dan cara pemasangannya, silahkan masukan ke dalam kolom komentar.

Terima kasih sudah berkunjung di blog Tutorial Umum, semoga artikel ini bermanfaat untuk agan atau sista. Untuk tutorial yang lainnya mengenai tutorial blogging, silahkan tetap kunjungi blog Tutorial Umum.

Share this