Add Stylish Keyboard Keys Widget In Blogger Posts

Today we are going to release splendid amazing Css keyboard keys to add in your blogger posts. These Css keys will bring more beauty in your blogger posts and will make your blog more designable. We are now alerted all blogspot users, they can show stylishly Keyboard keys instead of any selective text. These keys are solely developed in CSS3 to design and have not used any image or photo, so that not to increase the blog loading time. So If you are the true lover of PBT then you might be familiar that recently we have shared detailed tutorial about Blogger Fancy Social Sharing gadget and today we have yet another this splendid tutorial to show you with the complete guide.So in this article we will guide you, How to add stylish CSS3 keyboard keys in blogger post to make it designable. 

Why To Show The CSS3 Stylish Keyboard Keys In Blogger Posts

Blogger is full of beauty even a teenager can customize it layout interface in less than a minute. Every single day bundles of blogger templates releasing with unique stylish designing. So to make your blog more stylized and designable we have to analyzed each and every corner of the blog. Even we can also customize the default text in blogger to switch into Css stylish designing. Generally we use to show the default keyboard keys text inside blogger posts whenever learning how to gadget in blogger or something like that. Now for better understanding and being as professional blogger we have to add some css3 designing keyboard keys to help the newbies very well instead of showing default text.

Adding Css Keyboard Keys In Blogger Template

First of all we have to add the keyboard Css style inside the template. We will copy the below Css entire code and then past into the template. Now whenever we want to write the post and need that designable keys to show then we have only need to call the by inserting specific ids or class.

1. Go To Blogger Dashboard:


2. Go to Template >> Edit Html:


3. Now search for ]]></b:skin>


4. 


5. Click on Arrow Option to expend


6. Now past the below given code above ]]></b:skin>

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

Save your template and you done the first part:

Now whenever you go to write your new post and do want to show these stylishly keyboard keys in specific location then you will need to type the following queries inside your blogger post editor html: Let me show You.

<kbd>Ctrl</kbd> + <kbd>F</kbd>

After enclosing your text inside the above tags: then these texts will be visible or looks like the below text:

Enjoy With........................

Solution Bux