Saturday, August 6, 2016

Cara Pasang KBD Mark up Di Blogger Dengan CSS

Tags

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

Penggunaan Markup
  • Untuk memasukan gambar dan youtube link silahkan taruh link gambar dan youtube link tanpa tag <img> dan <iframe>.
  • Untuk menulis huruf bold silahkan gunakan [strong]KONTEN[/strong] atau [b]KONTEN[/b].
  • Untuk menulis huruf italic silahkan gunakan [em]KONTEN[/em] atau [i]KONTEN[/i].
  • Untuk menulis huruf underline silahkan gunakan [u]KONTEN[/u].
  • Untuk menulis huruf strikethrought silahkan gunakan [strike]KONTEN[/strike].
  • Untuk menulis kode HTML silahkan gunakan [code]KONTEN[/code] atau [pre]KONTEN[/pre] atau [pre][code]KONTEN[/code][/pre], dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Penggunaan Parse Kode Dan Emoticon Tidak Berlaku Di Ponsel.
Show EmoticonHide Emoticon Off Topic