.
Back to Top

1 How To Customize Post Title Color using Template Designer in Blogger?

In Blogger, we often face difficulties about font adjustment and their colors, but now it is easily possible with added html codes in template designer. Once it is done, you can adjust post's titles color and size as per your site's look and get the preview easily.

This tutorial will guide you to edit Blogger's Template Designer using HTML code to further modify post title colors.

Note: Always backup your existing blog settings to ensure your data safety.

Go to Template > Click Edit HTML 


Blogger Template Edit HTML

Hit Ctrl+F while standing inside the codes area. (Keep your mouse pointer inside codes)

Type <b:skin> in search bar and note below code lines. Click left side arrow to expand the codes.

Scroll down for some steps and you will see following code lines.

/* Veriable definitions


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


<b:skin> tag in code lines

Replace this code with following lines.

/* 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>


Variable definitions

Just go further > hit Ctrl+F.
Find ]]></b:skin>
Replace this code with following lines.

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>

Save and See the preview. You will see blue color font. You can change color and font sizes the way you like in Template Designer.

Go to Template Designer in Customize tab in Blogger. Select Advanced and get Post Title Color tab.

There are three options available. Color on Post Page, Link Color and Link Hover Color. change all of them to suit your blog. Anything you change in template designer will be displayed right below the bottom preview of the Blog.
Related Posts Plugin for WordPress, Blogger...

Zergnet