Pages

Change Post Title Color in Blogger Template

Warning: Before making any changes to template CSS, it is a good practice to backup your existing template:
Backup Blogger Template
You can tweak most of your template setting in template designer, with some limitations. Post title is one of the limitations. Many of you may have noticed that there is no option to manipulate your post title. Wondering how to make this option available? Then you should read through this tutorial.

In this tutorial, we will customize post title color by applying the template editor feature in blogger. Before that, there are some changes need to be made in the template CSS. Here I will walk you through with simple steps to change your post title in blogger.

Edit HTML

1. Click Template > Edit HTML > Proceed.

2. Ctrl + F to find this code:
/* Variable definitions
   ====================

3. Replace with the following code:
/* 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>

4. Ctrl + F to find this code:
]]></b:skin>

5. Replace with the following code:
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>

6. Click Save template, and then click Customize. Blog preview is shown below, with the post title color as blue. Any changes in the template will appear in blog preview.

7. Click Advanced > Post Title Color. Here is the detail of 3 options:

Link Color: This is the color of the post title when post title is a link.

Link Hover Color: This is the color of the post title when post title is hovered by mouse.

Color on Post Page: This is the color of the post title on post page when post title is not a link.

8. Lastly, click Apply to Blog.

7 comments:

  1. Thank you, this was very helpful for me. I almost had everything correct except I was declaring two separate variables with the same description. Your tutorial helped me see where I went wrong.

    ReplyDelete
  2. i am searching this for a long time finally i got it check this http://www.leadsquote.com/

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Exactly what I was looking for and so easy to follow. Thank you!!

    ReplyDelete
  5. Added it well, All codes are in place. i also saw the new area in template designer but its not getting reflected on my blog.

    ReplyDelete

© 2012 | All rights reserved | Design by Blogger Template Tutorials