Tambahkan Tombol Keyboard Effect Untuk Teks Anda Di Blogger Dengan CSS

Bagi banyak dari kita desain dan template yang paling penting, membuat pembaca lebih tertarik dan datang kembali ke blog kita. Dalam tutorial ini, saya akan menunjukkan cara untuk membuat efek tombol keyboard hanya dengan CSS. Hal ini tidak perlu untuk menambahkan gambar, sehingga blog Anda akan memuat lebih cepat. 

BAGAIMANA TAMBAHKAN TOMBOL KEYBOARD KE BLOGGER

Langkah 1: Dari Blogger Dashboard , pergi ke Template> Edit HTML 

Langkah 2: Carilah baris ini (Ctrl + F) 

 ]]> </ B: skin>

Screenshot

Klik pada panah untuk memperluas kode

Langkah 3: Tepat di atas]]> </ b: skin> paste kode CSS ini: 

kbd {
border: 1px abu-abu padat;
font-size: 1.2em;
box-shadow: 1px 1px 0 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;
}

Langkah 4: Simpan perubahan yang dibuat. 

Sekarang satu-satunya yang tersisa untuk dilakukan adalah menambahkan tag ke teks yang diinginkan untuk membuatnya terlihat seperti itu akan dalam tombol keyboard. 

Untuk ini, Anda perlu membuat posting baru, tulis teks di mana Anda ingin menerapkan gaya dan kemudian beralih ke HTML - di mana Anda harus menambahkan sebelum dan sesudah itu, tag HTML berikut: 

<kbd> Ctrl </ kbd> + <kbd> F </ kbd> 

Screenshot

Dan, itu akan terlihat dalam posting Anda sebagai: 

Ctrl + F