Pages

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.

79 comments:

  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
    Replies
    1. I don't know anything about codes or scripts or css or html, I just want some of my post titles to be centered. How do I apply that if-else condition? What do I have to replace and where? Thanks

      Delete
    2. Hi Edwar,

      That is quite complex. Email me for details.

      Regards,
      Bilal

      Delete
  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
  21. 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
  22. @ luke, download and email me your template file.

    levisinside0@gmail.com

    ReplyDelete
  23. 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
  24. it worked... thanks a million. xoxo

    ReplyDelete
  25. 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
  26. Replies
    1. Hi iMinnie, What is your blog address and what template are you using?

      Delete
  27. 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
  28. 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
  29. You are awesome!!! Thanks so much!!!!

    ReplyDelete
  30. 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
  31. 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
  32. 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
  33. 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
  34. This was so quick and easy to do, been trying to figure it out for ages! Thank you!

    ReplyDelete
  35. 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
  36. 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
  37. 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
  38. i've used an image for my blog title. how do i center it? thanks!

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

    ReplyDelete
  40. Tnank you so much! I have done!

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

      levisinside0@gmail.com

      Delete
  42. Thankyou so easy,worked a treat.

    ReplyDelete
  43. oh thank you thanks you it works!!!

    ReplyDelete
  44. 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
  45. I just added it to "Add CSS" under template designer - advanced and it worked like a charm! Thanks for posting this!

    ReplyDelete
  46. Replies
    1. Hi Tania, kindly link back to this blog.

      Cheers,
      Bilal

      Delete
  47. I'm so happy! Finally it is in the middle! Thank you so so much!

    ReplyDelete
  48. Thanks for the post Bilal! Unfortunately I can't find this code in my HTML editor... My template is called 'Awesome Inc'. Could you please offer any suggestions?

    ReplyDelete
    Replies
    1. Hi Zuber, please email me your template file. I'll have a look at it.

      levisinside0@gmail.com

      Regards,
      Bilal

      Delete
    2. Hi Bilal!

      Thank you so much for your offer. I've managed to fix, but I still highly appreciate it!

      Regards,
      -Zuber

      Delete