How to add keyboard style key symbol in Blog post by CSS?

Way to add keyboard shortcut key on blogger post

6
data:blog.title
keyboard

While we go for posting tutorial then often we use some keyboard shortcut key in test form. For example: Press Ctrl+F , Ctrl+C, Ctrl+V. Those instruction in text form actually not looking professional. And some blogger use image instead of text and that may affect blogger template loading time.


key symbol

The solution of this option is to use CSS coding thus you can display keyboard key image by using simple CSS code. Here I will display 2 type of key style light and dark. So let's proceed to the tutorial-

1. Light color keyboard style key symbol 

For integrating CSS code of light color key symbol you can follow the below steps-

Step 1 Sign in to your blogger account and go to blogger dashboard

Step 2 On Blogger Dashboard Click ->Template -> Edit HTML

Step 3 Now find the </b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)

Step 4 Paste the below CSS code above </b:skin> and hit the Save template button.


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


How to Implement the light color code in post

After adding the CSS code now we will make the code work in blog post. So to do this just follow the below steps-

Step 1 Sign in to your blogger account and go to blogger dashboard

Step 2 On Blogger Dashboard Click ->New post


HTML

Step 3 Now switch the post editor in HTML mode then copy and paste any code from below
  • <kbd>Ctrl</kbd>+<kbd>F</kbd>
  • <kbd>Ctrl</kbd>+<kbd>C</kbd>
  • <kbd>Ctrl</kbd>+<kbd>V</kbd>
keyset

Step 4 now go to Compose mode and after finishing your content writing publish it.

compose

2. Dark color keyboard style key symbol 

For integrating CSS code of dark color key symbol you can follow the below steps-

Step 1 Sign in to your blogger account and go to blogger dashboard

Step 2 On Blogger Dashboard Click ->Template -> Edit HTML

Step 3 Now find the </b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)

Step 4 Paste the below CSS code above </b:skin> and hit the Save template button.


kbd{
border:1px solid gray;
font-size:1.2em;
box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #4d4d4d, 0 2px 0 3px #444;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:2px 3px;
padding:1px 5px;
}

How to Implement the dark color code in post

After adding the CSS code now we will make the code work in blog post. So to do this just follow the below steps-

Step 1 Sign in to your blogger account and go to blogger dashboard

Step 2 On Blogger Dashboard Click ->New post

Step 3 Now switch the post editor in HTML mode then copy and paste any code from below
  • <kbd>Ctrl</kbd>+<kbd>F</kbd>
  • <kbd>Ctrl</kbd>+<kbd>C</kbd>
  • <kbd>Ctrl</kbd>+<kbd>V</kbd>
dark key set

Step 4 now go to Compose mode and after finishing your content writing publish it.

Customization

  • You can customize the key letter by changing Ctrl and F. You can write anything you like.
  • To change the color just replace the color code from
-box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;

or

-box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #4d4d4d, 0 2px 0 3px #444;

If you have any query regard this then feel free to leave a comment below. Hopefully I will reply you as soon as possible. Thanks. 
How to add keyboard style key symbol in Blog post by CSS?
4 Stars stars - "How to add keyboard style key symbol in Blog post by CSS?" While we go for posting tutorial then often we use some keyboard shortcut key in test form. Fo...

nice .. key symbol tanx .

Welcome Aslam. Hopefully you can use this in your blog.

Welcome Deepak.. I hope your problem has solved. :up

original keyboard star button code not found ?

Hi Alam,
:w original Star Button doesn't exists in keyboard.

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *