Monday, 1 April 2013
How to make CSS3 keyboard like text effect in blogger And Website Post
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 
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! 
|
Subscribe to:
Post Comments (Atom)
I'm 
6 Responses to “How to make CSS3 keyboard like text effect in blogger And Website Post”
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
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.
31 December 2019 at 20:57
The game never plays the very same way twice, in light of the fact that each sims has their very own inspirations, and there's no real way to tell how things will wind up playing out. Get latest sims 4 nedd cheat fill 2020
10 April 2020 at 12:39
I appreciate several from the Information which has been composed, and especially the remarks posted I will visit once more. Wondering where to go in 2019? Things to do has ranked as the best include a remote, idyllic island, the design capital ...
21 October 2020 at 07:13
Internet Business Income From Home
23 March 2022 at 11:54
How To Make Css3 Keyboard Like Text Effect In Blogger And Website Post ~ Kuteb Khana >>>>> Download Now
>>>>> Download Full
How To Make Css3 Keyboard Like Text Effect In Blogger And Website Post ~ Kuteb Khana >>>>> Download LINK
>>>>> Download Now
How To Make Css3 Keyboard Like Text Effect In Blogger And Website Post ~ Kuteb Khana >>>>> Download Full
>>>>> Download LINK
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