Add “Keyboard Key” Effect To Blogger With CSS3:Digital Tech Inspiration

Here’s a nice Blogger trick that you might want to try out on your blog/website. This snippet code allows you to use a special HTML tag on your posts that will make text look like a keyboard key.

How To Add Keyboard Keys Effect With CSS3 In Blogger?

STEP #1: Log on to Blogger

STEP #2: Go to Dashboard>Template

STEP #3: Click on Edit HTML>Proceed

STEP #4: Tick on Expanded Template Widget check box

STEP #5: Take a Backup your template

STEP #6: Find (Ctrl + f) for the code below

]]></b:skin>

STEP #7: Just above that paste the following code.

Style #1:

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;
}

Style #2:

kbk{

border: 1px solid gray;

padding: 1px 5px;

margin: 0 5px;

font-family: courier new;

font-size: 1.2em;

-webkit-border-radius:3px;

-moz-border-radius:3px;

border-radius:3px;

-webkit-box-shadow: 1px 0 1px 0 white, 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 white, 0 2px 0 2px lightGray, 0 2px 0 3px #333;

background: -moz-linear-gradient(left, white 0%, #E2E2E2 25%);

background: -webkit-gradient(linear, left top, right top, color-stop(0%, white), color-stop(25%, #E2E2E2));

background: -webkit-linear-gradient(left, white 0%, #E2E2E2 25%);

background: -o-linear-gradient(left, white 0%, #E2E2E2 25%);

background: -ms-linear-gradient(left, white 0%, #E2E2E2 25%);

background: linear-gradient(left, white 0%, #E2E2E2 25%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2e2e2', GradientType=1 );

}

Customization:

If you have some programming skills and know CSS then you can play with the values changing the Border Color, Font Size, Box Shadow, Border Radius, Margin & Padding Effects according to your blog template.

STEP #8: Now click on Save and it’s done.

How to Put the Keyboard Keys in Action?

For Style #1: Create a new post and switch to HTML. Now when you write Keyboard Keys in your post (Ex: Ctrl + F Key). Write it as below using the HTML tag.

It will be visible in you post as -

Ctrl + F

For Style #2: Create a new post and switch to HTML. Now when you write Keyboard Keys in your post (Ex: Ctrl + Shift + E Key). Write it as below using the HTML tag.

<kbk>Ctrl</kbk>  +  <kbk>Shift</kbk>  +  <kbk>E</kbk>

And, it will be visible in your post as –

Ctrl + Shift + E

So execute steps correctly and you are done. Head to your blog and check the trick executed. So don't forget us. We will only survive with your generosity. Like, Share, Follow and Subscribe. If you are facing any problem with implementing these codes just comment below for help. Stay tuned for more posts.