Home » Blogger Tutorials, Tricks and Hacks » Blogger Graphics / Effects Tricks » How To Add The ‘Keyboard Key’ Effect To Blogger Using CSS3

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

How To Add The ‘Keyboard Key’ Effect To Blogger Using CSS3

How To Add The ‘Keyboard Key’ Effect To Blogger Using CSS3

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error


Here’s a nice little Blogger trick that you might want to try out on your blog. It’s from Osho Garg from TechEHow, and this snippet of code allows you to use a special HTML tag on your posts that will make text look like a keyboard key. If you write instructional articles or tutorials, incorporating this in your site will certainly make your articles more reader-friendly. Basically, it’s more of an aesthetic feature to have than a functional one.

  • Login to your Blogger account and in your dashboard, go to the “Template” section of the “Design” page
  • Click on “Edit HTML” and then on “Proceed
  • Tick on the the”Expand Widget Templates” and then by pressing “Ctrl+F”, look for ]]></b:skin>
  • Copy/paste the following code before it:
border:1px solid gray;
box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
margin:2px 3px;
padding:1px 5px;
  • Save your template and you’re done!

To use this feature, just go into HTML mode when you’re composing your post and enclose the text you want to appear as a keyboard key between the <kbd></kdb> tags. Example, if I want to write “Ctrl+F” or instruct my reader to press the “Ctrl” button together with the “F” button, I simply type:


Happy blogging and have a good day, everyone!

Liked It ? Please Share


2 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. nice code,,,,,thanks for share….

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here