Cara Menciptakan Html Kbd Tag Dengan Pengaruh Double Click To Select

Element <kbd> biasa di gunakan untuk menciptakan masukan perintah dari keyboard, dan dapat juga di gunakan untuk menciptakan perintah (voice command). Namun tag kbd ini juga di gunakan para pengguna situs web untuk menciptakan perintah di tengah teks, menyerupai blog sendiri juga memakai tag kbd untuk menciptakan sebuah perintah untuk pengunjung. Untuk itulah pada tutorial kali ini saya akan menunjukkan cara menciptakan HTML kbd tag dengan imbas double click to select.

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

Agan juga dapat mengatur warnanya sesuai cita-cita agan. Dan juga untuk imbas hover teksnya, agan juga dapat menggantinya sesuai cita-cita agan. Apabila agan tidak ingin memakai JavaScript dari tag kbd ini, agan tidak perlu memasukan JavaScriptnya, alasannya JavaScript dari tag kbd ini di gunakan semoga 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 sajian Tema, klik Edit HTML, lalu masukan arahan 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 yaitu warna teks kbdnya, silahkan ganti warnanya sesuai cita-cita agan.
• Double click to select yaitu imbas hover teks, silahkan ganti sesuai cita-cita agan.
• #4c4c4c yaitu warna background dari hover teks, silahkan ganti sesuai cita-cita agan.
• Selanjutnya masukan arahan 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 menyerupai teladan 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 menciptakan HTML kbd tag dengan imbas 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 , semoga artikel ini bermanfaat untuk agan atau sista. Untuk tutorial yang lainnya mengenai tutorial blogging, silahkan tetap kunjungi blog .

• Twitter
• Facebook
• Google
• Pinterest

Subscribe to receive free email updates: