Membuat tombol Keyboard pada postingan blog
Nofantz.COM- Tutorial kali ini tentang Cara membuat tombol keyboard pada postingan blog. Tombol keyboard ini sangat mirip dengan button,hanya saja button biasa di gunakan untuk mengindikasikan bahwa itu adalah sebuah tombol. Tentu saja kalau tombol itu memiliki fungsi untuk sebuah proses atau link. Sedangkan tombol keyboard biasa di gunakan untuk penekanan sebuah kata, seperti hal nya fungsi Bold atau huruf tebal.
Mengapa tidak menggunakan huruf tebal saja, bukannya itu sudah menunjukkan sebuah makna penekanan? Dengan tombol keyboad ini, disamping untuk menunjukkan sebuah penekanan kata, juga memiliki nilai lebih dibandingkan hanya dengan penebalan huruf, lebih menarik dan lebih terlihat, dan artikel sebuah blog terlihat tidak monoton. Juga bisa di fungsikan sebagai tombol penghubung atau link.
Contoh Keyboard:
Tab Q W E R T Y U I O P[ ] \
Caps Lock A S D F G H J K L ; ' Enter
Shift Z X C V B N M , . / Shift
Langkah-langkah membuat tombol keyboard
Cara membuat tombol keyboard ini sangat mudah. Lihat langkah-langkah nya di bawah ini.1. Login ke Dashboard Blogger
2. Klik Tema
3. Cari ]]></b:skin> dengan cara tekan tombol Ctrl + F pada Tema Editor
4. Copy dan Paste kan kode berikut tepat di atas code ]]></b:skin>
/* CSS Tombol */
kbd{font-size:100%; position:relative;color:#000000}
kbd:hover:before{transform:scale(1.0);opacity:1;visibility:visible;transition:all .3s}
kbd,blockquote{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}
kbd{display:inline-block;border:1px solid #e9e9e9;box-shadow:1px 1px 1px#c3c3c3;border-radius:4px;padding:.4em .6em;margin:.3em;transition:all .3s}
kbd:hover{border-color:#0066ff;color:#003380}kbd,blockquote{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder,input:-moz-placeholder,textarea:-moz-placeholder,input.placeholder_text,textarea.placeholder_text{color:#888}[placeholder]:focus::-webkit-input-placeholder{transition:opacity .5s .5s ease;opacity:0}
<kbd>Tulisan atau Kata</kbd>