How to Solve Bad Picture Quality issue in Blogger

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.

DEMO - POST

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-

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

1. Go to Blogger >> Your Blog >> Template >> EDIT HTML

2. And now Search For ]]></b:skin> With CTRL  + F

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

Implement the 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-

1. Blogger Dashboard Click >> New post

2. Now switch the post editor in HTML mode the copy and paste the below code and Edit according to your keys!

For ex of CTRL + C :-

<kbd> CTRL </kbd> + <kbd> C </kbd>

3. Now go to Compose mode and after finishing your content writing publish it.

Customization :- 

• You can customize the key letter by changing Ctrl and C. You can write anything you like.
• To change the color just replace the color code from HTML Color Codes

If you have any other problem to implement the codes or customization feel free to comment below!