Monday, September 27, 2010

How to center post title (customization)

If you want to center (or align left or align right) the post title, sign into Dashboard > DESIGN > EDIT HTML to open the template editor and search for .post h3 (use ctrl+F) or code that may look something like those below (code below for Minima template, yours may be slightly different):

Reminder: Always backup template and backup gadgets before editing the template.

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}


The just add this line text-align:center;

.post h3 {
text-align:center;
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}


preview and if OK, save template.

Update: Different template may define post title differently. For example, a commentator found that for her, it was
h3.post-title {


If you want to align the post title to the left or to the right, just substitute text-align:center; with either text-align:left; or text-align:right;

Note: If you can't find the relevant code, let me know what template you are using via my contact form

40 comments:

  1. Hola Peter ! Some templates do not have this code h3,search h2 enough to find as seen below in my
    ---------------------------------
    .excrept_post h2 {
    text-align:center;
    border: none;
    }
    .excrept_post h2 a, .excrept_post h2 a:visited {
    ----------------------------------
    Visit my site

    font-size: 20px;
    color: #444;
    border: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;

    ReplyDelete
  2. I added myself to follow your blog. You are more than welcome to visit mine and become a follower if you want to.

    God Bless You ~Ron

    ReplyDelete
  3. Peter, thx for this one.
    Is it possible to center, align left or right post title for each individual post.

    ReplyDelete
  4. Peter,
    Can you do a post on how to extend the width of a blog's main body (column).

    eg: my blog started with a classic template done by a stranger. Then typical pictures and youtube were of lower resolution. Now we can upload pics of big sizes. Now high res youtube videos get truncated in my main column.

    Thanks

    ReplyDelete
  5. Have a look at Changing width of main column and sidebar

    If you are using the new template designer, they have provided sliders to pull to required width but for the template I tested the max overall width was 1000px. However, it is a no brainer way as you don't need to bother your head with calculations as all those done automatically for you.

    ReplyDelete
  6. thx Peter for the quick reply. But I don't know where to put this script. The title itself doesn't react on putting in the html script.
    regards
    Raymond

    ReplyDelete
  7. The problem is every template designer uses different terms to define the same thing so sometimes the instructions may work for one template but not another. However, have a look at these 2 posts from the same blog:
    Test Blogger in Draft: Amazon gift card banner and
    Test Blogger in Draft: test centering post title for commentator

    Do you see the post title of one is aligned left and the other one is centered.

    If you can't figure out how to do it, wait for me to update this post and/or make another new post.

    ReplyDelete
  8. The problem is of course me having no clue about html. When I go in to "view page source" it's like a big bowl of instructions.
    And I understand that every template designer works different. While I thought html was a universal language...
    In the blogspot-template that I use I can put html script in the text itself (the 'edit html' mode) but there is no such function for the title-bar.
    I can do the script as default for all titles, but not for each individual post.
    Therefore I will wait patiently for your update/new post.
    regards
    Raymond

    ReplyDelete
  9. Goede dag Meneer RayPlay. zie ik je uit (van?) Nederlands. Ik kan spreken een beetje Nederlands (eigenlijk Vlaams), maar niet met iemand gesproken in die taal voor 30 jaar, zodat het erg als ik het oefenen op je?

    ReplyDelete
  10. Nee hoor, ga je gang. Hoop dat het de begrijpelijkheid van de materie niet vermoeilijkt ;-)

    ReplyDelete
  11. hello friend i cant see ".posth3" in my code what should i do now!
    my blog is http://trickyinfo.blogspot.com
    please help me!

    ReplyDelete
  12. @ Shiva's
    find .post-home h2 in your html source and include text-align:center;
    between {}. you can see the preview I have done for you.
    http://img824.imageshack.us/img824/8955/centerposttitle.jpg

    ReplyDelete
  13. bloggertipsseotricks.com, what template are you referring to? I converted one blog to the new Blogger template Designer template and even expand widget template but cannot find .post-home

    Will appreciate response.

    ReplyDelete
  14. @Peter
    Neither I used old templates nor Design templates of Blogger so I don't have any idea what they choose class for post body heading because I am using own designed template for my blogger and in the shiva's template code I saw that the template use for post body that is ".post-home h2" for heading of post title in home page, You can see by going to source code of shiva's template, so "text-align:center;" must be in that class.

    Best Regards!
    Mohammad Shadab

    ReplyDelete
  15. I find this code in my blog and it work for me.

    h3.post-title {

    ReplyDelete
  16. Thanks saya. I have updated the post with your comment.

    ReplyDelete
  17. hi there.. thx for da info! my title aligned centre! tq..

    ReplyDelete
  18. GREAT! Thanks for the help. Im tweaking my blog here and there. Been loading my brain up all about html codes today. phew!

    ReplyDelete
  19. Thank you so so so much!!!!

    ReplyDelete
  20. really you are amazing, i was in big problem & i google it then i got your awesome blog :) thank you

    ReplyDelete
  21. i'm dumb today i guess cuase it's quite simple but this does not work pn this new blog i did
    http://moonchild-paris-fashion-collection.blogspot.com
    ???

    ReplyDelete
  22. Have a look at test centering post title and see me using a different method to center title using the deprecated tag <center>. If you need more help, ask again

    ReplyDelete
  23. Thanx for sharing this tutorial.. I've done it at all of my blogs...

    ReplyDelete
  24. Thank you for your simple, working tutorial. It worked great!
    Perhaps you know if we can customize the post title to look different in the main (home) page ? For example, the template I use looks better if I leave the post title in the left in home page and centered it in the post page..
    Thanks again!

    ReplyDelete
  25. hey dear
    i cannot see my blog post title.
    hop u can advise me to fix that
    thanks

    ReplyDelete
  26. Thank you so much, it worked! :)

    http://kisstherain-p.blogspot.com/

    ReplyDelete
  27. Wow, Thank you so much... it works for me...
    http://onlinecreatives.blogspot.com/
    Jon

    ReplyDelete
  28. OMG..so easy..thanks you dear...now my blog look better

    ReplyDelete
  29. Really very informative and the way you presented your information attracts visitors to read more informative blogs from your website. So I kindly look forward to see next updates.

    Carl Balog

    ReplyDelete
  30. I have this. HELP :)



    Blogger Template Style
    Name: Ethereal

    ReplyDelete
  31. Thank you very much for the help!

    ReplyDelete
  32. Hey, I have a problem. It doesn't work for me. Any changes with "h3..." makes nothing. My blog has post title centered as default but it's not "good centered" - image - http://i45.tinypic.com/244cw1k.jpg

    ReplyDelete
  33. Thanks for your post! Unfortunately this doesn't seem to work for me... I know my template is Awesome Inc. Would you know of any suggestions for me please? I'd be really grateful.

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics