How to Change Post Title Font, Size and Color in Blogger Theme?

How to change post font in blogger template? Change the font size of the Blogger Post Title. How to Change the Font in a Blogger Header. Change size of font in Blog post Title and body sections. How can i change font size in post title? Learn to modify Post Title Font, Size and Color from custom Blogger template.

data:blog.title
Blogger post title is the main attraction to divert the attention of readers. By modifying the post title font, size and colour we can bring some variation. Beside of this when visitors first land on a blog then first they look into the post title and after that, if found interesting then they enter into the post for reading.

However, in this tutorial, we will learn how we can change our blogger theme's post title font, size and colour. But this tutorial for custom blogger template users only. 

We will use a CSS script that will help you to play with your post title. 

how to change font on blogger posts

By default in blogger template, we use different Headline, sub-headline, minor headline etc. And Blogger denotes this headline by h1, h2, h3, h4, h5, h6 tag. 

The priority of headline sets higher to lower. Suppose h1 = Header 1. Generally used to at the Blog title. And almost all template including blogger default template uses h3 tag for the post title. So our code for post title start with .post h3 and here .post means blog post and h3 tag means header3.

Removing The Older Code of Post Title

Every template must have the code start with .post h3 so you have to find this kind of code. After that simply delete those code block. Before proceeding take a backup of your template first and then follow the below steps-

Step #1: Sign in to your blogger account and go to the blogger dashboard

Step #2: On Blogger Dashboard Click ->Theme -> Edit HTML

Step #3: Scroll down and find the code like below. Code won't be exactly like below but find similarity
 
.post-title, .post h3{
...................................................................
...................................................................
...................................................................
}
.post h3 a, .post h3 a:visited, .post h3 strong {
...................................................................
...................................................................
...................................................................
}
.post h3 strong, .post h3 a:hover {
......................................................
.....................................................
 }
Step #4: Now simply delete the code block.

Adding Post Tile code for Changing Post Title Font, Size and Color

After successfully removing the code block you have to add the new code for tweaking the Post title Font, Size and Color. I didn't define any variable here so it will work easily but you won't be able to change it from template Customize option at the backend of the template. Please go through the below steps-

Step #1: Sign in to your blogger account and go to the blogger dashboard

Step #2: On Blogger Dashboard Click ->Theme -> Edit HTML

Step #3: Now find the </b:skin> by pressing Ctrl+F 

Step #4: Paste the below code above </b:skin> and hit the Save button.
 
.post-title, .post h3{
line-height: 26px;
color:#000000;
font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;font-size:140%;font-weight:700;
text-transform: uppercase;margin-bottom:10px;
padding-bottom:5px
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display: block;
text-decoration: none;
color: #0872AF;
font-weight: normal
}
.post h3 strong, .post h3 a:hover {
color:#222222;
}

Customization

  • Change colour:#000000 code with different colour code for displaying in post page.
  • For changing the font alter 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif with different font. Remember the first font with quote represents the main font. Here 'Trebuchet MS' but you can replace it with 'Sans-serif'.
  • Alter font-size:140% with 120% or 150% or 160% for decreasing or increasing font size on home page.
  • Alter font-weight:700 this will change the font boldness. You can change 700 with 400 or 500 or 900.
  • Remove text-transform: uppercase; code line if you don't like all the uppercase font. You post title will display with lowercase.
  • Change colour: #0872AF code for visited link colour code.
  • Alter colour:#222222 for changing font hover colour.
You can get the colour code from our 


Hope you have successfully modified your blog post title with a new font, size and colour. If you have any query then feel free to write to me. Thanks.
Tante Waileka says: 1/29/2016

I think you did a very good job with this helpful post. I'm a programmer who also writes & and content-edits information-technology related books and articles. Of course your grammar isn't 'the best' but hey I can't speak a word of farsi or hindi and can only say hou bu hou in Mandarin, so I'm not 'criticizing' you. Over the years I've thought about doing some blogger help pages, but people like YOU have always done it before I think of it, which actually is quite pleasing, because it proves "great minds think alike", ha ha. Blessings to you and yours. Keep up your very thoughtful posts.

BloggerSpice says: ADMIN 1/29/2016

Thanks Geekiest Women for valuable feedback. I just surprised that you have written long comment without SPAM. I love to read it. |o|

Unknown says: 8/29/2016

hi after changing the color code #00000 it it didnt work.still remained blue
any help?

BloggerSpice says: ADMIN 8/29/2016

Hi Apple Media,
I think you have missed the Semi-colon. Just add color code like below with Semi-colon. It will work now.

#000000;

Unknown says: 9/20/2018

Hi there! The smaller font under each word tells the actual name of the font. The "sparkling" one is called Sweet Pea font and the link is: http://www.dafont.com/sweet-pea.font
The clickable links to all of them are right under the image!
Thanks!

Bill Curry says: 11/07/2018

Hi Fazie! Can you tell me how to split a blogger post title into two lines? Thanks!

byodbuzz05 says: 11/22/2018

Hi there! The smaller font under each word tells the actual name of the font. The "sparkling" one is called Sweet Pea font and the link is: http://www.dafont.com/sweet-pea.font
The clickable links to all of them are right under the image!
Thanks!

Contact Form

Name

Email *

Message *