Add Keyboard Keys Effect To Your Text in Blogger Blog

Here is one of the best trick which makes your post beautiful i am Providing you. You might have seen this Cool CSS Tricks. Now i am tell you how you can add this feature to your Personal Blog. I have seen this tips on So it is the best and popular tutorial in now a days.

So here is the Tutorial, So check it out

How To Add The Code

1. Open Blogger > Template > Edit HTML.

2. Now press Ctrl + F and search for ]]></b:skin> tag, now paste below code above it.

kbd {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid gray;
padding: 1px 5px;
margin: 0 5px;
font-family: courier new;
font-size: 1.2em;
-webkit-box-shadow: 1px 0 1px 0 #fff, 0 2px 0 2px lightGray, 0 2px 0 3px #333;
-moz-box-shadow: 1px 0 1px 0 #fff, 0 2px 0 2px lightGray, 0 2px 0 3px #333;
box-shadow: 1px 0 1px 0 #fff, 0 2px 0 2px lightGray, 0 2px 0 3px #333;
background: -moz-linear-gradient(left, #fff 0%, #e2e2e2 25%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #ffffff), color-stop(25%, #e2e2e2));
background: -webkit-linear-gradient(left, #fff 0%, #e2e2e2 25%);
background: -o-linear-gradient(left, #fff 0%, #e2e2e2 25%);
background: -ms-linear-gradient(left, #fff 0%, #e2e2e2 25%);
background: linear-gradient(left, #fff 0%, #e2e2e2 25%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2e2e2', GradientType=1)
} {
padding: 0 90px

kbd:hover {
cursor: default

3. Now Save Template, your CSS Styles has been added, now its time to activate this effect.

How to Using Them On Posts:

For their right implementation on blogger posts, follow these steps carefully.

  • Type your entire post
  • After completing the post, add this code before and after the text you want to add the effect.

<kbd>Text To Give Effect</kbd>

FOR WORDPRESS So now this same stuff can be done in WordPress too, so if you are on WordPress just add the above CSS styles to your external styling sheet and than surround your text with those text.

Your are done!If You Like This Tutorial Please Share With Your Friends. Subscribe To Our Email Newsletter For More Blogger Tutorials. Phone Reviews

Leave a Comment

Your email address will not be published. Required fields are marked *