Membuat Efek Double Click To Select Menggunakan Tag Kbd

Membuat Efek Double Click To Select Menggunakan Tag Kbd
Membuat Efek Double Click To Select Menggunakan Tag Kbd

Membuat Efek Double Click To Select Menggunakan Tag HTML Kbd - Artikel kali saya akan memberikan tutorial blogger mengenai Cara membuat efek double click to select menggunakan tag kbd. Tujuannya yaitu untuk seleksi atau block kata yang diinginkan memanfaatkan tag <kbd>. 

Seperti yang kalian ketahui jika blog atau web yang berisi tutorial ada code yang kalian perlukan tanpa kalian block hanya dengan mengklik 2 kali otomatis kalimat penting itu akan terblock dengan sendirinya dengan menggunakan tag kbd ini. Sebenarnya fungsi tidak hanya itu. 

Tetapi kebanyakan blog dengan niche tutorial seperti saya menggunakan dobel klik to select ini untuk membantu para pengunjung menyeleksi dan mencopy kode tutorial tersebut agar tidak terlalu lama block dari awal sampai akhir karakter, seperti yang saya bilang sebelumnya.

Membuat Efek Double Click To Select Menggunakan Tag Kbd

  1. Pertama Silahkan kalin buka Dashboard blog kalian.
  2. Kemudian kalian ke menu Tema dan Kalian klik Edit HTML.
  3. Lalu kalian copy code dibawah ini tepat diatas tag </body> atau juga di atas tag </b:skin>

  4. kbd {background:#fff;border:1px solid rgba(0,0,0,0.1);border-radius:3px;box-shadow:0 1px 0 rgba(0,0,0,0.2), 0 0 0 2px #fff inset;color:#333;display:inline-block;font-size:12px;line-height:1.4;font-family:consolas;margin:0 .1em;padding:.1em .6em;font-weight:700;}
    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}
  5. Kemudian Simpan Template
Nah, setelah kalian menerapkan kode nya , tinggal masuk ke cara menggunakannya saja, sebenernya cukup simple kalian tinggal menggunakan pembuka tag kbd dan penutup tag kbd , seperti gambar dibawah ini :


Sampai dsini kalian sudah selesai, tinggal kalian lihat saja hasilnya.

Penutup

Nah jadi itulah cara pemasangannya, tentang Artikel "Membuat Efek Double Click To Select Menggunakan Tag Kbd" cukup simple bukan sobat , semoga cara ini bermanfaat bagi kalian ya , dan semoga website atau blog sobat jadi lebih rapih.