Cara Membuat & Percantik Tag < kbd > Keren untuk Artikel Blog

Menurut dunia ilkom, tag <kbd> adalah singkatan dari keyboard, sebuah tag kode program yang diperuntukkan untuk teks yang berisi text inputan dari keyboard.

Nantinya tag <kbd> yang akan dimodifikasi atau dipercantik, tampilannya seperti di atas! 😁

Bagi saya, modifikasi tag <kbd> di atas cukup keren dan ciamik karena bentuknya mirip tombol papan ketik (keyboard) komputer dan laptop.

Modifikasi Tag < kbd > Keren Postingan Blog

1. Langkah pertama, buka template blogger, lalu pilih menu Edit HTML

2. Cari kode kbd atau kbd{ atau kbd {

3. Hapus kode tag <kbd> yang sudah ada, ganti dengan kode di bawah ini:

kbd{background-color: #eee;border-radius: 3px;border: 1px solid #b4b4b4;box-shadow: 0 1px 1px rgba(0,0,0,.2),0 2px 0 0 rgba(255,255,255,.7)inset;color: #333;display: inline-block;padding: 2px 2px 1px;line-height: 1.5em}

4. Simpan perubahan template blogger! 😉

Cara Membuat dan Pasang Tag < kbd >

Bagi teman2 yang ingin membuat, memasang, atau menambahkannya di dalam artikel blog; bisa dilakukan dengan cara berikut.

1. Buat dan tuntaskan artikel sampai selesai.

2. Lalu beralih ke mode tulis HTML (bukan compose).

3. Pada kode yang ditentukan, tambahkan kode <kbd> lalu tutup dengan kode </kbd>

Contohnya:

<kbd>&lt;/body&gt;</kbd>

Yang berarti membungkus kode </body>

Atau contoh lainnya:

<kbd>&lt;/head&gt;</kbd>

Yang berarti membungkus kode </head>

4. Coba tekan tombol "preview" untuk dicek. Jika sudah oke, tinggal dipublikasikan saja artikelnya seperti biasa.

Variasi Tag < kbd > Template Blogger

kbd {margin: 0;padding: 0;border: 0;outline: 0;color: white;font-size: 100%;font-family: monospace, sans-serif;vertical-align: baseline;background: transparent;border-color: #e6e6e6 #bebebe #bebebe #e6e6e6;border-style: solid;border-width: 1px 3px 4px;padding: 0 5px;background-color: #d2d2d2;background-color: rgba(210, 210, 210, 0.9);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px}

kbd {-moz-border-radius: 3px;-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;-webkit-border-radius: 3px;-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;background-color: #f7f7f7;border: 1px solid #ccc;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-family: monospace, sans-serif;font-size: 100%;line-height: 1.4;margin: 0 0.1em;padding: 0.1em 0.6em;text-shadow: 0 1px 0 #fff}

Itulah cara membuat, memasang, menambahkan, modifikasi, dan variasi mempercantik tag <kbd> di artikel dan template blogger.

Labels: Blogger,
Terima kasih sudah membaca Cara Membuat & Percantik Tag < kbd > Keren untuk Artikel Blog! Bagikan artikelnya, ya!

Main Blog SEO Blogger sejak 2014. Teknik Komputer dan Jaringan (TKJ) Tahun 2012.

Berbagi :