Tuesday 12 June 2012

How to change the post title color in the new Blogger







 Readers are asking how to change the post title color in the new Blogger Template Designer templates. Well, here is a very simple step by step tutorial for you.We'll make some changes in the template CSS and then you'll be able to customize post title without any coding stuff.
Warning: Before making any changes, you must backup your existing layout:
Blogspot How to: Backup Your Blogger/Blogspot Template


Note: If you're using 'Picture Window' template, then see this tutorial:
How To Change Post Title Color in Picture Window Template


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



  1. Go to Design then Edit HTML tab.
  2. 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>
  3. Replace the above code with 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"/>
    <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>
  4. Now find this code:
    .post {
    margin: 0 0 25px 0;
    }
  5. Replace the previous code with the following code:
    .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); }
  6. The coding work is finished, save your template and move on to the next step.


Coding Done!         Go & Customize the Post Title in Template Designer!

Simply open the Template Designer tab and select Advanced from the left options. Find Post Title and you'll see this, 



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.


1 comment:

  1. It's fantastic that you are getting ideas from this paragraph as well as from our discussion made here.

    my weblog may quay phim

    ReplyDelete