sekolahandroid.net – Helo gays kali ini saya akan berbagi ilmu tutorial membuat tombol keyboard pada postingan blog. Untuk kamu yang hobi ngeblog atau kamu yang bekerja menjadi publisher menulis artikel jenis tutorial dan sejenisnya seringkali mememasukan shortcut keyboard di artikel.
Ketika kita menuliskan tombol shortcut keyboard di artikel seperti ( Ctrl + Shift ) sudah pasti hanya akan menampilkan huruf atau karakter saja tanpa muncul gambar tombol keyboard yang anda bayangkan.
Sebagai pembelajaran untuk orang awam kenapa tombol keyboard yang kita tulis gak muncul dalam bentuk gambar keyboard di artikel? Jawabanya sederhana artikel yang kita tulis di blogger atau wordpress isi situs web ditampilkan ke layar HP, Tablet, laptop, Notebook dan Komputer dalam bentuk Kode HTML sedangkan untuk tatak letak, gaya, warna, font dan semua tentang mempercantik tampilan situs web disusun dengan kode CSS.
jadi untuk membuat tombol keyboard di artikel postingan blog yang diperlukan adalah dengan menambahkan kode CSS tambahan. Disini saya akan memberikan 2 pilihan sesuai dengan kebutuhkanmu.
Tombol Keyboard Nyata
Tombol Shortcut keyboard nyata menampilkan tombol yang sama persis dengan aslinya. Sehingga mempermudah pemahaman pembaca dan mempercantik tampilan artikel. Tombol ini bisa digunakan untuk blogger, wordpress dan lainnya.
Yang perlu anda lakukan adalah dengan menambahkan kode atau link css berikut di bagian <head> di sini </head> untuk blogger. Dan di menu Costum Codes di wordpress.
Link CSS Tombo Keyboard
<link rel="stylesheet" href="https://unpkg.com/keyboard-css@1.2.4/dist/css/main.min.css" />
Memasang Kode CSS di WordPress
- Buka situs
- masuk ke menu admin
- Cari menu Header Code ( Perlu diingat di beberapa theme wordpress memiliki sedikit perbedaan setting yang perlu Anda perhatikan adalah cari menu untuk memasukan kode tambahan dengan sinonim seperti costum code yang intinya kode <head></head> )
- Contoh setting janah theme sebagai berikut : Jannah > General > Costum Codes >Header Codes > disini
Memasang Kode CSS di Blogger
- Masuk ke blogger.com
- Pilih Tema > Costum (edit) > Sesuaikan > Edit HTML
- Akan muncul kode sumber blog, langkah selanjutnya cari kode </head> untuk mempermudah pencarian klik + Bersamaan.
- Setelah ketemu pastkan link css di atas kode </head>
- klik simpan / gambar memori di sudut kanan.
Panduan Membuat Tombol Keyboard di Artikel
WordPress : Pastikan sudah di dalam mode edit atau buat post > Klik Teks untuk menampilkan kode tersembunyi untuk memasukan css.
Blogger : Pastikan dalam mode edit atau buat post > Klik icon pensil di sudut kanan atas di bawah judul > Tampilan HTML
Tempatkan kode berikut sesuai kebutuhan di bagian tulisan artikel.
Penggunaan Dasar
Tekan <kbd class="kbc-button">/</kbd> untuk mencari di situs ini.</h4>
Tekan <kbd class="kbc-button">Ctrl</kbd> + <kbd class="kbc-button">Shift</kbd> + <kbd class="kbc-button">R</kbd> untuk merefresh situs.
Hasil :
Tekan / untuk mencari di situs ini.
Tekan Ctrl + Shift + R untuk merefresh situs.
Hapus Perbatasan Permukaan
Untuk menghilangkan pembatas tombol cukup dengan menambahkan no-container di class.
<kbd class="kbc-button no-container">B</kbd> <button class="kbc-button no-container">B</button> <a class="kbc-button no-container">B</a>
Hasil :
B
B
Berurutan
Jika Anda membutuhkan dengan ukuran yang berbeda-beda kode ini cocok untuk kebutuhanmu dari ukuran kecil sampai besar.
<button class="kbc-button kbc-button-xxs">XXS</button>
<button class="kbc-button kbc-button-xs">XS</button>
<button class="kbc-button kbc-button-sm">SM</button>
<button class="kbc-button">MD</button>
<button class="kbc-button kbc-button-lg">LG</button>
Hasil :
Mode
Tombol juga memiliki 4 mode yang bisa Anda pilih antaran lain.
:hover = Melayang, :focus = fokus, :active = aktif, dan :disabled = non-aktif.
<button class="kbc-button hover">Melayang</button> <button class="kbc-button focus">Fokus</button> <button class="kbc-button active">Aktif</button> <button class="kbc-button disabled">non-aktif</button>
Hasil :
Warna
Untuk Anda yang ingin menambah warna gunakan kode berikut ada banyak pilihan yang bisa Anda gunakan.
<kbd class="kbc-button">Default</kbd> <kbd class="kbc-button kbc-button-primary">Primary</kbd> <kbd class="kbc-button kbc-button-secondary">Secondary</kbd> <kbd class="kbc-button kbc-button-success">Success</kbd> <kbd class="kbc-button kbc-button-danger">Danger</kbd> <kbd class="kbc-button kbc-button-info">Info</kbd> <kbd class="kbc-button kbc-button-light">Light</kbd> <kbd class="kbc-button kbc-button-dark">Dark</kbd>
Hasil :
Default
Primary
Secondary
Success
Danger
Info
Light
Dark
Baca juga : Bagaimana Cara Menghasilkan Puluhan Juta Dari Blog?
Tombol Keyboard Simple
Tombol berikut memiliki tampilan yang sederhana tapi rapi cocok untuk kamu yang gak suka gaya berlebihan. Cara untuk memasang CSS juga sama dengan tombol keyboard nyata. Jadi ikuti langkah-langkah dengan teliti ya.
untuk keyboard simple kita perlu memasukan kode CSS. Tidak perlu kuatir karena kode ini sangat sedikit dan mudah dipahami apalagi setiap penulisan tombol di dalam artikel gx perlu memasukan sub class jadi lebih mudah di inget.
Kode CSS
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D'text%2Fcss'%3E%20%2F*keyboard%20shortcut*%2F%20kbd%7Bposition%3Arelative%3Bborder%3A1px%20solid%20gray%3Bfont-size%3A1.2em%3Bbox-shadow%3A1px%200%201px%200%20%23eee%2C0%202px%200%202px%20%23ccc%2C0%202px%200%203px%20%23444%3B-webkit-border-radius%3A3px%3B-moz-border-radius%3A3px%3Bborder-radius%3A3px%3Bmargin%3A2px%203px%3Bpadding%3A1px%205px%3Bcursor%3Apointer%3B-webkit-user-select%3Anone%3B-moz-user-select%3Anone%3B-ms-user-select%3Anone%3Buser-select%3Anone%7D%20kbd%3Aactive%7Bborder%3A2px%20solid%20gray%3Bfont-size%3A1.2em%3Bbox-shadow%3A2px%200%202px%200%20%23eee%2C0%203px%200%203px%20%23ccc%2C0%203px%200%204px%20%23444%3B-webkit-border-radius%3A4px%3B-moz-border-radius%3A4px%3Bborder-radius%3A4px%3Bmargin%3A3px%204px%3Bpadding%3A2px%206px%3Btransform%3AtranslateY(4px)%7D%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
Penggunaan Dasar
Untuk menulis tombol langka-langkanya sama seperti tombol keyboard nyata tapi lebih rapi dan mudah dimengerti seperti ini.
<kbd>CTRL</kbd> + <kbd>F</kbd></b>
Hasil :
CTRL + F
Kesimpulan
Tombol keyboard bisa digunakan untuk mempermudah pembaca atau juga mempercantik artikel jadi dari dua jenis pilihan pastikan sesuaikan dengan kebutuhanmu. Jika Anda tidak suka dengan kerumitan pilih gaya sederhana saja tapi kalau Anda suka tampilan elegan pilih keyboard nyata aja. Terimakasih.