Cara Membuat Tag KBD Seperti Arlinadzgn

Athhar Kautsar   7/17/2017   blogger  

Tag kbd? Apa sih itu? Tag kbd adalah tag yang merepresentasikan input (masukkan) dari user (biasanya masukkan karakter/kata dari keyboard yang diketik oleh user, atau dapat pula hasil masukkan dari alat lainnya, seperti perintah suara (voice command)). [src: http://dul.web.id/belajar/html/tag-element/kbd.php]

Pada dasarnya tag kbd terlihat seperti gambar dibawah ini.

Nah pada artikel kali ini saya akan mengubah style tag kbd tersebut seperti yang digunakan didalam blog arlinadzgn, untuk contohnya bisa dilihat digambar yang pertama.

Cara Membuat Tag KBD Seperti Arlinadzgn

1. Masuk ke Blogger > Tema > Edit HTML

2. Salin kode dibawah ini dan simpan diatas kode ]]></b:skin> atau </style>.

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}

3. Salin lagi kode dibawah ini dan simpan diatas 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>

4. Simpan Template!

Jika masih ada yang kesulitan atau gagal silahkan berikan tanyakan pada kolom komentar.