How To Change Post Title Color in Picture Window Blogspot Template

How To Change Post Title Color in Picture Window Blogspot Template

How To Change Post Title Color in Picture Window Blogspot Template

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

1. Open the Template section.

2. Click the Edit HTML button.

3. A new window will open. You'd have to click the Proceed button to start editing.

4. 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.
   
   
5. 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>

6. Now find this code:
   

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

7. 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);
   }

8. Click Save template and then Close button.

9. Now go to Template Designer then Advanced and edit the Post Title option.
   
   
   
   
   
10. You can simply edit the post color and post hover color from here.
11. Enjoy!