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

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. 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. 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 1Sign into your blogger account and go toblogger dashboard Step 2On Blogger Dashboard Click-Template - Edit HTML Step 3Now find the/b:skinby pressing Ctrl+F (Windows) or CMD+F (Mac) Step 4Paste the below CSS code above/b:skinand hit theSave templatebutton. 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 1Sign into your blogger account and go toblogger dashboard Step 2On Blogger Dashboard Click-New post Step 3Now switch the post editor in HTML mode then copy and paste any code from below kbdCtrl/kbd+kbdF/kbd kbdCtrl/kbd+kbdC/kbd kbdCtrl/kbd+kbdV/kbd Step 4 now go to Compose mode and after finishing your content writing publish it. 2. Dark color keyboard style key symbol For integrating CSS code of dark color key symbol you can follow the below steps- Step 1Sign into your blogger account and go toblogger dashboard Step 2On Blogger Dashboard Click-Template - Edit HTML Step 3Now find the/b:skinby pressing Ctrl+F (Windows) or CMD+F (Mac) Step 4Paste the below CSS code above/b:skinand hit theSave templatebutton. 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 1Sign into your blogger account and go toblogger dashboard Step 2On Blogger Dashboard Click-New post Step 3Now switch the post editor in HTML mode then copy and paste any code from below kbdCtrl/kbd+kbdF/kbd kbdCtrl/kbd+kbdC/kbd kbdCtrl/kbd+kbdV/kbd 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.