Cara Membuat HTML Tag kbd dengan Efek Double click to select pada Blog

Cara Membuat 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 dan tutorial ini cukup membantu pengunjung dalam melakukan copy past kode.

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 Dasboard - Pilih Tema
3. Klik Edit Tema

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 p code dibawah ini dan paste diatas]]></b:skin>

 /* CSS FOR KBD by alponse */
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 simpan template

Cara Terakhir
1. Buat Postingan Baru
2. Ada dua tombol Compose dan HTML
3. Pilih HTML
4. Lalu Copy Code dibawah ini

 <kbd>Masukan Disini</kbd>

5. Save dan Lihat hasilnya

Demikian Tutorial Membuat 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.