How To Change And Hower The Colour Of Post Title In Blogger

How To Change And Hower The Colour Of Post Title In 

Blogger

Hello all out there,

We learned previously about changing the fonts of Post title and later about customization about Blogger Template and Layout. One of our newbie Blogger friends asked me about changing the Post Title Color.

He said that he followed our post in which we have shown the process about customizing the template, but unable to find the option for solving his query.

Well, the answer is new Blogger Template Designer has no option for changing the color of Blog posts title, it is required to be added some CSS Codes in the template to make it possible.


Finally he got his query solved but what about others who have the same question!! Thence, we have decided to publish the method here for rectifying it within five minutes.

So dear friends, do you want to get it for Your Blog posts title too? Come let's find the output of this tutorial first.

Output of this Tutorial

• Link color: You can change the post title color if it is in the link form.

• Hover Color: You can bring hover effect with this, whenever people will move the mouse to the blog post title it will get changed.

• Post Color; if your blog post title is not in link form, it can be used instead.

========================================================================

"This tutorial is recommended for those bloggers who have been using the Blogger default template for their blog. If they are using the third Party Template they may find the difficulty as they have predefined definitions for color codes".

=========================================================================

So, here we go..

Tutorial:

First take a backup of your blog template

1. Go to Blogger Dashboard > Template > Edit HTML

2. Find the "Variable definitions" by pressing CTRL+F

3. Copy the following code and paste just below it, as shown in the picture

<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. Search for ]]></b:skin>

5. Copy below code and paste just above it as directed in the picture

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

6. Click on Save Template 

7. Go to Blogger dashboard > Template > Customize

8. Click on Advanced > Post Title Colour

9. Now, pick any color for the post title and hover effect from the given options

Note: you can see the demo just below the “Blogger Template Designer” where your blog appears for changing effects. But to see the hover result, it will require to be saved. 

10. After making changes, click on “Apply to Blog” button in top right corner

Now, guess what will be the next step!! Oh come on, it's time to “View Blog” :)

so, did you do that! Yeah…. celebration for successfully done :)

More to Say 

Blog post title color should differ from Blog Template color, it will help in getting more visibility on your blog posts. If you're finding this tutorial useful, please comment below even in negative cases. However, we publish all posts after getting positive experiences, but you can ask for assistance in any difficulty. We are always ready to try our level best. We would really appreciate your feedback buddies. 

Thanks and have a great day ahead!