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.

27 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
  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

LinkWithin

Related Posts Plugin for WordPress, Blogger...