Langkah Sederhana Membuat Efek Double Click To Select

Cara Membuat Efek Double Click To Select Menggunakan Tag HTML kbd - Kali ini Saya akan membagikan tutorial blogger mengenai Cara membuat efek double click to select menggunakan tag kbd. Tujuannya untuk seleksi atau block kata yang diinginkan memanfaatkan tag HTML <kbd>. Tutorial efek double click to select ini diadaptasi dari blog Arlina karena menurut Saya terlihat lebih keren. Selain itu menggunakan tag selection ini akan memudahkan ketika pembaca artikel akan mencopy sebuah script. Sebenarnya fungsi tidak hanya itu. Tetapi kebanyakan blog tutorial 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.

Memanfaatkan tag <kbd> untuk membuat seleksi text efek double click to select

Tag HTML sangat bermacam-macam dan mempunyai fungsi masing-masing. Dan tag kbd merupakan salah satu tag HTML yang masih disupport HTML5. Penggunaan elemen <kbd>...</kbd> digunakan untuk mengidentifikasi teks yang mewakili input keybord pengguna. Jadi digunakan untuk perintah input keyboard (kbd). Elemen <kbd> memperlihatkan teks yang harus diketik pada keyboard. Berbeda dengan tag <code>, tag <kbd> menggunakan gaya defalut font monoscope. Karena itu tag kbd tidak banyak digunakan. Untuk itu ditambahkan sedikit gaya untuk membuat tag HTML kbd lebih komunikatif dan bermanfaat seperti pada penggunaan double click to select ini. Dalam hal ini berfungsi untuk input javascript sebagai getselection dan menambakan CSS untuk membuat lebih variatif.

Langsung saja berikut ini cara membuat seleksi teks otomatis dengan efek double click responsive dengan tag kbd html.

1. Silahkan terlebih dahulu lagin ke Blogger.com Pilih tema edit html.

2. Cari kode ]]>

atau kode kemudian copy aja kode css dibawah ini, dan letakkan tepat sebelum kode tersebut.

 /* CSS FOR KBD */
kbd{position:relative;color:#770e0e;-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}  

Bagikan Artikel ini