Blogspot How To: Center Post Title in New Blogger Templates

In this tutorial, I'll explain how you can change the alignment (position) of the post title. By default, post title aligns to left but you can change it to center as well. Currently, Blogger (Blogspot) offers 6 default templates in the Template Designer. This tutorial will work on all those templates.

Just open the Template tab -> Edit HTML button.

Then find (Ctrl + f) the following code:
]]></b:skin>

and REPLACE it with the following one:
h3.post-title { text-align:center; }

]]></b:skin>

Click the PREVIEW button and you'll see that the post title is now centered. After that save your template and enjoy :)

Help BetaTemplates!


You can help betatemplates.com by adding a link anywhere on your blog. The link code is available from the bottom of this page.

Need Help? Please Read This First!
Thanks for visiting and liking this blog but, due to a large number of requests, I'm no linger accepting any cutomization requests. However, you can get premium support starting from $10. :)

67 comments so far... add yours

  1. Is there a way to apply this to an individual post; not to all of the posts.
    thx
    regards
    raymond

    ReplyDelete

  2. @ RayPlay, yes that can be done.

    ReplyDelete

  3. how, since the post title on my blog doesn't take any html

    ReplyDelete

  4. @ RayPlay, we can apply if-else condition in Blogger HTML. That can be done by going to Design -> Edit HTML.

    ReplyDelete

  5. When writing/posting a new blog and I want to centre the post title just for that one new blog. Then the edit HTML is only possible for the text in the post itself. It is not possible to write HTML in the post title. If I write HTML in the post title, the HTML text will be displayed as text in the post title.
    The Design -> Edit HTML applies to all the posts while I want it to be just for one post.
    PS: I am a HTML dodo, as you may have guessed by now.
    Thank you

    ReplyDelete

  6. hello,how about using worpress template ?
    plz..it doesn't work

    ReplyDelete

  7. @ Ummi Hanie, I don't have much experience with Wordpress so can't help you, sorry :(

    ReplyDelete

  8. @ RayPlay, I guess you want to center the title of the first post of your blog maybe to highlight it, I can do that for you. Go to Edit HTML and click Download Full Template to download your template file. Then send it to me through mail.

    ReplyDelete

  9. thnks fr this tutorial! its work! :)

    ReplyDelete

  10. thnx! it's work! :)

    ReplyDelete

  11. I have the simple template.
    I want to affect only the comments part of this:

    h3.post-title, .comments h4

    But I can't seem to separate it from the post-title part. What I want is to have

    display:none;

    for the .comments h4, but not for the h3.post-title part.

    Can't figure it out.

    ReplyDelete

  12. Actually, I just figured it out, with a little help from this page. I made a test blog that uses a different kind of template where .comment h4 is already separated from h3.post-title. I thought separating them was more complicated than it is. I thought I had to write a whole new variable paragraph just for .comments h4. I see I was wrong.

    Thank you for your help!

    ReplyDelete

  13. @ Traeh, you'll find this code:

    h3.post-title, .comments h4 {
    font: $(post.title.font);
    margin: .75em 0 0;
    }

    to add 'display: none;' only to the comments heading, simply REPLACE the above code with the following code:

    h3.post-title {
    font: $(post.title.font);
    margin: .75em 0 0;
    }

    .comments h4 {
    display: none;
    }

    ReplyDelete

  14. added the simple template code to center the title, didn't work. Any advice?

    ReplyDelete

  15. @ C.L. Rogers, just checked the tutorial again and it's working perfectly for 'Simple' template, don't know why it's not working for you!

    ReplyDelete

  16. Hey! I'm using Simple template...this is what pulls up when I search for h3.post:





    ...can't figure out where to put the "align text center" thing!! Please help!

    www.thestewartestate.blogspot.com

    ReplyDelete

  17. Hello!
    I don't see why my question has not published here yet. Any way, I ask my question again.
    With the help of this site, I was able to center my post titles, but the problem is that they are not clickable any more; or oddly partially clickable.
    What is wrong with it?
    Thanks
    Minoudad

    ReplyDelete

  18. @ Minoudad, sorry bro I don't check the comments very often. Anyways, I've seen your blog and I've clicked a couple of posts and they're working correctly.

    ReplyDelete

  19. Hello,

    My code looks like this.




    What code to add and where to enter post the title?

    Please help.

    Thanks.

    ReplyDelete

  20. Hi Bilal!
    Do you know how I can align the header and description text instead of the post title texts? I added an image to my Header (behind text and description) and my header and description texts and the picture is clashing and i would like to move the header and description text to the right/centre. Is this possible? Appreciate your help!! Thanks

    ReplyDelete

  24. Hi Bilal!
    Im wondering if u can help. I want to align my posts in the centre of my blog but Im using the old blogger template as none of the new ones are as simple as I want it!! I just need to make my posts sit in the middle of the page!!

    Many thanks...
    Luke
    www.evm128.blogspot.com

    ReplyDelete

  25. @ luke, download and email me your template file.

    levisinside0@gmail.com

    ReplyDelete

  26. thanks!!! but now how to i change the DATE ALIGNment, it looks off

    ReplyDelete
    Replies

    1. Hi there, I've noted down your request and will soon write a tutorial to do that. Please support this blog by linking back to it. Link code is available in the footer :)

      Delete

  28. it worked... thanks a million. xoxo

    ReplyDelete

  30. Thank you for the simple instructions. Worked great! I am also wondering how to change the date alignment. Any tutorial for that yet? In the mean time I have changed the title back to the left. Thanks!!

    ReplyDelete
    Replies

    1. Hi The Elephant of Surprise, I'll surely write that tutorial soon.

      Delete
  31. Replies

    1. Hi iMinnie, What is your blog address and what template are you using?

      Delete

  32. THANK YOU SO MUCH! Your a lifesaver!

    ReplyDelete
    Replies

    1. Hi Rebecca, thanks for the kind words. Please add a link back to this blog.

      Delete

  33. Hi, thanks! Have you done a tutorial for a date alignment yet? That would be really helpful thanks!

    ReplyDelete
    Replies

    1. Hi Soph, for date alignment, replace:

      ]]></b:skin>

      with:

      h2.date-header { text-align:center; }

      ]]></b:skin>


      Now, the date will be aligned to center. To align it to right, replace center with right.

      Delete

  34. You are awesome!!! Thanks so much!!!!

    ReplyDelete

  35. Thank~u so much for this post... all I need now is to figure out how to move the 'posted by' section to the middle :)

    ReplyDelete

  36. I managed to figure it out for the footer too... definitely not brain science on my behalf but pretty happy with myself! :)

    .post-footer {text-align: center!important;
    }

    ReplyDelete

  37. Hi!

    I tried to do this and other codes that I found on Internet to add to CSS and nothing works to center the title and the pages section that is under the title. Both are on the left. Please, help!!!

    ReplyDelete

  38. Hi,

    I tried to do this and other code options that I found on the Internet but, nothing works... I need to center the title and the section of Pages that is under the title. Both are on the left side. Please, help!!!

    ReplyDelete
    Replies

    1. Hi Veronica, I've checked your blog. Codes mentioned in this tutorial are not there. Anyway, find the following code in your blog HTML:

      h3.post-title, .comments h4 {
      font: normal bold 20px Yanone Kaffeesatz;
      margin: .75em 0 0;
      }

      and place the following code AFTER the previous code:


      h3.post-title { text-align:center; }


      The result would look like this:

      h3.post-title, .comments h4 {
      font: normal bold 20px Yanone Kaffeesatz;
      margin: .75em 0 0;
      }
      h3.post-title { text-align:center; }


      Please preview your template and you should see the post titles centered instead of left. After that, you can save your template.

      Delete

  41. This was so quick and easy to do, been trying to figure it out for ages! Thank you!

    ReplyDelete

  43. I'm not able to make it work on my test blog.. will keep trying.

    ReplyDelete
    Replies

    1. Hi Judy, what is the address of your test blog?

      Delete

  44. It didn't work for me. I wonder if it's because I use a larger type and fancier font for my post titles? I can't think why else it won't work.

    ReplyDelete
    Replies

    1. Hi Lorraine, I'm no longer accepting any new requests. However, you can get premium support starting from $10.

      Delete

  45. I want to use a photo for my title and want to center it at the top of my page, I tried what you have posted here, but it does not work, what can I do? thanks

    ReplyDelete
    Replies

    1. Hi Joy, in the Layout tab, when you edit the header widget, it gives you an option to replace your title with an image or use an image with your title. Maybe that will help you.

      Delete

  46. i've used an image for my blog title. how do i center it? thanks!

    ReplyDelete

  47. Thank you so much! This is the best and most professional tutorial I could find.

    ReplyDelete

  48. Tnank you so much! I have done!

    ReplyDelete
  50. Replies

    1. Hi there, you can hire me to solve this problem.

      levisinside0@gmail.com

      Delete

  52. Thankyou so easy,worked a treat.

    ReplyDelete

  53. oh thank you thanks you it works!!!

    ReplyDelete

  55. How do you wrap the post title around your image in the summary to be included with the short summary about the blog post? Instead of on top of it.

    Thank yoU!

    ReplyDelete
    Replies

    1. Hi Angel, your question went over my head :( Can you please explain or email me if you want a specific customization.

      Delete

Subscribe to: Post Comments (Atom)