How to Style Different Elements in Blogger - Post Title
Advertisement
Recently I was going through the site statistics of my site provided by statcounter and found an interesting thing. I saw a lot of blogspot users searching for terms like "how to change font size of date in blogger", "how change color of post title" etc. Well even though these things are simple queries and can be done by anyone, I also searched for these terms and found nothing.
How to Style the Post Title in My Blog
It is interesting to see that there are hundreds of blogs providing tips and tricks to customize the blogger template, there are no posts for these basic things. So here we go. In this article we will see how to change the font size of different elements in a blogger blog.
Before editing your template or performing any action in your template I would prefer you read this article about editing your template.
How to Change The Post Title Font Style
All the styles for different elements in a blogger template is defined in the Style sheet that comes in between the <HEAD> and </HEAD> tags. So to change the style of an element we need to find under which ID or CLASS name the style of that element is defined. Finding this is pretty simple. Follow the steps given below.- Go to Blogger Home
- Click on Layout option for the blog and click on Edit HTML
- Now check on the "Expand Widget Templates" check box at the top right corner of the HTML Editor.
- Inside the HTML search for the piece of code as given below.<b:includable id='post' var='post'>
- For almost all the blog templates the Title of the Post comes immediately after this. This is an <h2> element in 99% of the blogger blog templates. This should look like as given below.
<h2 class='title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'>
<data:post.title/>
</a>
..............
</h2> - In this case the class which defines the style for the post title is title as you can see in the line <h2 class='title'>
- Now search for the word .title in your style sheet. Don't remember the .[dot] before the title as this helps you to get the class definition easily.
- If you can't find anything like that in your style sheet don't worry. we will add a CSS Class of property with that name.
- If you already have a class or id named title in your style sheet, you can edit it to change the font style. If the font styles are already defined, edit them as per your needs. The basic font styles used are font-family, font-size, font-weight, font-color.
So, to have a title with color black, size 22pixels, of family Arial, Verdana or Tahoma, and which is bold, add the blow given piece of code in your title style definitions..title{
font-family: Arial, Verdana, Tahoma;
font-size: 22px;
font-color: #000000;
font-weight: bold;/*replace bold with normal to make the font normal*/}
OR#title{
font-family: Arial, Verdana, Tahoma;
font-size: 22px;
font-color: #000000;
font-weight: bold;/*replace bold with normal to make the font normal*/} - Save the Template
If you dont have this class or id in your style sheet, or if no class or id is specified inside the <h2> tag, don't worry. We can add them in the style sheet.
First you need to create the class in the style sheet. Copy the code given in STEP 9 as given above (copy the one with the .title) and paste it inside your style sheet ( best place will be above ]]></b:skin> ).Second, find the place where the Post Title is placed. For this refer the steps 4 & 5 given above. When you find the <h2> tag replace it with <h2 class="title">. Take care that no other class or id is not defined inside the <h2> tag.
Save your template and you are good to go. The post titles in your blog will be displayed as in black, bold, Arial letters with a size of 22 pixels.
Now even after this, the style is not changed its is because of this. Your post title is also an acnhor text. That is, it is a link to the page where that particular post is displayed individually. There might be some styles defined for links which are also h2 headers.
In this case, the style we specified for the title class we defined comes before the style which is defined for the h2 a(the link object).
Now to change this you need to find something like this in your template code and edit it to meet your requirements.
h2 a {..........}
To find more options and CSS styles for the font property you cna refer this article which tell you everything about font styles.
"Thank You!!! You’ve reached the end of this post. Seeing you made it this far, we hope you enjoyed this post. If so, please consider leaving a comment or subscribing to the feed to have further articles deliverd to your feed reader. You can also follow me on Twitter." 1 Comment(s)
Leave a Comment
Subscribe to:
Post Comments (Atom)
Excellent Article!
Thanks for posting!
I too have wondered about this and how to do it and was never able to find out exactly how!