Blogger Tips
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 named <kbd> which 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 you how to create a keyboard keys effect with CSS. It doesn't require images so your blog will load faster.
Step 1. From Blogger Dashboard, select your blog and go to Template > Edit HTML
Step 2. Click anywhere inside the code area, press the Ctrl + F keys and search for this piece of code:
Step 3: Just above ]]></b:skin> paste this CSS style:
Finally, we need to add the html <kbd> tags to the text on which we want to apply the keyboard keys style.
From your blogger's dashboard, go to create a New 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:
This will make it to look like this:
Ctrl + F
- Add A Cool Style To Blogger Threaded/nested Comments
If you need a fresh style to the threaded comments of a standard Blogger template, here's a simple CSS that will help you to apply a different background, make your avatars rounded, add a border with rounded corners and a triangle which is actually...
- Rounded Corners And Shadows For Images Using Css
Here are some unique border styles that you can apply to blogger images by using the border-radius property and defining either all four corners simultaneously or applying the rounded border only to some of them. One of the advantages of CSS3 is that...
- How To Add A Vintage Style To Images In Blogger Using Css
To get that vintage Instagram effect on your pictures, you don't have to use a program, now you can use CSS and get a similar result! The following trick will apply a shadow inside the image, add a back border, and on top of the image, add another...
- How To Create Drop Caps (big First Letters) In Blogger/blogspot
Here's another way to customize your Blog. In this case, your Posts and Comment's first letter. The effect is a large first letter stretching down three or four lines with the text wrapped around. The drop cap letter can also use a different font...
- How To Remove Blogger Picture/image Shadow And Border
If you want to get rid of those annoying shadows and borders around blogger images, then follow the next steps (see the difference in the screenshot below): If you are using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced...
Blogger Tips
Add Keyboard Keys Effect To Your Text in Blogger with CSS
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 named <kbd> which 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 you how 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 to Template > Edit HTML
Step 2. Click anywhere inside the code area, press the Ctrl + F keys and search for this piece of code:
]]></b:skin>
Screenshot
 |
| Click on the arrow to expand the code |
Step 3: Just above ]]></b:skin> paste this CSS style:
kbd{Step 4. To save the changes, press the Save change button.
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;
}
Finally, we need to add the html <kbd> tags to the text on which we want to apply the keyboard keys style.
From your blogger's dashboard, go to create a New 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:
<kbd>Ctrl</kbd> + <kbd>F</kbd>
Screenshot
This will make it to look like this:
Ctrl + F
- Add A Cool Style To Blogger Threaded/nested Comments
If you need a fresh style to the threaded comments of a standard Blogger template, here's a simple CSS that will help you to apply a different background, make your avatars rounded, add a border with rounded corners and a triangle which is actually...
- Rounded Corners And Shadows For Images Using Css
Here are some unique border styles that you can apply to blogger images by using the border-radius property and defining either all four corners simultaneously or applying the rounded border only to some of them. One of the advantages of CSS3 is that...
- How To Add A Vintage Style To Images In Blogger Using Css
To get that vintage Instagram effect on your pictures, you don't have to use a program, now you can use CSS and get a similar result! The following trick will apply a shadow inside the image, add a back border, and on top of the image, add another...
- How To Create Drop Caps (big First Letters) In Blogger/blogspot
Here's another way to customize your Blog. In this case, your Posts and Comment's first letter. The effect is a large first letter stretching down three or four lines with the text wrapped around. The drop cap letter can also use a different font...
- How To Remove Blogger Picture/image Shadow And Border
If you want to get rid of those annoying shadows and borders around blogger images, then follow the next steps (see the difference in the screenshot below): If you are using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced...