Main menu

Pages

Style blogger post headings with css

Introduction:

You have created a blog using blogger blogspot. You might be using a free or a paid template. And it's working really good, except for the fact that you wanna do a little change in the design.
In this tutorial I’m gonna show you how to style you blogger post heading with CSS .. Don’t worry it’s gonna be really easy. It doesn't require a lot of css learning to customize you blog heading style.

Steps

  • Go to your blogger blog -> Sign in -> go to "Theme" from your blogger panel -> "Edit html"
  • Now your blogger HTML will show.
  • Search for this part of code ]]></b:skin>
  • And just before it , you can put some CSS code to style whatever you want in your blog
  • For now we will use the following css code since we wanna style post headings:
    .post h2 {some code;}

  • In this portion of the code "
    some code
    " add some CSS code to customize post heading style , like changing the background , adding a border , adding a shadow , changing font type , changing font size and others.
  • A ready to use CSS that I learned from w3schools.com  with adding ".post h1":
    .post h1 {

      background-color: #e7f3fe;

      border-left: 6px solid #2196F3;

    }
  • The previous CSS code will change the background color of the post heading h1 (i.e. major heading) to the color #e7f3fe and will add a border (that's solid , 6px thick and colored #2196F3 to te left side of the heading.
  • If you learn some CSS code , you can do a lot to the style and look of your website.
  • Here's  how the heading looks after applying the previous CSS code :
styled h1 heading

  • You can replace "h1" with any heading you want to decorate.
  • For more about border CSS codes check this 

If you found this article helpful , Please share and comment

Comments