Add Keyboard Keys Effect to your Text using CSS in Blogger and Wordpress

So you might have seen this kind of effect in my blog posts, many times even I still using this same effect below to guide you through the process of adding these to your personal blog or website.

Now this effect can be used to show different keystroke shortcuts if you really into the Windows niche or anywhere else depends on your posting creativity. So now many people requested my on how they can add this effect to their personal blog well here goes the tutorial, so check it out and have fun.

1. Open Blogger > Template > Edit HTML.
2. Now press Ctrl + F and search for ]]> tag, now paste below code above it.

rnkey{-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 )}rnkey.space{padding:0 90px}krnkeybk:hover{cursor:default}

3. Now Save Template, your CSS Styles has been added, now its time to activate this effect.
4. Now when ever you are creating any post and you want to add this effect just switch to HTML option in your blogger and type your text and surround it with below code.

<rnkey>text</rnkey>

5. So now just replace the above red text with your own text so it can Ctrl, Alt, Shift or any keyboard keys. So I think you get it.


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. Have fun and do comment if you find any problem using it.