Heading and subheadings are essential for a organized blog post. By defult most blogger template has a boring heading and subheading style set up. Let's make the heading and subheadings of blogger more interesting. If you are familiar with messing with codes, you will love to see my previous examples of adding custom styles for for heading and make your own. Today I will give you some all set nice looking and background base heading and subheading styles for blogger. Keep updated for more advance and with different style heading CSS....
What is Heading/Subheading in blogger
There you go, the last line was a heading with custom styles. You should consider using them more often to get better SEO and better user interaction. You can use them by selecting the text from composer and choosing from the option shown in the image.
How to install the custom heading style
The css of each styles are below. Copy the code you choose. Then go to blgger.com and choose your blog. Go to Template > Edit HTML > Proceed. Now find </b:skin> and paste your code before </b:skin> . Save the template and your done!
The heading CSS, the talk
These are simple heading CSS with only background difference. You can choose from or create your own background pattern and replace with the background image. You can find link to background pattern gallery here. Stay updated for more advance css and new styles.
Check out: some more cool heading/subheading css
Check out: some more cool heading/subheading css
Heading style 1
CSS for heading:
.post h2{background: url("http://4.bp.blogspot.com/-X7ttbkmWQCE/UCUoRfLo1CI/AAAAAAAAAmw/a9c156k5huA/s320/crisp_paper_ruffles.png");-webkit-box-shadow: inset 0 0 10px #8D8C8B;
-moz-box-shadow: inset 0 0 10px #8D8C8B,
box-shadow: inset 0 0 10px #8D8C8B;
padding-left:20px;}
CSS for subheading:
.post h3{background: url("http://4.bp.blogspot.com/-X7ttbkmWQCE/UCUoRfLo1CI/AAAAAAAAAmw/a9c156k5huA/s320/crisp_paper_ruffles.png");-webkit-box-shadow: inset 0 0 10px #8D8C8B;
-moz-box-shadow: inset 0 0 10px #8D8C8B,
box-shadow: inset 0 0 10px #8D8C8B;
padding-left:20px;}Heading Style 2
CSS for heading:
.post h2{background: url("http://2.bp.blogspot.com/-KtkNgCXTHJs/UCUoRO9r4DI/AAAAAAAAAmo/aQxtR3iCA8s/s1600/carbon_fibre_big.png");-webkit-box-shadow: inset 0 0 10px #ffffff; -moz-box-shadow: inset 0 0 10px #ffffff, box-shadow: inset 0 0 10px #ffffff; padding-left:20px; color:white;}
CSS for subheading:
.post h3{background: url("http://2.bp.blogspot.com/-KtkNgCXTHJs/UCUoRO9r4DI/AAAAAAAAAmo/aQxtR3iCA8s/s1600/carbon_fibre_big.png");-webkit-box-shadow: inset 0 0 10px #ffffff; -moz-box-shadow: inset 0 0 10px #ffffff, box-shadow: inset 0 0 10px #ffffff; padding-left:20px; color:white;}Heading Style 3
CSS for heading:
.post h2{ background: url("http://2.bp.blogspot.com/-vKsJl1CqC5g/UCUoR7AWeQI/AAAAAAAAAm4/LiRyKFe4bA8/s1600/diagonal-noise.png");-webkit-box-shadow: inset 0 0 10px #ffffff; -moz-box-shadow: inset 0 0 10px #ffffff, box-shadow: inset 0 0 10px #ffffff; padding-left:20px; }CSS for subheading:
.post h3{ background: url("http://2.bp.blogspot.com/-vKsJl1CqC5g/UCUoR7AWeQI/AAAAAAAAAm4/LiRyKFe4bA8/s1600/diagonal-noise.png");-webkit-box-shadow: inset 0 0 10px #ffffff; -moz-box-shadow: inset 0 0 10px #ffffff, box-shadow: inset 0 0 10px #ffffff; padding-left:20px;Make your own blogger heading style
Now that you saw all the codes, you can create your own. For the url, change it to any pattern you wish. You can find patterns to download and upload to get the link at subtlepatterns.com. If the bakground is black, add color:white; to make the text white and change the inset color to #ffffff. And if you think you can handle little more, you might want to add a custom font as well. Otherwise copy everything and replace with the link to create similar style heading to add. Have fun and happy blogging :)
