Cara Modifikasi HTML Tag Kbd di Blogger

Ditulis oleh Arief Ghozaly 4 komentar

Kali ini, izinkan saya berbagi tutorial bagaimana caranya memodifikasi HTML tag <kbd> element untuk mempercantik artikel di blog. Tutorial ini sangat cocok diterapkan di blog yang membahas cara-cara seperti blog saya ini.

Contoh HTML tag <kbd> element yang sudah dimodifikasi:

Cantik sekali, bukan?

Cara Modifikasi HTML Tag <kbd> di Blogger

1. Masuk ke Blogger > Tema > Edit HTML

2. Simpan kode di bawah ini, di atas kode ]]></b:skin>

kbd{color: #fff; background: #263238; border-radius: 3px; padding: 2px 5px; box-shadow: 2px 2px 3px rgb(0 0 0 / 75%)}

3. Klik tombol simpan. OK selesai.

Gagal? Bisa diakali! 💢 Kita akan menggunakan tutorial dengan cara menggabungkan 2 kode tag kbd secara berdampingan.

1. Masih di Blogger > Tema > Edit HTML

2. Klik sekali pada template blogger (WAJIB).

3. Tekan tombol kombinasi CTRL dan F secara bersamaan.

4. Pada kolom pencarian yang muncul, ketik kata kunci: kbd dan tekan tombol Enter.

Hasil pencariannya kurang lebih:

code,kbd,samp{font-family:monospace,monospace;font-size:1em;color:#FF3333}

Gabungkan kode yang kita temukan seperti di atas, dengan kode tag kbd yang sudah dimodifikasi -- sehingga menjadi seperti ini:

code,kbd,samp{font-family:monospace,monospace;font-size:1em}kbd{color: #fff; background: #263238; border-radius: 3px; padding: 2px 5px; box-shadow: 2px 2px 3px rgb(0 0 0 / 75%)}small{font-size:80%}

Ya, benar. Kedua kode tersebut digabung bersebelahan.

UPDATE

Mau seperti ini?

kbd{color: #C62828;padding: 0 10px;background-color:#FFCDD2;border-radius:5px;font-weight:700}

Atau kode tag yang sudah dimodifikasi seperti ini?

kbd{color: #000; background: #E3F2FD; font-weight: 700;font-size: 80%; border: 1px solid #777; padding: 2px 5px; border-bottom-width: 2px; border-radius: 4px}

Itulah tutorial bagaimana caranya memodifikasi HTML tag <kbd> element untuk mempercantik artikel di blog. Semoga berguna.