Friday, 25 October 2013

Tagged under: , , ,

How to Add Stylish Keyboard Keys in Blogger Posts ?

Stylish Blogger Keyboard Keys
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. Click on Arrow Option to expend

  5. 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>

Stylish Blogger Keyboard Keys

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

Demo



Need Help

We are confident you would this tutorial and hope you have learned how to add Stylishly keyboard keys in blogger. If you are still confuse and do not do the customization then we are hugely want to posts your query in comment section we will soon resolve your problem. If you want to know more about blogging tricks then kindly visit our PBT Gadget Inventory. thanks and hope to see you in coming tutorial:

6 comments:

  1. These keys look amazing, nice tutorial.

    ReplyDelete
  2. Awesome bro :) I have seen something similar to this somewhere before, but I thought that was images. Thumbs Up!

    ReplyDelete
  3. I think I saw this post somewhere else . Did any one stole it from you bhai ??
    nice Tutorial BTW

    regards
    Adu Alex
    www.bit.ly/8ruuux

    ReplyDelete
  4. Well, these are really very much helpful and effective tips to go with. Adding such beautifully designed keyboard keys make the post more attractive and different from other general posts. These are really amazing.

    ReplyDelete

About ProBloggerTricks

Founded in 2013, Pro Blogger Tricks is the ultimate resource for bloggers and marketers. Looking for ways to make money online? Need blogging tips, SEO tips and other business and marketing related content? Probably, the best source of information about monetizing a blog ....Read More

Copyrights @ 2014, Pro Blogger Tricks - Designed By Templateism