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 highlighted code and add extra 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="#ff0000"/>
     <Variable name="post.title.color" description="Color on Post Page" type="color" default="#ff00ff" value="#000000"/>
   </Group>

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>

3. 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.

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

5. Lastly, click Apply to Blog.

6 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

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