Home BLOG Cara Menampilkan Tombol Keyboard di Postingan

Cara Menampilkan Tombol Keyboard di Postingan

Berikut merupakan cara sederhana untuk Cara Menampilkan Tombol Keyboard di Postingan blog ,dan mungkin anda tertarik untuk memasang tombol keyboard di postingan blog anda agar terlihat keren.
Salah satu pengunjung saya bertanya apakah dia dapat menampilkan Tombol Keyboard ke dalam tulisan. Ya, Anda dapat melakukan ini dengan kode CSS yang membantu Anda mengontrol gaya dan tata letak beberapa halaman web sekaligus.
Banyak pemilik situs web juga ingin menambahkan tombol keyboard ke halaman web mereka secara dinamis untuk menarik perhatian pengunjung alih-alih menunjukkan gambar, foto, atau format teks sederhana. Jika Anda menggunakan gambar apa pun untuk menunjukkan Tombol Keyboard maka itu akan berdampak buruk pada waktu posting blog Anda dan menyebabkan loading blog anda akan lambat.
Dengan demikian, Anda dapat memberikan efek tombol keyboard asli ke Teks atau simbol apa pun menggunakan trik SWT CSS3. Karena itu, ikuti saja prosedur ini dan buat Posting Anda lebih dinamis dan keren. Tampilkan tombol keyboard di post Anda.

Cara Menampilkan tombol Tombol Keyboard dalam Posting

Ada langkah yang sangat sederhana untuk menampilkan tombol keyboard di posting Anda. Cukup rekatkan kode CSS ke situs Anda dan tampilkan tombol keyboard di mana pun Anda ingin menampilkannya.

Langkah pertama

Pertama-tama Anda perlu memasukkan kode CSS ini ke situs web atau blog Anda. Tampilkan tombol keyboard. Jika Anda telah membuat file css maka cukup salin kode dan rekatkan ke file css. Banyak tema WordPress yang memungkinkan pengguna untuk menempelkan kode CSS khusus.
Namun, jika Anda memiliki blog blogger maka buka dasbor blog Anda → Tema → Edit HTML dan cari]]> </ b: skin> dan sesaat sebelum / di atas]]> </ b: skin> rekatkan satu atau keduanya kode berikut.

Untuk Tombol Keyboard Hitam

Gunakan kode css ini untuk menampilkan tombol keyboard dalam warna hitam. 
swt-black-kbk {/* tutorial blog amp */
color:#fff;
margin:0 5px;
padding:1px 5px;
font-size:1.2em;
font-family:courier new;
border:1px #fff;
-webkit-border-radius: 3px;
   -moz-border-radius: 3px;
        border-radius: 3px;
background:-webkit-gradient(
  linear,
  left top,
  right top,
  color-stop(0%, #000),
  color-stop(25%, #111)
/* Black Keyboard Key Style by Showeblogin */);
background:-o-linear-gradient(left, #000 0%, #111 25%);
background:-moz-linear-gradient(left, #000 0%, #111 25%);
background:-webkit-linear-gradient(left, #000 0%, #111 25%);
background:-ms-linear-gradient(left, #000 0%, #111 25%);
background:linear-gradient(left, #000 0%, #111 25%);
-webkit-box-shadow:1px 0 1px 0 #000, 0 2px 0 2px lightGray, 0 2px 0 3px #333;
   -moz-box-shadow:1px 0 1px 0 #000, 0 2px 0 2px lightGray, 0 2px 0 3px #333;
        box-shadow:1px 0 1px 0 #000, 0 2px 0 2px lightGray, 0 2px 0 3px #333;
}
swt-black-kbk:hover {opacity:1;cursor:pointer}

Untuk Tombol Keyboard Putih

Gunakan kode css ini untuk menampilkan tombol keyboard dalam warna putih. 
swt-white-kbk {/ * tutorial-blog-amp.blogspot.com * /
warna: # 000;
margin: 0 5px;
padding: 1px 5px;
font-family: kurir baru;
ukuran font: 1.2em;
perbatasan: 1px #fff;
-webkit-border-radius: 3px;
   -moz-border-radius: 3px;
        batas-radius: 3px;
latar belakang: -webkit-gradient (
  linier,
  kiri atas,
  kanan atas,
  color-stop (0%, #fff),
  color-stop (25%, #fff)
/ * White Keyboard Key Style oleh Showeblogin * /);
latar belakang: -o-linear-gradient (kiri, #fff 0%, #fff 25%);
latar belakang: -moz-linear-gradient (kiri, #fff 0%, #fff 25%);
latar belakang: -webkit-linear-gradient (kiri, #fff 0%, #fff 25%);
latar belakang: -ms-linear-gradient (kiri, #fff 0%, #fff 25%);
latar belakang: linear-gradient (kiri, #fff 0%, #fff 25%);
-webkit-box-shadow: 1px 0 1px 0 # 999, 0 2px 0 2px lightGray, 0 2px 0 3px # 666;
    -moz-box-shadow: 1px 0 1px 0 # 999, 0 2px 0 2px lightGray, 0 2px 0 3px # 666;
             box-shadow: 1px 0 1px 0 # 999, 0 2px 0 2px lightGray, 0 2px 0 3px # 666;
}
swt-white-kbk: hover {opacity: 1; cursor: pointer}

atau alih-alih menambahkan dua kumpulan kunci di atas, Anda dapat menambahkan file ini sebelum menutup Tag Kepala dari HTML templat blog Anda. 
<link href="https://img.superwebtricks.com/files/swt-keyboard-keys.css" rel="stylesheet" type="text/css" />

Langkah ke dua

Kedua, Anda harus menambahkan kode-kode ini di mana Anda ingin memunculkan tombol Keyboard ke dalam posting / halaman blog Anda atau tempat lain mana pun.
Ingatkan bahwa Anda harus memasukkan kode dalam tampilan HTML. Namun, jika Anda ingin menambahkan kode dalam mode Menulis maka cukup pilih "Tafsirkan HTML yang diketik" (tombol radio) dari menu opsi sisi kanan.

keyboard hitam

<swt-black-kbk>A</swt-black-kbk>

Keyboard putih

<swt-white-kbk>A</swt-white-kbk>
Terakhir, ganti "A" dengan karakter atau simbol lain yang Anda inginkan untuk menampilkan tombol keyboard di posting blog Anda. Sebagai Contoh: Jika Anda ingin menampilkan Ctrl + S teks sederhana sebagai SWT Stylish Keyboard Keys, Anda perlu menambahkan kode ini.
<swt-black-kbk>Ctrl</swt-black-kbk>+<swt-black-kbk>S</swt-black-kbk>

Disqus Comments