Blogspot Tutorial: Change Post Title Color in Blogger Template Designer

 

 

Sent to you by Artist44 via Google Reader:

 

 

Blogspot Tutorial: Change Post Title Color in Blogger Template Designer

via Beta Templates by Bilal on 6/30/10

I have received some comments on a previous post. Readers are asking how to change the post title color in the Blogger Template Designer. Well, here is a very simple solution for you through which you'll be able to edit the post title color right in the Template Designer.

1- Find and Change the Default CSS Code

Go to Design then Edit HTML tab. Find the following code:

<Group description="Post Title" selector=".post">
<Variable name="post.title.font" description="Font" type="font"
default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
</Group>

After that, add the following code in it:

<Variable name="post.title.color" description="Color" type="color" default="#FE6602" value="#FE6602"/>
<Variable name="post.title.hover.color" description="Hover Color" type="color" default="#FFD25F" value="#FFD25F"/>

Overall, the code should look something like this:

<Group description="Post Title" selector=".post">
<Variable name="post.title.font" description="Font" type="font"
default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="post.title.color" description="Color" type="color" default="#FE6602" value="#FE6602"/>
<Variable name="post.title.hover.color" description="Hover Color" type="color" default="#FFD25F" value="#FFD25F"/>
</Group>

Now, we have changed the default code so save your template and move on to the next step.

2- Add New CSS Code for Post Title Color

Now, we need to add some CSS code to stylize the post title. So find this code:

.post {
margin: 0 0 25px 0;
}

After that, add the following code below the above code:

.post h3 a, .post h3 a:visited { color: $(post.title.color); }
.post h3 a:hover { color: $(post.title.hover.color); }

Overall, the code should look something like this:

.post {
margin: 0 0 25px 0;
}

.post h3 a, .post h3 a:visited { color: $(post.title.color); }
.post h3 a:hover { color: $(post.title.hover.color); }

The coding work is finished, save your template and move on.

3- Change the Post Title Color in Template Designer

Simply open the Template Designer tab and select Advanced from the left options. Find Post Title and you'll see this (click to see full size):


You'll see Color and Hover Color there. By changing the Color, you'll be changing the color of the post title in normal state and it will also be available in Preview mode. However, Hover Color will change the post title color when mouse comes over it. You can't see the change in Hover Color in Preview mode. You have to save your template, open it and bring your cursor over the post title to see hover color effect.

 

 

Things you can do from here:

• Subscribe to Beta Templates using Google Reader
• Get started using Google Reader to easily keep up with all your favorite sites