Customize Post Headings

postheadings

First of all…MERRY CHRISTMAS EVERYONE! I hope everyone is having a great time :D I guess you could say this is my Christmas present to you. I’ve compiled a list of potential heading formatting that you can use in your posts. I used one color for all of these examples, but in the CSS code box, I wrote “COLOR” in the space where you should put your color choice. You can choose colors here: http://www.huecode.com/

All of these heading examples are for h3 tags, but if you want it for a different heading number, just replace that number 3. In Blogger, the “Subheading” is h3. For information on how to change the font for your heading, check this tutorial.

If you don’t know how to add CSS to your blog, follow this tutorial.

For WordPress Users

In the CSS boxes, do you see the text before h3 that says entry-content? That’s the post body class name for Blogger and some WordPress templates. The following CSS may not work for you if your post body section doesn’t have the class “entry-content” If you’re going to ask me what your post class is because you don’t know, make sure you include your URL when you’re commenting. (if you’re using the Tweak Me Theme, it’s post_content). When you know your post body class, just replace entry-content with your class in the CSS boxes below (don’t delete the dot in front).

My Thoughts

 

My Thoughts

 

My Thoughts

 

My Thoughts

 

 

My Thoughts

 

My Thoughts

 

My Thoughts

 

My Thoughts

 

My Thoughts

 

My Thoughts

 

My Thoughts

 

My Thoughts

 

My Thoughts

 

My Thoughts

 

My Thoughts

 

My Thoughts

 

My Thoughts

If you have any questions, just let me know! If the colors aren’t showing up it’s probably because you skipped the first paragraph of this tutorial and didn’t replace the word “COLOR” in the CSS with your actual color. Also, if you want to change the font size for your heading 3, just add:
font-size: 30px;

right before the ending bracket in the above CSS (increase or decrease the number 30 to adjust the font size.

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

20 thoughts on “Customize Post Headings

  1. Hello!

    I’m a newbie at css things XD

    I’m now on wordpress (yeah :D:D) and using the tweak theme v.2 and i put that code on the “theme options”—» “custom code”:
    .post-content h3{
    margin: 10px 0;
    text-align: center;
    padding: 5px 0;
    border: 4px double white;
    color: white;
    background: #6AB5AE;
    }

    and nothing happened XD

    Have a great christmas :) and thanks for the code (even though i don’t know how to make it work XD)

  2. Ahhh! Thank you so much for this! I’m definitely bookmarking this to come back to. I was just thinking the other day that my post headings are boring! I haven’t tried messing with my CSS at all yet, so I’ll have to work up the courage :) THIS IS AWESOME

  3. Merr Christmas too, Stephanie! (Although it’s a bit late now, isn’t it? ^^)

    This is a very useful tutorial, especially for beginners. I remember looking for these things back then when I just started designing my own blog but it was quite hard finding the tips which were easy to understand. Plus, I didn’t know a lot of CSS terms so it was definitely difficult for me. I’m sure a lot are going to feel helped by this post :)

  4. Oh, this is very helpful – thank you so much for posting! I’ve been trying to figure out how to change the colour of headings, so this should definitely come in handy. :D Happy holidays to you! x

  5. First of all, I just want to say that I love when you do these posts. I frequently link to them when I’m compiling advice for other bloggers in my bookish rounds posts. This is yet another post that makes me think I chose wrong all those years ago — blogger instead of wordpress. Did I see somewhere that you can edit CSS in blogger but it gets complicated? I’m pretty clueless about any blog design/programming bits, but I did want to pop in and say thanks. Your headers are very gorgeous (I wish I could use the double line underlined My Thoughts). Happy New Year :) & happy reading! I hope to return sometime this weekend to comment on your NY Resolutions/Goals for 2015 post.

    1. Thanks Christina! I really appreciate the link up :)

      I’d actually say that editing CSS isn’t more complicated in Blogger than WordPress. Blogger just likes to keep its CSS and HTML together in one template, and WordPress separates its CSS into a separate style sheet.

      If you wanted to EDIT your CSS in Blogger you’d just go to Template > Edit HTML > and the CSS is all that blue text at the beginning after (you may have to uncollapse it if there is an arrow next to that tag).

      If you wanted to simply NEW ADD CSS you could go to Template > Customize > Advanced > Add CSS. Either one would work but this method would be easier to access if you don’t like going in your template :)