How To Fully Customize The Post Titles On Blogger




| 15 comments

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 :

h3.post-title,

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 :

text-transform:uppercase;

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 :

text-align:left;
text-align:right;
text-align:center;

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

background:#000000;

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 :

font-family:FONT FROM ABOVE LINK HERE;

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 !


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

15 comments:

  1. 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!

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

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

    ReplyDelete
  4. 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

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

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

    ReplyDelete
  7. 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?

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

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

    ReplyDelete
  10. 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

    ReplyDelete
  11. Thanks boss .. You're the boss of bloger designer still alive huh !

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

    ReplyDelete
  13. 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??

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

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us