How to Make a Keyboard Effect On Blog Posts

Surely you 've seen one of the blog posts are instructed to press a button keyboard functions using keyboard effects. The use of keyboard effects can make posts more attractive and looks more professional.

Here is a trick to a blog if you want to try to apply the effect keyboard button on your blog. This script code allows you to use a special HTML tag on your blog posts that would make the text becomes visible as a three-dimensional keyboard keys. If you write articles or instructional tutorial, using the keyboard button merging of these in your post will make your blog content to be more reader-friendly.

How to Make a Keyboard Effect :

1. Go to your Blogger Dashboard ›› Template ›› Edit HTML.
2. Press Ctrl + F and search code ]]></b:skin>
3. Then copy the code below, above the code ]]></b:skin>
/* Keyboard Effect by infoBlog */
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;
}
4. Finally, click Save Template.

To use this feature, you only use the code below

<kbd>Your Text Here</kbd>

1. Change Compose mode into HTML mode in your posts. Then paste that code in the HTML column.
2. After that, replace back in Compose mode and click Review to see the results.

For Example :

• Demo

Enough of articles about  How to Make a Keyboard Effect On Blog Posts. If you have any questions or suggestions, please write in the comments field below or directly send questions through the Contact Us service. Hopefully this article useful and you willing to share this article through social media accounts you have.

Thanks For Your Visiting

Share This Article

Share on FacebookShare on Google+