5 Feb 2011

Blogspot How To: Change Post Title Color in Blogger Template Designer Templates

Blogspot How To: Change Post Title Color in Blogger Template Designer Templates


I have received a lot of comments on a previous post. 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.

Hurray, 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 (click to see full size):

Blogger Template Designer - Advanced - Post Title
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.

Having Problems?


Please follow the tutorial carefully. If you have a problem, mail me your template file along with detailed explanation of the problem:

joni.pranata@gmail.com
Description: Blogspot How To: Change Post Title Color in Blogger Template Designer Templates Rating: 4.5 Reviewer: Unknown - ItemReviewed: Blogspot How To: Change Post Title Color in Blogger Template Designer Templates Hot News!!! "Sepeda Motor Injeksi Irit Harga Terbaik Cuma Honda"
Share on :

0 komentar :

Posting Komentar

Mau tukeran link? silakan buka Link sahabat dan apabila ada pertanyaan silakan tulis di Kotak Pertanyaan. Terima Kasih...

Kami akan menghapus komentar yang: Tak sopan, memakai HURUF BESAR, berupa caci maki, mengandung kata-kata kebun binatang, debat kusir, provokasi, di luar konteks, berupa undangan/ reklame. Komentar yang terlalu panjang, tanpa paragraf dan sulit dipahami. Komentar copy-paste, silakan di-link saja.

Isi komentar adalah tanggung jawab penulis komentar, bukan tanggung jawab pengelola blog/situs ini. Harap maklum.

 
© Copyright Dunia GUE 2011 - Some rights reserved | Powered by Blogger.com .
Template Design by Herdiansyah Hamzah | Jejaringkan Kami di Jejaring Sosial (duniague.net)