Add Keyboard Keys Effect To Blogger Text Using CSS

You must have seen blogs using keyboard keys effect on Text. Today I will show you How can you use keyboard keys effect on Text using CSS. This is compatible with both Blogger and WordPress.

How to Add Keyboard Keys Effect to Blogger

• Log in to Blogger account.
• Go to Template > Edit HTML
• Now search for ]]></b:skin> 
• Add the below CSS just before ]]></b:skin>

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

• Save Template

Now that you've added CSS to your Blogger Template. You've finished 90% of the Job.

How to Use it in Blog Posts

Now whenever you want the Keyboard keys effect just use the following code.

<TB> YOUR TEXT HERE </TB>

Just Replace YOUR TEXT HERE with your Text and Done.

DEMO

I hope this article was helpful. Please leave your comments below if you are having any problems.

Credit: HackingUniversity.com