Cara Membuat Teks seperti Tombol Keyboard Dengan Code KBD Di Dalam Postingan Blogger

Blogger yang membahas tentang teknologi dan tutorial, menampilkan tombol dalam kalimat bisa berperan penting untuk memudahkan pembaca dalam mengikuti setiap langkah tutorial yang ada.

Penggunaan Tampilan tersebut lebih efektif dan meningkatkan kualitas artikel dari sisi tampilannya sehingga artikel yang anda buat terlihat profesional. 

Beberapa template blog sebenarnya sudah memiliki tampilan tag atau css bawaan yang didalamnya memuat pengaturan css untuk menampilkan tombolnya. Tapi tak sedikit pula template yang tidak memiliki tag atau css yang sudah mendukung kbd tombol keyboard.

---

Bagi anda yang ingin menambahkan tombol seperti ini contoh: Ctrl + F anda bisa mengecek terlebih dahulu apakah pada template yang anda gunakan sudah memiliki tag css KBD.

Cara melihat taq ccs kbd di template

• Masuk ke menu Tema
• klik panah bawah disamping tombol SESUAIKAN
• Edit HTML - Pada html template cara mencari tekan Ctrl + F dan ketikan "kbd" kolom pencarian.

Jika belum ada maka simak tutorial dibawah ini dengan seksama agar tampilan tombol muncul dengan baik di postingan blog anda.

---

Cara menambahkan Tampilan Teks berbentuk Tombol Keyboard di Blogger

1.  Buka Blogger dan masuk ke menu Tema. 
2.  Klik panah bawah pada tombol SESUAIKAN, lalu masuk ke Edit HTML.
3. Cari kode ]]></b:skin>, jika kesulitan mencari gunakan Ctrl + f masukan kedalam kotak pencarian, jika sudah ketemu salin kode ccs dibawah ini dan letakan tepat diatas nya. Dan selanjut nya tekan tombol Simpan.

kbd { border: 0.1px solid rgb(128, 128, 128);
      font-weight: bolder;
      font-size: 1.2em;
      box-shadow: 0.5px 0 2px 0 #eeeeff,
      0 2px 0 2px rgb(173, 173, 173),
      0 1.8px 0 2.4px rgb(83, 80, 80);
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      margin: 2px 3px;
      border-radius: 3px;
      padding: 1px 6px;
        }'

Penggunaan taq KBD, untuk menampilkan di dalam Postingan:

1. Pastikan kode diatas sudah terpasang sesuai langkahnya.
2. Saat membuat artikel ubah tampilan menjadi tampilan HTML.
3. Untuk penulisannya seperti dibawah ini: <kbd>Ctrl</kbd> + <kbd>C</kbd>
4. Memastikan apakah berhasil atau tidak nya silahkan klik tombol pratinjau Postingan terlebih dahulu sebelum di publikasikan.

Contoh hasil:

Please press Ctrl + Shift + R to re-render an MDN page.

Go to Link