Blogspot How To: Change Post Title Color in Blogger Template Designer Templates

Posted by Bilal

I have received a lot of comments on a previous post. Readers are asking how to change the post title color in the new BloggerTemplate Designer templates. Well, here is a very simple step by step tutorial for you.We'll make some changes in the template CSS and then you'll be able to customize post title without any coding stuff.

Warning: Before making any changes, you must backup your existing layout:

Blogspot How to: Backup Your Blogger (Blogspot) Template

Steps to Make Post Title Font Customizable in the Blogger Template Designer Templates.

1. Open the Template section.

2. Click the Edit HTML button.

3. You'll see following page with a LOT of code. Don't worry, just expand <b:skin>...</b:skin>.

4. After expanding the code in previous step, scroll down a bit and you'll see this code:
   

   /* Variable definitions
      ====================


5. REPLACE the above code with the following one:
   

   /* Variable definitions
      ====================
   
      <Group description="Post Title Color" selector="h3.post-title">
        <Variable name="post.title.link.color" description="Link Color" type="color" default="#ff0000" value="#ff0000"/>
        <Variable name="post.title.hover.color" description="Link Hover Color" type="color" default="#0000ff" value="#00ffff"/>
        <Variable name="post.title.color" description="Color on Post Page" type="color" default="#ff00ff" value="#ff00ff"/>
      </Group>

   
   Don't save or preview your template yet. Proceed to the next step.
6. Now find this code:
   

   ]]></b:skin>

   and REPLACE it with the following one:
   

   h3.post-title { color:$(post.title.color); }
   h3.post-title a, h3.post-title a:visited { color:$(post.title.link.color); }
   h3.post-title a:hover { color:$(post.title.hover.color); }
   
   ]]></b:skin>

7. Click the Preview button. You'll see the post title color as blue. Don't worry you can change it later in Blogger Template Designer. Save your template and click the Close button.

Hurray, Coding Done! Go & Customize the Post Title in Template Designer!

Simply click the Customize tab to open the Blogger Template Designer. Select Advanced from the left options. You'll see Post Title Color at the top.:

There are 3 options in the Post Title Color. Here is their detail:Link Color: This is the color of the post title as a link. Any change to this option will appear in the Template Designer. Link Hover Color: This color will appear when someone brings mouse over the post title. Any change to this option will not be visible in the Template Designer. You'd have to Apply the change, open the blog and bring your mouse over the post title to see the change in color. Color on Post Page: This is the color of the post title on post page when post title is not a link. Again, you'd have to Apply the change and open some post title page to see the affect.