Cara Membuat Dan Memasang Tag KBD atau Efek Double Click To Select pada Blog

Cara Membuat Dan Memasang Tag KBD atau Efek Double Click To Select pada Blog

Cara Membuat Dan Memasang Tag KBD atau Efek Double Click To Select pada Blog
Cara Membuat Dan Memasang Tag KBD atau Efek Double Click To Select pada Blog

Hallo sobat ruangcoder, artikel kali ini tentang Cara Membuat Dan Memasang Tag KBD atau Efek Double Click To Select pada Blog, bagaimana menggunakan Tag kbd pada blogspot agar text yang di masukkan ke kbd akan muncul pop up Double click to select , seperti gambar di atas , tapi apa sobat sudah mengerti Apa itu tag KBD ?  Nah sobat jadi pada tag kbd adalah suatu tag html yang umumnya banyak digunakan untuk menampilkan teks keyboard agar terlihat rapih. Dan biasanya menggunakan sebuah jenis font monoscape (default). Untuk sobat yang memiliki blog atau web bertema atau niche desain web, css dan html seperti admin ini, seharusnya sobat sering menggunakan tag tersebut, tapi gak tentu juga karena belum begitu banyak yang tau juga mengenai tag ini , tapi jika sobat menggunakan tag ini , akan terlihat rapih. Berikut ini adalah ontoh hasil penggunaan  dari Tag Kbd yang sudah admin modifikasi CSS nya sehinga terlihat lebih menarik :

Contoh penggunaan tag KBD :

Ruang Coder is Here
HTML
font-family:'Roboto'

Memasang Tag KBD atau Double Click To Select pada Blogspot :


Nah , kita lanjut ke pemasangannya , sebenernya sobat , cukup begitu simple saat memasang nya , sobat tinggal ke menu Dashboard blogger sobat , kemudian sobat kebagian menu Tema , dan masuk kebagian menu Edit HTML , lalu sobat paste kode dibawah ini , tepat diatas </body> atau pun di atas</b:skin> seperti admin , yang ada di gambar dibawah ini :


kbd {background:#fff;border:1px solid rgba(0,0,0,0.1);border-radius:3px;box-shadow:0 1px 0 rgba(0,0,0,0.2), 0 0 0 2px #fff inset;color:#333;display:inline-block;font-size:12px;line-height:1.4;font-family:consolas;margin:0 .1em;padding:.1em .6em;font-weight:700;}
kbd{position:relative;color:#28a1f0;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;}
kbd:before{position:absolute;content:'Double click to select';display:table;bottom:23px;left:0;background:#4c4c4c;color:#fff;padding:4px;border-radius:2px;font-size:75%;line-height:1;opacity:0;visibility:hidden;transform:scale(0.8);z-index:2;transition:all .3s;}
kbd:hover:before{transform:scale(1.0);opacity:1;visibility:visible;transition:all .3s}

Nah , setelah sobat menerapkan kode nya , tinggal masuk ke cara pemakaian nya saja , sebenernya cukup simple sobat tinggal menggunakan pembuka tag kbd dan penutup tag kbd , seperti gambar dibawah ini :



Nah jadi itulah cara pemasangannya , cukup simple bukan sobat , semoga tutorial ini bermanfaat bagi sobat ya , dan semoga website atau blog sobat jadi lebih rapih , baca juga untuk pemakaian Syntax Highlighter, buat menerapkan codingan sobat, oke serasa sampai disini saja tutorialnya , jangan lupa di share ya sobat, sampai ketemu lagi

Anda mungkin menyukai postingan ini