How to Add Keyboard Keys Effect to your Text in Blogger

Unique design is necessary for a blog. To get organic traffic and user attention you need to develop the blog user friendly and search engine friendly as well. It is possible only if your blog's design is simple, attractive and easy to navigate. Sometimes we need to mention keyboard shortcuts in our blog posts. So, if you add keyboard keys effect instead of simple text, it will impress your visitors and they'll get more interested in your blog. Oh sorry, let me tell you that what is Keyboard Keys Effect? In simple words, keyboard keys effect is just normal text, styled using CSS. In this tutorial, we are going to show you How to Add Keyboard Keys Effect to your Text in Blogger.

How to Add Keyboard Keys Effect to your Text in Blogger

Step 1. Log in to your Blogger Account
Step 2. Go to Template and Click on Edit HTML Button
Step 3. Now search Ctrl + F for the ]]></b:skin> tag and paste Ctrl + V the below code just above/before it

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

Step 4. Click on Save Template Button

How to Use Keyboard Keys Effect

To use this Keyboard Keys Effect to your text, you need to add <kbd> and </kbd> tags to your text. See the below example to see how it works:

<kbd> This is my Text </kbd>

Create a New Post and switch it to HTML by clicking on HTML tab in the Post Editor
Example 1.
For Ctrl + C

<kbd>Ctrl</kbd> + <kbd>C</kbd>

Result:

Ctrl + C

Example 2.
For Ctrl + F

<kbd>Ctrl</kbd> + <kbd>F</kbd>

Result:

Ctrl + F

From Editors Desk

We hope that this article helped you in learning How to Add Keyboard Keys Effect to your Text in Blogger and How to use this effect in blogger. Share this article with your friends and don't forget to subscribe us!

Share This:

Tags:

Blogging Tips

• Prevoius
• Next