How to Display Keyboard Keys in Your Blog Posts

Learn a simple CSS trick to display stylish Windows Keyboard Keys (Black or White) into Blogger Blog Post instead of showing default texts or symbols.

Stylish-Keyboard-Keys

 One of my visitor asked me that whether he can display his PC Keyboard Keys into blog post. Yes, you can do this with CSS which helps you to control the style and layout of multiple BlogSpot.com blog pages all at once.

Many website owners also wants to add keyboard keys into their web pages dynamically to attract visitor’s attention instead of showing images, photos or simple text format. If you use any image to show Keyboard Keys then it will badly impact on your blog posts loading time.

Thus, you can give original keyboard key effect to any Text or symbol using SWT CSS3 tricks. Therefore, just follow these procedures and make your BlogSpot.com Blog Posts more dynamic and jaunty.

Insert Keyboard Key button on your Site

Step-1:

First of all you need to insert these CSS codes into your blog. To insert these CSS codes go to your blog dashboard → Template → Edit HTML and search for ]]></b:skin> and just before/above ]]></b:skin> paste one or both of the following codes.

A) For Black Keyboard Keys

swt-black-kbk {/* Black Keyboard Key Style by www.superwebtricks.com */
color:#fff;
margin:0 5px;
padding:1px 5px;
font-size:1.2em;
font-family:courier new;
border:1px #fff;
-webkit-border-radius: 3px;
    -moz-border-radius: 3px;
              border-radius: 3px;
background:-webkit-gradient(
  linear,
  left top,
  right top,
  color-stop(0%, #000),
  color-stop(25%, #111)
/* Black Keyboard Key Style by Showeblogin */);
background:-o-linear-gradient(left, #000 0%, #111 25%);
background:-moz-linear-gradient(left, #000 0%, #111 25%);
background:-webkit-linear-gradient(left, #000 0%, #111 25%);
background:-ms-linear-gradient(left, #000 0%, #111 25%);
background:linear-gradient(left, #000 0%, #111 25%);
-webkit-box-shadow:1px 0 1px 0 #000, 0 2px 0 2px lightGray, 0 2px 0 3px #333;
    -moz-box-shadow:1px 0 1px 0 #000, 0 2px 0 2px lightGray, 0 2px 0 3px #333;
             box-shadow:1px 0 1px 0 #000, 0 2px 0 2px lightGray, 0 2px 0 3px #333;
/* Black Keyboard Key Style by www.superwebtricks.com */}
swt-black-kbk:hover {opacity:1;cursor:pointer}

B) For White Keyboard Keys

swt-white-kbk {/* White Keyboard Key Style by www.superwebtricks.com */
color:#000;
margin:0 5px;
padding:1px 5px;
font-family:courier new;
font-size:1.2em;
border:1px #fff;
-webkit-border-radius:3px;
    -moz-border-radius:3px;
              border-radius:3px;
background:-webkit-gradient(
  linear,
  left top,
  right top,
  color-stop(0%, #fff),
  color-stop(25%, #fff)
/* White Keyboard Key Style by Showeblogin */);
background:-o-linear-gradient(left, #fff 0%, #fff 25%);
background:-moz-linear-gradient(left, #fff 0%, #fff 25%);
background:-webkit-linear-gradient(left, #fff 0%, #fff 25%);
background:-ms-linear-gradient(left, #fff 0%, #fff 25%);
background:linear-gradient(left, #fff 0%, #fff 25%);
-webkit-box-shadow:1px 0 1px 0 #999, 0 2px 0 2px lightGray, 0 2px 0 3px #666;
    -moz-box-shadow:1px 0 1px 0 #999, 0 2px 0 2px lightGray, 0 2px 0 3px #666;
             box-shadow:1px 0 1px 0 #999, 0 2px 0 2px lightGray, 0 2px 0 3px #666;
/* White Keyboard Key Style by www.superwebtricks.com */}
swt-white-kbk:hover {opacity:1;cursor:pointer}

or instead of adding above two bunch of keys, you may add this file just before closing the Head Tag </head> of your blog template HTML.

<link href="http://img.superwebtricks.com/files/swt-keyboard-keys.css" rel="stylesheet" type="text/css" />

Step-2:

Secondly, you have to add these codes where you want to appear the Keyboard key either into your blog posts/pages or any other place.

Remind that you should have to insert codes in HTML view. However, if you want to add codes in Compose mode then just select “Interpret typed HTML” (the radio button) from right side option menu.

A) For Black Keyboard Keys

<swt-black-kbk>A</swt-black-kbk>

B) For White Keyboard Keys

<swt-white-kbk>A</swt-white-kbk>

Finally, replace latter “A” with any other character or symbol as you want to display in your blog posts.

For Example: If you want to show Ctrl + S simple texts as SWT Stylish Keyboard Keys, you need to add these codes.

<swt-black-kbk>Ctrl</swt-black-kbk>+<swt-black-kbk>S</swt-black-kbk>

Enjoy!

Shortlink: http://www.superwebtricks.com/?p=406 Free Technical Help
If you don't want to miss our daily tutorials then you may Subscribe to Showeblogin via Email | Facebook | Twitter | and Google Plus
Home»Blogging»Blogger Blog»Tips and Tricks»How to Display Keyboard Keys in Your Blog Posts
Top