Keyboard effect on blogger post

A blog design is very important, if you have a beautiful template and unique designs, then your blog post should be beautiful too. Today I will share to you how to make a keyboard effect on your blog post. This is CSS consist of no image and will not affect your blog speed. Lets begin the tutorial shall we.

Lets view the Demo first:


ALT + F4

CTRL + ALT + DELETE

KEYBOARD


Installation

1. Go to blogger dashboard > layout > edit HTML.

2. Find this code using CTRL + F   ]]></b:skin>

3. Paste the code below above it

/***************************************** Keyboard Style CSS ******************************************/ kbd{ 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; }

 4. Save template!


Using it on blogger post

If you want to use it on your blog posts just follow these simple steps.

• Go to your blog posts, you can either create new or edit existing posts.
• Click HTML besides the compose button.
• Use the <kbd> </kbd> tag when you want to use the keyboard effect.

Example:

<kbd> I LIKE YOU </h2>

         I LIKE YOU


That's it! I hope you enjoy this trick! thank you for reading!