Notification texts go here Contact Us Buy Now!

Keyboard shortcut CSS key For 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 affectblogger template loading time.

Keyboard shortcut CSS key For Blogger.

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-


Follow Blow Step:

  1. Login to your Blogger account, go to Blogger dashboard, click the arrow adjacent to 'Go to post list icon' and select 'Template' from dropdown menu. You can also select the 'Template' from left navigation menu.
  2. Click 'Edit HTML'.
  3. Search for (Ctrl+F) </b:skin> and paste (Ctrl+V) the following code before </b:skin>
  4. Style Light color keyboard style key symbol
    Keyboard shortcut CSS key For Blogger
         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;
        } 
    Style Dark color keyboard style key symbol
    Keyboard shortcut CSS key For Blogger
         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;
        }  
  5. Choose 1 Style then Save template

How to Implement the dark color code in post

  • Now switch the post editor in HTML mode then copy and paste any code from below
  • Keyboard shortcut CSS key For Blogger
    <kbd>Ctrl</kbd>+<kbd>F</kbd>
    <kbd>Ctrl</kbd>+<kbd>C</kbd>
    <kbd>Ctrl</kbd>+<kbd>V</kbd>
    
    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.

Getting Info...

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.