Fungsi Tag KBD dan Penerapannya di Blog

Fungsi Tag KBD dan Penerapannya di Blog

Fungsi Tag KBD dan Penerapannya di Blog


Assalamu'alaikum sahabat infoalya.com, apakabarnya ? admin doakan semua dalam keadaan baik, sehat dan banyak rejekinya yaaa..... Aamiin.

Kali ini admin ingin mengajak kawan semua untuk mengenal salah satu jenis tag yang bisa kita manfaatkan untuk menghiasi blog kita, yuukk dibaca.

Tag <kbd> kependekan dari keyboard. Fungsi dari tag ini adalah mendefinisikan teks yang di input dari keyboard, umumnya font yang ditmpilkan dengan menggunakan tag ini adalah monospace

Berikut adalah contoh penggunaan tag  <kbd> tersebut

<!DOCTYPE html>


<html>

<head>

<title>Yuukk Belajar HTML di infoalya.com</title>

</head>

<body>

<h3>Saya senang belajar HTML di infoalya.com</h3>

<p>HTML adalah kependekan dari

<kbd>Hypertext Markup           Language</kbd></p>

</body>

</html>

dan hasilnya seperti ini TAG KBD
baiklah kawan karena secara umum kita telah memahami fungsi dari tag <kbd> maka sekarang kita terapkan di blog yuukk.

Untuk menghiasi blog dengan tag ini kita hanya perlu menambahkan CSS dibawah ini

kbd{position:relative;color:#000000}kbd:before{position:absolute;content:'Double click to select';display:table;bottom:23px;left:0;background:#4c4c4c;color:#00ffe4;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}kbd,blockquote{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}kbd{display:inline-block;border:1px solid #979797;box-shadow:2px 2px 1px#979797;border-radius:3px;padding:.2em .5em;margin:.2em;transition:all .3s}kbd:hover{border-color:#000000;color:#FF0000}kbd,blockquote{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder,input:-moz-placeholder,textarea:-moz-placeholder,input.placeholder_text,textarea.placeholder_text{color:#888}[placeholder]:focus::-webkit-input-placeholder{transition:opacity .5s .5s ease;opacity:0}

Jika ingin menghilangkan inlinenya kawan hanya menghapus kode dibawah ini saja

kbd:before{position:absolute;content:'Double click to select';display:table;bottom:23px;left:0;background:#4c4c4c;color:#00ffe4;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}


maka secara keseluruhan kodenya seperti ini

kbd{position:relative;color:#000000}kbd:hover:before{transform:scale(1.0);opacity:1;visibility:visible;transition:all .3s}kbd,blockquote{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}kbd{display:inline-block;border:1px solid #979797;box-shadow:2px 2px 1px#979797;border-radius:3px;padding:.2em .5em;margin:.2em;transition:all .3s}kbd:hover{border-color:#000000;color:#FF0000}kbd,blockquote{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder,input:-moz-placeholder,textarea:-moz-placeholder,input.placeholder_text,textarea.placeholder_text{color:#888}[placeholder]:focus::-webkit-input-placeholder{transition:opacity .5s .5s ease;opacity:0}


ini adalah contoh penerapan tag <kbd> di blog


Baiklah kawan untuk hari ini itu dulu yang dapat admin sampaikan, jumpa lagi dilain hari yaa, see you...💓💗💖💕

Share On:

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

[+] Silahkan tinggalkan komentar
[+] Berkomertarlah dengan santun
[+] Mohon tidak meninggalkan live link
[+] Terima kasih untuk komentar anda

https://infoalya.com

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - https://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Info Alya? Keep us running by whitelisting Info Alya in your ad blocker.

This is how to whitelisting Info Alya in your ad blocker.

Thank you!

×
×
×