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

Cara Pasang KBD Mark up Di Blogger Dengan CSS

Baca Juga
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

  • Untuk memasukan gambar silakan upload gambar pada komentar disqus.
  • Untuk memasukan link silahkan cantumkan link pada komentar tanpa menggunakan tag <a>.
  • Untuk menulis huruf bold silahkan gunakan <strong>...</strong> atau <b>...</b>.
  • Untuk menulis huruf italic silahkan gunakan <em>...</em> atau <i>...</i>.
  • Untuk menulis huruf underline silahkan gunakan <u>...</u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike>...</strike>.
  • Untuk menulis kutipan pendek gunakan <q>...</q>.
  • Untuk menulis kutipan panjang gunakan <blockqoute>...</blockqoute>.
  • Untuk menyembunyikan konten panjang gunakan <spoiler>...</spoiler>.
  • Untuk menulis syntax highlighter silahkan gunakan <pre><code>...</code></pre>, dan silahkan parse kode pada tab TOOLS.