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-Blogspot Template Designer Templates
Steps to Change Post Title Color in Picture Window Template
- Open the Template section.
- Click the Edit HTML button.
- A new window will open. You'd have to click the Proceed button to start editing.
- Find 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"/>
</Group>
Tip: You can press 'Ctrl + f' keys or simply scroll down the HTML a bit to find the code.
- 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);
}
- Click Save template and then Close button.
- 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!
I was unable to change the color or post title using the EDIT HTML and suggested changes in coding...following is response I got when I tried to save template...We were unable to save your template
ReplyDelete"Please correct the error below, and submit your template again.
Invalid variable declaration in page skin: Variable is used but not defined. Input: post.background.color"... pls advise
thanks
ReplyDeleteGenius! Thank you so much, I don't understand HTML, but this was so easy to follow and now I have the title color I want. Thanks again.
ReplyDeleteHi~ I have a small but complicated problem. I don't know if my english is good enough or not for you to understand. Anyway, the problem is this. I can change my post text color. But I cannot add color on it. For example, the default is brown. Then I want to make some words in my blog post to red, so when I typed it I make it red. But when it is posted in my blog, is still brown. Any idea how to solve? Big thanks!
ReplyDeletethx for the great info...i love this tutorial.i will try it
ReplyDeletethanks, this is a good read
ReplyDeleteThanks a lot!
ReplyDeleteThat was such a great help, much appreciated!!
ReplyDeleteThanks A Lot, It was very helpful and well explained
ReplyDelete