Change The Color of Post Title in Blogger Template

Advertisement Here

Customize the blog 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 are simple steps to change your post title in blogger or blogger templates

But Warning: Before making any changes to template CSS, it is a good practice to backup your existing template:

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>
 
And find the code  ]]></b:skin> .     then copy below code and paste just above it.

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.