[Turns Tricks] How to Custom heading and subheading styles for Blogger

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

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 :)

Read More

[Turns Feed] 10 ANIMAL-INSPIRED ROBOTS

The members of the kingdom Animalia walk, run and swim in different environments. Some can even walk on water. Researchers and military officials would love to have robots at their command that can do the same, so many are now developing robots that take clues from cockroaches, cheetahs, stingrays and more. These roboticists spend a lot of time observing their animal models in action and sometimes even dissect them to see how they're engineered on the inside. Here we round up 10 of the coolest animal-inspired robots and explain how they steal engineering ideas from nature.

read The Full Post : 10 ANIMAL-INSPIRED ROBOTS

Read More

The Web Factory – an astonishing WordPress based PSD template

fter a bit of absence around the blog, I may announce the slowly but steady come-back of our blog via an excellent freebie: “The Web Factory”. This is a free PSD template with a focus to WP theme integration. It can be used as a company website or why not, with a bit of creativity, it can be transformed to anything you want.

Read The Full Post : The Web Factory – an astonishing WordPress based PSD template

Read More

[Turns Feed] Watermark Your Images with PHP Image Workshop

PHPImageWorkshop is an open source class using the GD library that helps you to manage images with PHP. This class is thought like photo editing software like Photoshop and GIMP: you can superpose many layers or even layer groups, each layer having a background image.

Read The Full Post : Watermark Your Images with PHP Image Workshop

Read More