Cara membuat style tag KBD keren pure CSS ala JejakPintar

Cara membuat style tag kbd ala JejakPintar - Halo sobat blogger, bagi kalangan para mastah dan suhu blogger yang sudah sangat mahir, mungkin sudah tidak asing lagi dong dengan istilah "kbd". Lalu buat sobat blogger pemula adakah yang sudah tahu apa itu kbd?

Oke tenang saja sobatku, disini admin akan menjelaskan terlebih dahulu apa itu kbd?

Jadi sobat, elemen kbd merupakan singkatan dari keyboard. Dimana tag kbd ini biasanya digunakan untuk membuat masukan perintah dari keyboard dan bisa juga digunakan untuk membuat perintah (voice command).

Namun tak jarang juga, tag kbd ini sering digunakan oleh para blogger (blog Tutorial) untuk memperjelas perintah ditengah teks dengan maksud agar pengunjung paham betul dengan maksud tutorial yang ada diblog tersebut.

Jika sobat masih bingung, bisa lihat contoh pengaplikasian tag kbd pada beberapa teks dibawah ini;

font-family:'Quicksand';

CTRL + C

CTRL + V

Memang apa sih keuntungannya memasang tag kbd pada blog kita?

Menurut admin keuntungan memasang tag kbd ini tak lain untuk menambah nilai lebih kepada pengunjung blog kita. Pasalnya jika kita memasang tag ini pada tulisan diblog kita, ini akan memberikan kesan yang menarik dimata pengunjung dan memudahkannya untuk mengikuti tutorial yang sobat berikan.

Jika blog kita menarik dimata pengunjung, otomatis pengunjung pasti akan sering mengunjungi blog kita kan?

Nah itulah keuntungan memasang style kbd pada tulisan blog kita.

Oke, mari kita lanjut ke cara membuatnya.

Cara Membuat Style Tag KBD keren pure CSS pada Blog

1. Silahkan sobat login ke akun blog kalian.
2. Masuk pada menu TEMA kemudian klik EDIT HTML.
3. Cari kode ]]></b:skin>
4. Kemudian copy kode css dibawah ini tepat diatas kode tersebut.

/* Style KBD ala jejakpintar.com*/
kbd {
background: #FFE591;
color: #222!important;
border-radius:4px;
padding:3px 8px;
}
kbdu {
background: #057B6F;
color: #fff!important;
border-radius: 4px;
padding: 3px 8px;
}

Silahkan sobat sesuaikan sendiri warna backgroundnya.

PENTING!!

Bagi sobat yang menggunakan template viomagz, silahkan hapus terlebih dahulu kode dibawah ini; untuk yang lainnya silahkan sesuaikan sendiri ya. Intinya hapus style kbd bawaan template sobat (jika ada).

kbd{font-size:80%;border:1px solid #777;padding:2px 5px;border-bottom-width:2px;border-radius:3px;}

5. Jika sudah, klik SIMPAN.

Lalu bagaimana cara menggunakannya?
1. Buat postingan baru atau edit artikel yang sudah ada.
2. Pada tampilan Entri Post pilih HTML jangn COMPOSE.
3. Lalu panggil kode css kbd tadi dengan cara;

<kbd>Masukkan kata disini</kbd>

4. Kemudian simpan dan lihat hasilnya.


Nah, bagaimana sobat? Mudah sekali bukan? Itulah sedikit ulasan dari JejakPintar tentang bagaimana cara membuat style tag kbd pure CSS pada blog. Semoga tutorial kali ini sangat bermanfaat yang buat sobat sekalian, jika ada yang ingin ditanyakan silahkan komen di bawah ini. Jangan lupa dishare ya, biar blog JejakPintar makin berkembang. Aamiin.

Subscribe Our Newsletter