Blogspot How To: Center Post Title in New Blogger Templates

In this tutorial, I'll tell you how you can change the alignment (position) of the post title. You can align it to center or right. Currently, Blogger offers 6 different templates in the Template Designer so I'll explain this tutorial according to each of the templates.

1- Change Post Title Alignment in 'Simple' Blogger Template

If you're using the Simple Blogger Template then you need to go to Design -> Edit HTML.

Then find (Ctrl + f) the following code:

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

Add text-align:center; to center the title or text-align:right; to move the title right. I'm adding text-align:center; in the code and after that the code will look something like this:

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

2- Change Post Title Alignment in 'Picture Window' Blogger Template

If you're using the Picture Window Blogger Template then you need to go to Design > Edit HTML.

Then find (Ctrl + f) the following code:

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

Add text-align:center; to center the title or text-align:right; to move the title right. I'm adding text-align:center; in the code and after that the code will look something like this:

h3.post-title {
  margin: 0;
  font: $(post.title.font);
  text-align:center;
}

3- Change Post Title Alignment in 'Awesome Inc' Blogger Template

If you're using the Awesome Inc Blogger Template then you need to go to Design > Edit HTML.


Then find (Ctrl + f) the following code:

h3.post-title, h4 {
  font: $(post.title.font);
  color: $(post.title.text.color);
}

Add text-align:center; to center the title or text-align:right; to move the title right. I'm adding text-align:center; in the code and after that the code will look something like this:

h3.post-title, h4 {
  font: $(post.title.font);
  color: $(post.title.text.color);
  text-align:center;
}

4- Change Post Title Alignment in 'Watermark' Blogger Template

If you're using the Watermark Blogger Template then you need to go to Design > Edit HTML.

Then find (Ctrl + f) the following code:

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

Add text-align:center; to center the title or text-align:right; to move the title right. I'm adding text-align:center; in the code and after that the code will look something like this:

h3.post-title {
  font: $(post.title.font);
  margin: 0;
  text-align:center;
}

5- Change Post Title Alignment in 'Ethereal' Blogger Template

If you're using the Ethereal Blogger Template then you need to go to Design > Edit HTML.

Then find (Ctrl + f) the following code:

h3.post-title, h4 {
  font: $(post.title.font);
  color: $(post.title.text.color);
}

Add text-align:center; to center the title or text-align:right; to move the title right. I'm adding text-align:center; in the code and after that the code will look something like this:

h3.post-title, h4 {
  font: $(post.title.font);
  color: $(post.title.text.color);
  text-align:center;
}

6- Change Post Title Alignment in 'Travel' Blogger Template

If you're using the Travel Blogger Template then you need to go to Design > Edit HTML.

Then find (Ctrl + f) the following code:

h3.post-title {
  margin-top: 20px;
}

Add text-align:center; to center the title or text-align:right; to move the title right. I'm adding text-align:center; in the code and after that the code will look something like this:

h3.post-title {
  margin-top: 20px;
  text-align:center;
}

Final Words

I've tried to explain the post title positioning according to 6 templates offered in the Template Designer. If you've have any problem or you're using some older template, feel free to leave a comment :)