Keyboard effect on blogger post

Posted On / Leave a Comment

A blog design is very important, if you have a beautiful template and unique designs, then your blog post should be beautiful too. Today I will share to you how to make a keyboard effect on your blog post. This is CSS consist of no image and will not affect your blog speed. Lets begin the tutorial shall we.

Lets view the Demo first:

ALT + F4




1. Go to blogger dashboard > layout > edit HTML.

2. Find this code using CTRL + F   ]]></b:skin>

3. Paste the code below above it

/***************************************** Keyboard Style CSS ******************************************/ 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; }

 4. Save template!

Using it on blogger post

If you want to use it on your blog posts just follow these simple steps.

  • Go to your blog posts, you can either create new or edit existing posts.
  • Click HTML besides the compose button.
  • Use the <kbd> </kbd> tag when you want to use the keyboard effect.

<kbd> I LIKE YOU </h2>

         I LIKE YOU

That's it! I hope you enjoy this trick! thank you for reading!

Receive News From The Blog In Your E-mail

Sign up and receive directly in your email. Its free!! Enter your email address and then confirm to begin receiving exclusive news from Blog!


Post a Comment

Please read first before commenting:

1.) No spamming please

2.) Do not flood the comment box with links.

3.) To get free updates, kindly subscribe.

4.) Have fun visiting my blog.

emailSubscribe to our mailing list to get the updates to your email inbox...
Delivered by FeedBurner | powered by blogtipsntricks