How To Fully Customize The Post Titles On Blogger


blog designMany of the templates both from the Blogger template designer and Custom templates leave the post titles fairly standard.When it comes to fonts, sizes, colors etc.. the post titles on almost all blogs have the same design.But you can add some spice to your post titles without too much hard work and adding even a few minor customizations can make all the difference.Every Blogger template has a small piece of Css that controls how the Post titles appear and by adding or changing small pieces of code we can change the appearance.

So in this post among other changes to your blog titles we will see, How To Change The Size, Change The Color, Change The Background Color or add A Background Image, Change The Font Family and more..

First make sure to back up your template, I’m sure you wont make a mistake but just in case.With that done lets look at some of the effects we can add to Blogger post titles.

How To Customize Post Titles 

The first thing we must do is find the section of Css that controls the post titles.This code will be the same in 95% of blogs so if for some reason it differs in your blog drop a comment and we will help.

From you dashboard click ‘Design’ > ‘Edit Html’ (No Need To Expand Widget Templates)

Click ‘CTRL F’ and look for the following code (CTRL F generates a search bar – More Info)

.post h3 a

This is the section of code that controls your post titles, it will be followed by a few lines of code that create the appearance.

If You Cant find that code try looking for this :,

Now that you have located the sections of code that control the appearance of your post titles you can change the current Css or add extra Css, lets look at some examples.If you are adding Css it always goes below the code you found.

Make The Text / Font size Bigger Or Smaller – change the font-size number :

font-size: 18px;

Make The Post Titles All Capital Letters –  add the following code directly below .post h3 :


Make The Post Titles Bold –  if you see font-weight: normal; change to font-weight: bold; or add font-weight: bold; if it is not already specified.

Move the Post Title To the left, right or in the center –  Change or add the code below :


Add A Background Color To Your Post Titles –  Add The Code Below With Your Desired Color :


You can change #000000 to your desired color – Get color codes here

Add A Border To Your Post Titles –  Add The Code Below :

border: 1px dashed #cccccc;

You can change the border type dashed to solid or dotted, you can also change the color code from #cccccc – Get color codes here.

Add A Background Image To Your Post Titles –  Add The Following Code :

background:url(http://YOURIMAGE.jpg) repeat;

Replace http://YOURIMAGE.jpg with the image you want to use.

Change the Font Style / Font Family –  Your Css will either have the Font Family similar to this :

font: $(post.title.font);

Or Similar To This :

font-family: Georgia,trebuchet ms, tahoma, Verdana, Arial, Sans-Serif;

To Change The Font Family Replace that code with another font.This link is to Common Fonts For Windows And Mac..Almost all these fonts will work with Blogger.

Remove the current font and add the new font link this :


To Look Like This :

font-family: Arial, Arial, Helvetica, sans-serif;

Be sure to add ; at the end of the font family.

There is much more you can do to customize your post titles but we will leave it there for now.Don’t go changing your template without having a back up and that way you can play around until you find what your looking for.Another idea is to create a test blog and get the right combination there before changing the real blog..Have Fun !



  1. nice



  2. I am really loving all the blog help, but for some reason, I cannot get this to work. I’m using the Travel template on Blogger, and no matter how many times I put in the code for the border and background image, it won’t work. Any advice?

    Thanks so much!


  3. chatpat indian recipesJuly 10, 2011 at 7:47 PM

    Can you pls name the font u use for your title ?


  4. Thanks for these tips, they’re great! Can you tell me how to change the transparency of the post title background color?


  5. uh I can’t found any phrase .post h3 a but i do found h3 .post
    but the arrangement is very different and i don’t know where to place these code. help please


  6. thank a lot mate….i searched for this in so many blogs…only your tutorial worked..thank u once again


  7. This was a wonderful thread really enjoyed the information !…


  8. I want to make my post title a Link…. I am using a Template which makes all post Titles as Simple Text…Please do let me know how to do that?


  9. really a bunch of good things to do with your post titles..thanks a lot


  10. Thanks for sharing the info. Can you please help to add small color bar before start of each titles?


  11. Have been trying for a week to increase the size of my header description, but to no avail from other sites’ tutorials. This finally worked! Thank you so much


  12. Thanks boss .. You’re the boss of bloger designer still alive huh !


  13. very nice information! I’ll integrate it to my blog soon. Thanks


  14. Hello,
    I am trying to find the part in my HTML that controls the post-titles but i don’t have either of the html codes you posted.

    any suggestions??


  15. thanks a lot! this will help me customizing my blogger post.