How to Add Keyboard Button in Blog Post - FindersAdda : Tutorials of Make Money, Computer or Internet

Friday, 10 November 2017

How to Add Keyboard Button in Blog Post

Hello Friends! How are You? I hope, you will be good. Today, I am present once again with a new post. In this article, I am going to share How to add keyboard button in blog post? 

How to add keyboard button in blog

Keyboard button means a keyboard tag which look like as keyboard button in blog post. Suppose you are writing a post and in this post, you have to write CTRL + F to find anything. Then you can use keyboard tag (<kbd>) to look like as keyboard button.

There are many plugins are available to add keyboard button in blog post for wordpress blog. But it is not available for blogger blog. That's why I have created a code to add keyboard button in blogger blog. 

In the coming days, too many plugins will be available for blogger blog. And these plugins make blogger user friendly.

How to add Keyboard button in Blogger blog?

To add Keyboard button in blogger blog post, you have to add some css code in your blog theme. It is very easy to add. Let's see how to add...

1) First of all, copy the below css code and then open your blogger dashboard.

kbd {
  padding: 0.2rem 0.4rem;
  font-size: 90%;
  color: #fff;
  background-color: #212529;
  border-radius: 0.2rem;
  font-family: monospace, monospace;
  font-size: 1em;
kbd kbd {
  padding: 0;
  font-size: 100%;
  font-weight: 700;

2) Click on the Theme option and then click on the Customize option.

3) After that click on the Advance option and then click on the Add CSS code 

add css code in blog

4) Then paste the copied cost in code box and then click on the Apply to Blog button which is available at the right corner.

5) Now, go to blogger dashboard and click on the New Post and write your post.

6) after written post, click on the HTML and search your code where you want to add keyboard button. Suppose we have written a post and in the post, we have written Ctrl button, in HTML version we have to press Ctrl + F button and find Ctrl.

add kbd tag in blog post

7) After finding, write <kbd>ctrl</kbd> tag before and after the ctrl code.

I hope you liked this post so much. If you loved this post, Then, share with your friends and also give some suggestion that what should i improve in this post. Thank You So Much...... 

About Author


Author & Editor

Myself Sumit Kumar Gupta & 21 year's old person. I am a programmer and blogger. I spend much more time on programming and blogging and helps other programmers and bloggers.


Post a Comment

We are eager to see your comments.
Comment Rule :

1. Don't use any link in the comment box. If you have any problem related to link then contact me with the contact form.

2. Don't use the wrong word if you write the wrong word in comment box then it will get spam.