Membuat Efek Keyboard Pada Tulisan di Artikel Blog

Bila anda memiliki blog yang berisi tentang tutorial komputer, saat anda ingin menginstruksikan mengenai tombol keyboard tertentu, anda mungkin hanya akan menuliskannya dalam bentuk teks di blog anda, sehingga seringkali, anda harus menambahkan keterangan "tombol pada keyboard anda" pada instruksi tersebut. Nah, untuk itu, saya ingin memberikan tips dan trik untuk anda, dan tentunya anda pasti akan tertarik dengan yang satu ini, membuat efek keyboard pada tulisan di artikel blog.

Efek keyboard ini bisa anda gunakan dalam artikel di blog anda, dan anda akan menemukan blog anda menjadi satu hal yang sangat menarik untuk di baca. Anda tidak percaya? coba saja anda memasangnya dan mengikuti langkah-langkah membuat efek keyboard pada tulisan di artikel blog.

Cara Memasangnya di Blog

Sebelum anda melakukan perubahan pada halaman HTML Template anda sebaiknya anda mem-backup template anda terlebih dahulu.

Step 1

Masuk ke halaman dashboard > Template > HTML

Step 2

Letakkan kode berikut tepat di atas ]]></b:skin>

kb{-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border:1px solid gray;padding:1px 5px;margin:0 5px;font-family:courier new;font-size:1.2em;-webkit-box-shadow:1px 0 1px 0 #fff, 0 2px 0 2px lightGray, 0 2px 0 3px #333;-moz-box-shadow:1px 0 1px 0 #fff, 0 2px 0 2px lightGray, 0 2px 0 3px #333;box-shadow:1px 0 1px 0 #fff, 0 2px 0 2px lightGray, 0 2px 0 3px #333;background:-moz-linear-gradient(left, #fff 0%, #e2e2e2 25%);background:-webkit-gradient(linear, left top, right top, color-stop(0%, #ffffff), color-stop(25%, #e2e2e2));background:-webkit-linear-gradient(left, #fff 0%, #e2e2e2 25%);background:-o-linear-gradient(left, #fff 0%, #e2e2e2 25%);background:-ms-linear-gradient(left, #fff 0%, #e2e2e2 25%);background:linear-gradient(left, #fff 0%, #e2e2e2 25%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2e2e2', GradientType=1 )}kb.space{padding:0 90px}kb:hover{cursor:default} 

 Step 3

Klik Save Template

Cara Menggunakannya di Artikel Blog

Bila anda ingin menggunakannya di artikel anda, maka anda dapat menggunakan kode berikut :

<kb> Teks anda di sini </kb>

Ganti kata yang diberi warna merah dengan kata yang anda inginkan. Lihat demonya di bawah ini.

Live Demo 

 
Semoga bermanfaat.
Wassalam.