How To Add Keyboard Keys Effect In Blogger Blogspot

Unique design is necessary for your blog to User attention you need to develop your blog user and search engine friendly as well. It is possible only when your blog design is simple, attractive and easy to navigate. Sometimes we need to mention keyboard shortcuts in our blogger posts. So, if you add keyboard keys effect instead of simple text, it will impress your visitors. There's an HTML element for marking up keyboard keys named <kbd> which can be styled with CSS.

add keyboard keys effect, css, html, kbd, blogger, blogspot, effect to your text in blogger

How To Add Keyboard Keys Effect In Blogger Blogspot

Step 1. Log in to your Blogger Account
Step 2. From Blogger Dashboard select your blog and go to THEME > Edit Html
Step 3. Click anywhere inside the code area. press the Ctrl + F and search for ]]></b:skin>
Step 4. Just above/before ]]></b:skin> paste the following code.
/*-------KBD TAG by*/
kbd{position:relative;background:#e9e9e9;color:#28a1f0;border-radius:3px;padding:0 7px;margin:0 3px;transition:all .3s;font-size:110%;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}
.post-body kbd a{background:#e74c3c;display:inline-block;color:#fff;border-radius:3px;padding:0 7px;font-size:110%;font-weight:900;margin:0 3px;transition:all .3s}
.post-body kbd:hover,.post-body a:hover{background:#c0392b;color:#fff}
How To Add Keyboard Keys Effect In Blogger Blogspot

Step 5. Click on Save Template Button

How to Add Keyboard Keys Effect To Your Text In Blogger Post?

How to use Keyboard Keys Effect to your text, go to create a New Post. Write the text on which you want to add effect go the Html View. you need to add <kbd> </kbd> tags before and after to your text.

add keyboard keys effect to your text in blogger, blogspot, html,css

This will look like this:
That's it....Your Done!

If you face any issue, then feel free to ask me leave a comment bellow or contact us and if you get this post helpful then kindly share this post on your network. Thanks for visiting my post.

You might also like: How To Remove ?m=1 From Blogger Blogspot URLs
How To Add Reading Progress Bar In Blogger Blogspot?

Post a Comment

Post a Comment (0)
To Top