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

So you may have seen this type of effect in my blog posts, repeatedly even I still victimization this same effect below to guide you thru the method of adding these to your personal blog or website.

Now this effect may be wont to show completely different keystroke shortcuts if you actually into the Windows niche or anyplace else depends on your posting creative thinking. thus currently many of us requested my on however they will add this effect to their personal blog well here goes the tutorial, thus check it out and rejoice.

Follow this Steps - 

1. Open Blogger > Template > Edit HTML.
2. Now press Ctrl+F and search for ]]></ b: skin> 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 currently this same stuff are often exhausted Wordpress too, thus if you're on Wordpress simply add the on top of CSS designs to your external styling sheet and than surround your text with those text. have a good time and do comment if you discover any downside exploitation it.

You Also Like:

How To Customize Blogger Labels & Make Them Attractive
Create Google Plus-StyleButton Using CSS3 In Blogger