Add Keyboard Keys Like Design to Text in Blog Post

When you are mentioning Keyboard shortcuts in your blog post it is better to mention them with Keyboard keys like design. The design makes it look like real and the text will stand out from remaining paragraph.

You can easily add this snippet of code to your Blogger/blogspot and WordPress blogs. Here we will use a special HTML tag in our blog post that will make text look like Keyboard keys.

Keyboard Keys Like Design For Blogger/blogspot Blogs:

1. Login into Blogger.

2. Go to Template > Edit HTML to open the template.

3. Now find </b:skin> in your template.

4. Add the following code just above that tag.

Design #1:

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

Design #2:

kbk{
border: 1px solid gray;
padding: 1px 5px;
margin: 0 5px;
font-family: courier new;
font-size: 1.2em;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-box-shadow: 1px 0 1px 0 white, 0 2px 0 2px lightGray, 0 2px 0 3px #333;
-moz-box-shadow: 1px 0 1px 0 #fff, 0 2px 0 2px lightGray, 0 2px 0 3px #333;
box-shadow: 1px 0 1px 0 white, 0 2px 0 2px lightGray, 0 2px 0 3px #333;
background: -moz-linear-gradient(left, white 0%, #E2E2E2 25%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, white), color-stop(25%, #E2E2E2));
background: -webkit-linear-gradient(left, white 0%, #E2E2E2 25%);
background: -o-linear-gradient(left, white 0%, #E2E2E2 25%);
background: -ms-linear-gradient(left, white 0%, #E2E2E2 25%);
background: linear-gradient(left, white 0%, #E2E2E2 25%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2e2e2', GradientType=1 );
}

5. Now save your template.

How to add Keyboard keys design to your blog post:

For Style #1: Create a new post and switch to HTML. Now when you write Keyboard Keys in your post (Ex: Ctrl + F Key). Write it as below using the HTML tag.

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

It will be visible in your post as -

For Style #2: Create a new post and switch to HTML. Now when you write Keyboard Keys in your post (Ex: Ctrl + Shift + E Key). Write it as below using the HTML tag.

<kbk>Ctrl</kbk>  +  <kbk>Shift</kbk>  +  <kbk>E</kbk>

And, it will be visible in your post as –

Keyboard Keys Like Design For WordPress Blogs:

The steps are same for WordPress blogs, just add the CSS code to Style.CSS file in your theme folder. Now type <kbd>Ctrl</kbd>  +  <kbd>F</kbd> whenever you want to write keyboard shortcuts in post editor.