Keyboard Key Effect for Blogspot Post by Using Easy CSS

Hello All Mamas,
Blog Design is really important for making our readers be more interested & visiting back to our blog. In this design tutorial, We will show you how to create a Keyboard keys Design in Blog post. This effect is not necessary to add an image to create a keyboard key. So that your website load faster.

• Live Demo 

How Can You Install this Design in your Blogspot ??
Answer : To install this Keyboard Key Effect in your blogger blog just follow our below steps

Step 1 :

Login to Your blogger account, In blogger Dashboard go to Template > Edit HTML

Step 2:

Then Find Out below line by pressing Ctrl + F

]]></b:skin>

Step 3:

Then Copy CSS from below and Just above ]]></b:skin> Paste this CSS Code :

tmkey{
 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;
 }

Step 4 :

Then Save the Change Made

Now Time to Use this Effect in Your Blog Post :

For Using this Effect You need to Create a new Post. Then Switch to HTML mode like below :

Then Type the Following HTML tag just Before and After your Text like above picture. For Example : Ctrl + A = <tmkey>Ctrl</tmkey> + <tmkey>A</tmkey>

That's It.. Now You can continue creating your post in Compose Mode