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

Blogger post title is the main attraction to divert attention of readers. By modifying the post title font, size and color we can bring some variation. Beside of this when visitors first land on a blog then first s/he look into all 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 color. 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. 

By default in blogger template we use different Headline, sub-headline, minor headline etc. And Blogger denote 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 use h3 tag for 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 kinds 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 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 exact 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 Customizeoption at the backend of the template. Please go through the below steps-

Step #1: Sign in to your blogger account and go to 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 template 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 color:#000000 code with different color code for displaying in post page.
• For changing the font alter 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif with different font. Remember first font with quote represent 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 color: #0872AF code for visited link color code.
• Alter color:#222222 for changing font hover color.

You can get the color code from our Color Picker

Readmore: Add or change Blogger Template's font by Custom Google Font

Hope you have successfully modified your blog post tile with new font, size and color. If you have any query then feel free to write me. Thanks.