How To Change Post Title Color in Blogger Template Designer Templates 2016

Change Post Title Color in Blogger Template Designer Templates

Many People have problem with changing post title color in blogger. Some of the blogger template have this option to change post title color, but few don't have any option for the users to change post title color in blogger template. changing post title color is not that much difficult task as you might be thinking about it. You just need to embed just some lines of code in to your Template Designer Templates. Here is basic step by step guide that will help you to change post title color in blogger or blogspot. We need to make some simple changes in template CSS then later you will be able to change color without any change in code

How to change Post title Color in Blogger Template Video Tutorial 100% Working- Engineer's Community Guide

Note: Don't Forget to backup your template before making any kind of change in template Code.

Beginner have very common problems with editing blogger template according to their interests. In Edit HTML(Given below at Step#02) you can Add "Read More" Button to your Blogger posts to make your home page more versatile. That looks pretty and beautiful, with the help of this trick you can show more and more posts on the same Home Page without scrollling.
You can also Download Blogger Templates, to make your blogger more beautiful.




Steps to Make Post Title Font Customization in the Blogger Template Designer Templates.


1. Open your Blogger.com and Click Arrow sign like in picture and goto Template section.

Change Post Title Color in Blogger Template Designer Templates

2. Now Click the Edit HTML button as shown below.

Change Post Title Color in Blogger Template Designer Templates

3. Here you'll see below given page with a LOT of lines of code.Click at the start of your code Press "CTRL+F" and Search for:
 
Don't worry, just expand <b:skin>... </b:skin>.

Change Post Title Color in Blogger Template Designer Templates

4. After making expanding to the code in previous step, scroll down a little and you'll see the code Like this:

/* 

Variable definitions

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

Change Post Title Color in Blogger Template Designer Templates

5. Now just paste the code given below under this tag

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

Don't Click save or preview your template yet. Now Proceed to the next step.


6. Now find this code:

]]></b:skin>

and REPLACE it with the following one:

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>

7. Finally you are done with code. Click the Preview button. And you'll observe the  post title color as Pink. Don't worry you can make changes to it later in Blogger Template Designer. Save your template and click  Close button.

Hurray, Your Coding Done! Go to  & Customize the Post Title in "Template Designer!"
Click the Customize button to open the Blogger Template Designer. Click Advanced from the left options. You'll see Post Title Color options at the top.:

Change Post Title Color in Blogger Template Designer Templates

There are three basic options for the users that are mentioned below: 
Link Color: shows the color of  post title as a link. If you make any changes here that will be shown in template Designer.

Link Hover Color: This color will be applied to the text if someone move his/her mouse cursor over the post title.

Color on Post Page: This color will be shown when the post is opened in detailed level. Like if user click read more button the the full post will be displayed to the user.


This post is Published by: Muhammad Rashid Abbas
Contact: +923007397558
Email: rashidabbas7864@gmail.com
          rashid_pk786@hotmail.com

Muhammad Rashid Abbas