Add Keyboard Keys Effect To Your Text in Blogger with CSS alphause

Helplogger Home Blog DesignWidgets SEO Menus Po ... Add Keyboard Keys Effect To Your Text in Blogger with CSS 1 comments For many of us the design and the template are the most important, making our readers be more interested and coming back to our blog. There's an HTML element meant for marking up keyboard keys namedwhich can be styled with CSS, so why not use it to make those elements look the keyboard keys? Thus, in this tutorial, I am going to show youhow to create a keyboard keys effect with CSS. It doesn't require images so your blog will load faster. How to Add Keyboard Keys to Blogger Step 1. From Blogger Dashboard, select your blog and go toTemplate>Edit HTML Step 2. Click anywhere inside the code area, press the Ctrl + F keys and search for this piece of code: ]]> Screenshot Click on the arrow to expand the code Step 3: Just above]]>paste this CSS style: 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; }Step 4. To save the changes, press the Save change button. Finally, we need to add the htmltags to the text on which we want to apply the keyboard keys style. From your blogger's dashboard, go to create aNew Post, write the text on which you want to apply the style and go to the HTML tab. Before and after the text, add the following HTML tags: Ctrl+F Screenshot This will make it to look like this: Ctrl+F Like 1 Random Posts 4 Alternatives to Google AdWords20/10/2013 - 0 Comments How to add go to top and go to bottom buttons Using jQuery in Blogger06/03/2013 - 33 Comments A Beautiful jQuery Drop-Down Menu For Blogger Blogspot26/04/2012 - 24 Comments Related Posts: Add a Custom jQuery Lightbox To Blo... How to Add CSS code To Blogger usin... How to add custom Variable definiti... Understanding the Page Elements of ... What is the difference between padd... 1 comment: Anonymous 10/25/2013 how to hide about me in blogspot at the bottom of the page. just like your blog please help me. message me details krishgopal.8500@ gmail.com Reply Add comment Comment as: Sign out Notify mePublishPreview Privacy Policy| Disclaimer| Terms of Service| Sitemap Back to Top DMCA PROTECTED Search Search Follow on Facebook Helplogger Like 2,777 people like Helplogger . Facebook social plugin Follow on Blogger Subscribe via Email Receive Quality Tutorials Straight in your Inbox by submitting your Email below. Submit Or subscribe via RSS Feed Recent Posts How to Add Numbered Page Navigation Widget for Blogger 5 Easy Ways to Improve the SEO of a blog & Boost Traffic What is the difference between padding and margins? Add a Custom jQuery Lightbox To Blogger How to Use Cookies in Javascript Recent Comments Usman Kurniawan not work in my template :( ahmad why i cant use that ? or because my blog its nofollow ?? Anonymous hi admin g i want ask some query about blogging please tell or... JazzyJ Thanks so much! But how do you change the font type of the... Saumya SC Done.........Awesome.........Thanks a lot :) Popular Posts Simple Recent Posts Widget for Blogger/Blogspot Create A Rollover Image Effect (change image on mouseover) Recent Comments Widget For Blogger How to remove Blogger Picture/Image Shadow and Border Hide/Show Widgets /Gadgets in Home/post /static/archive pages in Blogger 1 Like