By default, there is no option to change post title color in Blogger Designer Templates. I've already written a tutorial to do that but users of Picture Window template are having problems. Here is a tutorial to change post title color in Picture Window template.
Note: If you're using other templates then see this tutorial:
Blogspot How To: Change Post Title Color in Blogger Template Designer Templates
Steps to Change Post Title Color in Picture Window Template
- Go to 'Design' then 'Edit HTML' tab.
- Find the following code:
You can press 'Ctrl + f' keys or simply scroll down the HTML a bit to find the code.<Group description="Post Title" selector="h3.post-title, .comments h4">
<Variable name="post.title.font" description="Title Font" type="font"
default="normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
</Group> - Replace the previous code with the following code:
<Group description="Post Title" selector="h3.post-title, .comments h4">
<Variable name="post.title.font" description="Title Font" type="font"
default="normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="post.title.color" description="Color" type="color" default="#FE6602" value="#FE6602"/>
<Variable name="post.title.hover.color" description="Hover Color" type="color" default="#FFD25F" value="#FFD25F"/>
</Group> - Now find this code:
h3.post-title {
margin: 0;
font: $(post.title.font);
} - Replace the above code with this code:
h3.post-title {
margin: 0;
font: $(post.title.font);
color: $(post.title.color);
}
h3.post-title a {
color: $(post.title.color);
}
h3.post-title a:hover {
color: $(post.title.hover.color);
} - Save your template.
- Now go to 'Template Designer' then 'Advanced' and edit the 'Post Title' option.
- You can simply edit the post color and post hover color from here.
- Enjoy!
