Membuat Highlight Font Bergaya Tombol Keyboard Komputer dengan CSS

Tombol pada keyboard komputer memiliki banyak fungsi, mulai dari mengetik dan menulis di blog, hingga melakukan tugas bisnis dan kantoran, yang tampilannya terdiri dari beberapa tombol penting meliputi tombol alfanumerik. Tapi tulisan kali ini bukan tentang Keyboard komputer dan fungsi-fungsinya lho.

Jika teman-teman ingin mencari informasi tentang Jenis dan Karakter Keyboard Komputer dapat dibaca di halaman ini atau mencari informasi tentang Kumpulan Lengkap Windows Shortcut Keys dan Fungsinya dapat dibaca di halaman ini.

Terus artikel ini bahasannya tentang apa?

Yang jelas gak ada hubungannya dengan Keyboard Komputer. Hubungannya dengan keyboard komputer lebih ke style atau gaya huruf yang nantinya akan kita terapkan pada tulisan highlight blog. Teknik ini hanya menggunakan Cascading Style Sheets (CSS) yang berefek pada kata atau huruf pada blog akan mirip dengan tombol keyboard komputer.

Contohnya : Ctrl + F, atau Download

Keren kan? Kata penting pada isi postingan blog Anda akan menjadi sorotan yang menarik perhatian khusus pengunjung blog. Bergaya mirip tombol-tombol keyboard komputer yang sangat familiar. Jika tertarik ayo terapkan pada blog Anda.

Cara Membuat Font Bergaya Tombol Keyboard Komputer dengan CSS

1. Login ke blogger;
2. Setelah login pilih Template >> Edit HTML;
3. Cari kode </head>;
4. Copy dan paste kode dibawah ini tepat diatas kode </head>
   
   

   /*keyboard shortcut*/
   kbd {
   position:relative;
   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;
   cursor:pointer;
   -webkit-user-select:none;
   -moz-user-select:none;
   -ms-user-select:none;
   user-select:none
   }
   
   kbd:active {
   border:2px solid gray;
   font-size:1.2em;
   box-shadow:2px 0 2px 0 #eee,0 3px 0 3px #ccc,0 3px 0 4px #444;
   -webkit-border-radius:4px;
   -moz-border-radius:4px;
   border-radius:4px;
   margin:3px 4px;
   padding:2px 6px;
   transform:translateY(4px)
   }
   

   
   
5. Simpan template dan Selesai.

Langkah selanjutnya adalah menampilkan font style Keyboard Komputer pada postingan halaman blog menggunakan HTML dengan anchor tag atau hyperlink tag <kdb> </kdb>. Caranya sebagai berikut:

1. Buat postingan baru atau Buka postingan yang ingin diterapkan font style Tombol Keyboard Komputer;
2. Ingat!! untuk menerapkan teknik ini di postingan blog, jangan pilih mode compose. Pilih bagian tampilan HTML di halaman postingan (lihat gambar);
   
   
3. Lalu masukkan kode anchor tag berikut pada postingan blog tampilan HTML, khususnya pada Kata yang ingin dihighlight;
   
   

   <kbd>-----</kbd>
   



4. Pada tanda ( ----- ), isi dengan Kata yang ingin dihighlight. Berikut contoh penulisannya;
   
   

   <kbd>KATA DISINI</kbd>
   

   
   Hasilnya menjadi: KATA DISINI


5. Selesai.

Font bergaya keyboard komputer di halaman postingan blog Anda tampil dengan sukses, hehe.. Penerapan style ini selain mempercantik blog dari sisi desain, juga memiliki banyak fungsi, salah satunya dapat difungsikan sebagai Link Download. Semoga artikel ini bermanfaat.