Cara Membuat HTML Tag kbd dengan Efek Double click to select

Mintailmu.com - Cara Membua Tombol HTML Tag "kbd" dengan Efek Double click to select - Pada kesempatan kali ini saya akan berbagi tutorial Bagaimana Cara Membuat Selection HTML Tag kbd dengan Efek Double click to select, ini digunakan untuk memepermudal melakukan select agar tidak susah mengklik sebuah kode, dan lebih bagus di lihat.

Elemen kbd merupakan singkatan dari Keyboard. Dimana tag <kbd> </kbd>  digunakan untuk merepresentasikan masukkan dari user (berupa karakter dari keyboard atau dari alat lainnya seperti perintah suara (voice command).

Baiklah agar tidak banyak basi, mari kita mulai Tutorial Bagaimana Cara Membuat Selection HTML Tag kbd dengan Efek Double click to select ini, lihat dan pahami langkah-langkah berikut ini :

Cara Membuat HTML Tag kbd dengan Efek Double click to select

Cara Pertama :
1. Buka Blogger - Login
2. Masuk ke dashboard - Pilih Tema
3. Klik Edit HTML

Cara Kedua :
1. Masuk ke Edit HTML
2. Lalu cari kode ]]></b:skin> ,Tekan Ctrl + F  untuk mempermudah mencari kode agar lebih cepat
3. Jika sudah dapat kode tersebut, lalu copy kode di bawah ini di atas ]]></b:skin>

/* CSS FOR KBD */
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} 

4. Jika sudah lalu masukan kode JavaScript, Cari kode </body>, Jika sudah ketemu letakan kode di bawah ini tepat di atasnya 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> 

5. Lalu simpan atau save template.

Cara Terakhir :
1. Buat Postingan Baru
2. Ada dua tombol Compose dan HTML
3. Pilih HTML
4. Lalu Copy Kode Di bawah ini

<kbd>Masukan Disini</kbd> 

5. Save dan Lihat hasilnya

Nah itulahMembuat HTML Tag kbd dengan Efek Double click to select Responsive , sangat mudah bukan. ? Semoga tutorial ini dapat bermanfaat dan membantu anda, jika ada yang ingin di tayakan bisa koment di bawah ini. Terima kasih.

Share this post

Post Terikat