Langsung ke konten utama

Cara Membuat Efek Tombol Keyboard di Blogger Dengan CSS

Cara Membuat Efek Tombol Keyboard di Blogger Dengan CSSTag script kbd biasanya di gunakan untuk menampilkan teks dalam bentuk penulisan kode. Kode ini biasa digunakan para pengembang untuk membagikan cara-cara tentang pemrograman. Untuk itu kali ini saya akan membagikan artikel tentang cara membuat efek tombol keyboard di blogger dengan css.

kenapa dari awal saya bilang tag script kbd, memang untuk memanggil tombol keyboard ini, kita harus menggunakan tag kbd tersebut. sama seperti pada saat memanggil tag pre ataupun code.

(Baca juga : Cara Membuat Prism Syntax Highlighter untuk Menampilkan Script Code di Blogger)

Untuk yang ingin tahu bentuknya, berikut ini adalah contohnya.
Menambahkan Efek Tombol Keyboard Untuk Teks di Blogger dengan CSS
Contoh tag kbd dengan efek tombol keyboard
Gimana, keren kan?
Bagi yang ingin tahu cara memasang script kbd ini, ikuti langkah-langkah dari saya berikut ini.


Cara Membuat Efek Tombol Keyboard di Blogger Dengan CSS

1. Cara Memasang Efek Tombol Keyboard Dengan CSS di Template Blogger

  • Langkah pertama masuk ke akun Blogger kalian
  • Pilih menu Tema, kemudian pilih Edit HTML
  • Cari kode ]]></b:skin>, Kemudian masukan skrip di bawah ini tepat di atasnya
kbd{
border:1px solid gray;
font-size:1.2em;
box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:2px 3px;
padding:1px 5px;
}
  • Setelah selesai pilih Simpan tema.


2. Cara Memasang Efek Tombol Keyboard di Artikel

  • Masuk ke menu POS lalu pilih Entri baru
  • Pilih tab HTML kemudian masukan tag script kbd nya seperti ini
<kbd>masukan teks kalian di sini</kbd>
  • Setelah selesai membuat artikel, pilih Publikasikan
  • Jika berhasil maka tampilannya akan seperti ini.
Membuat Tombol Keyboard Pada Postingan Blog
Contoh teks apabila kbd berhasil

(Baca juga : Cara Membuat Tombol Share Bergaya Flat di Blogger)

Demikian tutorial dari saya mengenai cara membuat efek tombol keyboard di blogger dengan css. Jika ada pertanyaan tentang cara memasangnya, atau tentang efek tombol keyboard tersebut, silahkan masukan di kolom komentar.

Terima kasih sudah berkunjung di blog saya ini. Untuk tutorial yang lainnya dari saya, silahkan tetap kunjungi blog Tutorial Umum.

Postingan populer dari blog ini

Cara Membuat Widget Popular Post Berdasarkan Label di Blogger

Sebelumnya saya telah membagikan artikel tentang cara membuat widget popular post dengan rating bintang , pada tutorial kali ini saya akan memberikan cara tentang membuat popular post juga, tetapi yang berbeda adalah widget popular post ini di sortir berdasarkan label atau biasa kita sebut sebagai kategori dari artikel. Jadi yang kita lihat adalah label yang sama dalam 1 widget. (Baca juga :  Cara Membuat Widget Popular Post Dengan Rating Bintang ) Lebih jelasnya widget popular post ini akan menampilkan artikel terpopuler dari label yang di pilih. Tidak hanya itu di bawah widget popular post per label ini juga di tambahkan link agar pengunjung bisa melihat semua artikel yang ada di label atau kategori tersebut. Langsung saja untuk cara memasang widget popular post berdasarkan label di blogger , silahkan ikuti langkah-langkah dari saya berikut ini. (Baca juga :  Cara Membuat Widget Recent Post Multi Color Keren di Blogger ) Cara Memasang Widget Popular Post Berdasarkan Label di...

Cara Menyembunyikan File dan Folder yang Ada di Komputer

Kita tahu komputer memiliki tempat penyimpanan file . Dan file-file tersebut terlihat dengan jelas, namun bagaimana kalau file yang kita miliki berisi sebuah informasi yang sangat rahasia dan privasi . Pasti kita tidak ingin orang lain melihatnya. Untuk itu pada tutorial kali ini saya akan membagikan tutorial tentang cara menyembunyikan file dan folder yang ada di komputer . (Baca juga :  Cara Menampilkan Ekstensi File atau Tipe File di Windows 7 ) Untuk itulah saya akan menjelaskan cara menyembunyikan file yang ada di komputer . Untuk lebih jelasnya ikuti langkah-langkah dari saya. Cara Menyembunyikan File dan Folder yang Ada di Komputer Cara Menyembunyikan File Langkah pertama, buka folder tempat kalian menyimpan file yang akan kalian sembunyikan. selanjutnya klik kanan pada file yang akan kalian sembunyikan kemudian pilih Properties . Setelah form Properties muncul, pilih Hidden kemudian tekan OK . Kemudian file tersebut akan hilang tanpa terlihat. (Baca juga :  Cara ...