Agiel Triono: Cara Pasang KBD Mark up Di Blogger Dengan CSS

Cara Pasang KBD Mark up Di Blogger Dengan CSS

thumb


Hai kali ini saya mau kasih tau cara pasang buat mark up Keyboard kemputer di blogger agar terlihat cantik 😍
mau tau gimana cara nya . yuk kita simak tutorial nya 😂


Yang Pertama kita harus tambahkan kode ini di ]]> </ b: skin>
.post-body kbd{-moz-border-radius:3px;-moz-box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;-webkit-border-radius:3px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #737373 inset;background-color:rgba(0, 186, 255, 0.93);border:1px solid #11beff;border-radius:3px;box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #11beff inset;color:#fff;display:inline-block;font-family:'roboto';font-size:17px;line-height:1.4;margin:0 .1em;padding:.1em .6em;text-shadow:0 1px 0 #fff}
.post-body kbd{max-width: 624px;overflow: auto;}
.post-body kbd:before{position:absolute;content:'Double click to select';display:table;background:#f20000;color:#fff;padding:4px;border-radius:2px;font-size:75%;opacity:0;visibility:hidden;transform:scale(0.8);z-index:2;transition:all .3s;margin:-23px;font-family:'Roboto'}
.post-body kbd:hover:before{transform:scale(1.0);opacity:1;visibility:visible;transition:all .3s}
Simpan Templates.

Result :

`1234567890-=Bkspc

Tabqwertyuiop[]\

Capsasdfghjkl;'Enter

Shiftzxcvbnm,./Shift


Oke selesai :)

Semoga Bermanfaat
Previous Post Next Post