Using heading and subheading are as important to search engine as to your viewers. While organizing your ideas and steps into different headings such as H1, H2, H3 and so on you can also customize their styling to catch your readers distructive attention and make it unique with nice styling. I will show you how you can change the styling of either of the heading tags such as h1, h2 and h3 to with free customized css and images.
For blogger, you have to add the CSS before </b:skin> tag. For all heading tag the structure for adding your css is following:
When writing in composer use the option where it says normal to use h2, h3 and so on. On the html mode you can use the following codes:
Here are some of the styles you can use. Add them before </b:skin> while editing your template. Change h2 to whatever heading you want the style to use it for. For size, add font-size: 14px; and change the number value for bigger or smaller text. Also feel free to customize and change the color and properties as you wish. See the preview on the blog before the styles.
The possibilities are endless :P for all the different customized text. Try to use them and if you need any help, let me know in the comment section as well as any request of certain type of style that you were looking for. I will be happy to assist you.
Understanding the structure:
For blogger, you have to add the CSS before </b:skin> tag. For all heading tag the structure for adding your css is following:
.post h1{ENTER_YOUR_CSS_HERE}When writing in composer use the option where it says normal to use h2, h3 and so on. On the html mode you can use the following codes:
<h1>ENTER_YOUR_TEXT_HERE</h1>Here are some of the styles you can use. Add them before </b:skin> while editing your template. Change h2 to whatever heading you want the style to use it for. For size, add font-size: 14px; and change the number value for bigger or smaller text. Also feel free to customize and change the color and properties as you wish. See the preview on the blog before the styles.
Heading style 1, a very commonly used style
.post h2{
color:#0080ff;
border-top:1px dotted #0080ff;
border-bottom:1px dotted #0080ff;
padding:3px;}Heading style 2, CSS3 readius
.post h2{
text-align: center;font-weight:bold;border:solid 5px #999c3b;
font-size:14px;
-moz-border-radius-topleft: 75px;
-moz-border-radius-topright:75px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:75px;
-webkit-border-top-right-radius:75px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:75px;
border-top-right-radius:75px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;padding:3px}Heading style 3, all round edge
.post h2{
text-align: center;font-weight:bold;border:solid 5px #0fc7ff;font-size:14px;
-moz-border-radius-topleft: 75px;
-moz-border-radius-topright:75px;
-moz-border-radius-bottomleft:75px;
-moz-border-radius-bottomright:75px;
-webkit-border-top-left-radius:75px;
-webkit-border-top-right-radius:75px;
-webkit-border-bottom-left-radius:75px;
-webkit-border-bottom-right-radius:75px;
border-top-left-radius:75px;
border-top-right-radius:75px;
border-bottom-left-radius:75px;
border-bottom-right-radius:75px;}Heading style 3, with weird shadow
.post h1{
line-height: 1em; color: #91b9ff; font-weight:bold; font-size: 17px; text-shadow:0px 0px 0 rgb(-365,-325,-255), 0px -1px 0 rgb(-620,-580,-510),0px -2px 1px rgba(0,0,0,1),0px -2px 1px rgba(0,0,0,0.5),0px 0px 1px rgba(0,0,0,.2);}Heading style 5, with invisible shadow
.post h1{
font-size: 14px; font-weight: bold; text-shadow: 0px 0px 35px #000000;} The possibilities are endless :P for all the different customized text. Try to use them and if you need any help, let me know in the comment section as well as any request of certain type of style that you were looking for. I will be happy to assist you.
No comments:
Post a Comment