Subscribe for FREE Updates.

Monday, 1 April 2013

Widgets

How to make CSS3 keyboard like text effect in blogger And Website Post

How to make CSS3 keyboard like text effect in blogger
After giving Stylish Subscription Widget for Blogger Blog And Your Website. Now In This Tutorial, I will show you How to add Keyboard Keys Effect with CSS In your Blogger Blog And Website. You Can Easily Add This Effect to Every Blog Post And Every Your Web Post.  So now you want to Follow these simple Steps bellow.








How can you add keyboard keys effect in your blog post?


  • Log in to your blogger account.
  • Click on blog title in which you want to add This Keyboard Like Text Effect
  • Go to Template and then click on "Edit HTML" Check Expand Widget Box..
  • Now Find bellows code Using Ctrl+F Function.

]]></b:skin>

  • Paste bellow CSS Code  just above this ]]></b:skin>

Code for White color Keyboard Keys



KKW{
border:1px solid gray;
Background: #ffffff;
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;
}


Code for Black color Keyboard Keys


KKB{
border:1px solid gray;
Background: #000;
font-size:1.2em;
box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
Color:fff;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:2px 3px;
padding:1px 5px;
}


Code for Red color Keyboard Keys

KKR{
border:1px solid gray;
Background: #FF0000;
font-size:1.2em;
box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
Color:fff;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:2px 3px;
padding:1px 5px;
}



Code for Green color Keyboard Keys


KKG{
border:1px solid gray;
Background: #008E00;
font-size:1.2em;
box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
Color:fff;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:2px 3px;
padding:1px 5px;
}

Settings!

You Can Change highlighted code for change your keyboard background color. (Choose color From here)

Using in your blog post and pages

Please replace Write Your Word Here With Your Word!

For Black:
<KKB> Write Your Word Here </KKB>

 For White:
<KKW> Write Your Word Here </KKW>

For red:
<KKR> Write Your Word Here </KKR>

For Green:
<KKG> Write Your Word Here </KKG>


If you have any Kind of questions about this post, please lave a comments bellow. 

Do not forget to share this Post with your friends!

Shakeel Asghar ADMIN
Posted By: Shakeel Asghar

Shakeel Asghar is the owner and founder of kutebkhana.blogspot.com. I love to blogging, Design Blogger template, Web Developing and Designing.i like to learn and share tips with you.

Do you Like this story..?

Get Free Email Updates Daily!

Follow us!

2 Responses to “How to make CSS3 keyboard like text effect in blogger And Website Post”

BloggerHeroe.Com said...
3 April 2013 at 12:26

nice i'm looking for this..try to read my latest post here: 5 Important Things to Do Before Publishing Your Article


shakeel asghar said...
3 April 2013 at 12:48

@ Adrian Lucernas owner of bloggerheroe!
brother i am a loyal reader of your blog thanks for visiting and also for this beautiful comments.


Confused? Feel free to ask

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. Make sure to click the "Subscribe By Email" link below the comment to be notified of follow up comments and replies.
2. Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
3. If you have a problem check first the comments, maybe you will find the solution there.


Regards,
Shakeel Asghar

Are you Awesome? Legend has it that Awesome people can and will share this post!
How to make CSS3 keyboard like text effect in blogger And Website Post