How To Add Keyboard Like Effect To Blogger

How To Add Keyboard Like Effect To Blogger
Bored with your blog post design? Trickiezone is here to share this article about on “How To Add Keyboard Like Effect To Blogger”. The main advantage of this widget or let say CSS style, 1st it is totally user friendly, 2nd fast loading, 3rd totally customization enabled, and 4th automatic resize function enabled. (See the demo below)


<< T R I C K I E Z O N E >>

How To Add Keyboard CSS In Blogger?

  1. Login to your Blogger account.
  2. Go to your Blogger Template section.
  3. Backup first your template.
  4. After that click Edit HTML.
  5. Press Ctrl+F and search ]]></b:skin>.
  6. Copy the code below and add it before ]]></b:skin>.
  7. Save your template.
  8. Done!

Code:

key{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;font-family: monospace;}

How To Use Them On Post?

  1. Type your entire post
  2. After that add the code <key> before and </key> after the text you want to add the effect.
  3. See the simple example below.

<key>Q</key> <key>W</key> <key>E</key> <key>R</key> <key>T</key> <key>Y</key>

Look like this


Q W E R T Y

Or

<key>QWERTY</key>

Look like this


QWERTY

Confused? Feel free to ask! Just post your comment below. Subscribe us to get free email updates directly yo your inbox. Thank You!