How To Display White And Black Keyboard Key Button Within Posts

How To Display White And Black Keyboard Key Button Within Posts
keyboard buttons

some of my web visitors and friends have asked me whether i can actually display Keyboard Keys into posts. Yes!, you can do this with Css code which aids you to organize the design style and layout of multiple web page all at once.

countless website owners also wants us to teach them how to display white and black keyboard key button within posts and into their web pages animatedly to create a center of attention for visitor instead of showing images, photos or simple text format. If you use any image to display Keyboard Keys then it will have bad impact on your blog posts loading time.

Thus, you can give unique keyboard key effect to any content or symbol using SWT CSS3 tricks. Therefore, just follow these procedures and make your Posts more active and jolly. Display keyboard keys in your posts.

How To Display White And Black Keyboard Key Button Within Posts

There is very effortless step to display keyboard key in your posts. Just copy and paste Css codes into your site and display keyboard key anywhere in your blog post you want it to display.

Step 1:

First thing first, all you need is to insert these Css codes into your website or blog. Display keyboard keys. If you have created Css file then just copy the code and paste it into the css file. But remember not all wordpress themes allow users to paste custom CSS codes.

However, if you have a blogger blog then go to your blog dashboard → Theme → Edit HTML and search for ]]></b:skin> and just before or above ]]></b:skin> paste either one or both of the listed codes below.

  1. For Black Keyboard Keys

Use these css codes to display keyboard key in black color.

swt-black-kbk {/* Black Keyboard Key Style by www.MogulQuest.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 MogulQuest */);

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.MogulQuest.com */}

swt-black-kbk:hover {opacity:1;cursor:pointer}

  1. For White Keyboard Keys

Use these css codes to display keyboard key in white color.

swt-white-kbk {/* White Keyboard Key Style by www.MogulQuest.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 MogulQuest */);

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.MogulQuest.com */}

swt-white-kbk:hover {opacity:1;cursor:pointer}

another procedure rather than 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=”https://img.MogulQuest.com/files/swt-keyboard-keys.css” rel=”stylesheet” type=”text/css” />

Step 2:

Secondly, you have to add these Css codes where you want it to appear in your blog posts/pages or any other place.

Also remember you 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.

  1. A) For Black Keyboard Keys

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

  1. B) For White Keyboard Keys

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

Finally, replace letter “A” with any other character or symbol as you want to display keyboard key 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>

If we satisify you on how to display white and black keyboard key button within posts, don’t forget to give us a surprise package.

Enjoy! Don’t forget to subscribe to MogulQuest by hiting the bell button.

Reference by,

ICEEET

Leave a Reply

Your email address will not be published.

%d bloggers like this: