Cara Membuat HTML Tag kbd dengan Efek Double click to select - Minta Ilmu Cara Membuat HTML Tag kbd dengan Efek Double click to select - Minta Ilmu

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.
Show comments
Hide comments

0 Response to "Cara Membuat HTML Tag kbd dengan Efek Double click to select"

Posting Komentar

Silahkan Anda berkomentar yang baik, menarik Dan Benar sesuai dengan isi Postingan Minta Iilmu .com.
Komentar-Komentar yang tidak diperbolehkan Di dalam Postingan Ini :

1. Berbau penghinaan SARA ,PXXN & SPAM
2. Komentar dengan Link hidup (SPAM)
3. Komentar tidak nyambung dengan isi postingan

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel