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.- Go To Blogger Dashboard:
- Go to Template >> Edit Html:
- Now search for ]]></b:skin>
- Click on Arrow Option to expend
- 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:
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:
