Blogger Template Overhaul – Part 5 of 8

Posted by taoski | Filed under Coding, Geeky, Web

Post Titles

The second thing I want to change in my Blog design is the size, type and color of the fonts.
By default, the Minima template uses three main colors for the design.

  • Orange for the post title
  • Grey for the post date, blog title, description and sidebar titles.
  • Black for the main post text

We can change all these if we want to, by editing the CSS code in Zone 2. This is where the font settings are defined for the whole blog. So any changes we make here will flow through the entire blog. Easy eh!

Post Title:
I wanted to keep the orange text, mainly because orange is quite a popular color on the web at the moment, but I want to change the font a little and the size too.

The area in Zone 2 that controls the settings for the title is as follows:

.post-title {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:#c60;
}

I want to make the font larger so I am going to increase the font-size to 250% and I am also going to make the font bold by adding changing the font-weight:normal to font-weight:heavy. After that update, the code should look like this:

.post-title {
margin:.25em 0 0;
padding:0 0 4px;
font-size: 250%;
font-weight:heavy;
line-height:1.4em;
color:#c60;
}

Remember not to delete any of those semi-colons at the end of the line otherwise your CSS code will all go wrong and the page layout and design will change.

Next I want to get rid of that nasty little grey date header above the post title. Ideally I would like to show the following information:

TITLE
DATE
NUMBER OF COMMENTS

This format is quite popular at the moment in blog design, but it will involve moving code from the bottom of the post to the top.

The current code to display the post, title, date and comments can be found in Zone 3:

<BlogDateHeader>
<h2 class=”date-header”><$BlogDateHeaderDate$></h2>
</BlogDateHeader>

<!– Begin .post –>
<div class=”post”><a name=”<$BlogItemNumber$>”></a>
<BlogItemTitle>
<h3 class=”post-title”>
<BlogItemUrl><a xhref=”<$BlogItemUrl$>” mce_href=”<$BlogItemUrl$>” title=”external link”></BlogItemUrl>
<$BlogItemTitle$>
<BlogItemUrl></a></BlogItemUrl>
</h3>
</BlogItemTitle>

Tip:
One of the excellent things about the Blogger default templates on offer is the use of the “comment tags” that let you know where in the template you are. For example, towards the bottom of the template you will see the following lines:

<!– Begin #profile-container –>

<$BlogMemberProfile$>

<!– End #profile –>

Any portion of the template code that begins with <!– and ends with –> is interpreted as a comment.
It’s easy to see here that the first line informs us that the profile information is about to start and the last line shows that it has ended.
The <$BlogMemberProfile$> template code in the middle tells Blogger to display your Blogger profile photo, name and location. It’s worth remembering to check the comments in the template code to guide you to where you want to make edits.

Firstly, I want to delete the first 3 lines from the code.

<BlogDateHeader>
<h2 class=”date-header”><$BlogDateHeaderDate$></h2>
</BlogDateHeader>

This code displays the date at the top of the posts. However it will only be displayed once if you have more than one post per day:

DATE HEADER

POST1
POST2

What I want to achieve is to show the date on each post so those first lines get deleted.
I then need to add the code underneath the post tile to display the post date and comments.

After the </BlogItemTitle> tag, I will put in a <BR> code to force a new line. We then need to insert the Blogger tag for the post date, which is <$BlogItemDateTime$> followed by the number of comments. You can show the comments number by using the <$BlogItemCommentCount$> tag. We will need to make this nicer by adding text to the code otherwise it will just show the date followed by a number to represent the number of comments.

<BR>
Date: <$BlogItemDateTime$>
<BR>
Comments: <$BlogItemCommentCount$>

That will make the post title look like this:

We can tart up the date and comment text a little by adding more HTML tags like this to make the words Date and Comments appear in bold:

<BR>
<B>Date:</B> <$BlogItemDateTime$>
<BR>
<B>Comments:</B> <$BlogItemCommentCount$>

I then decided to make the text “web 2.0 green”:

<font color=”green”>
<BR>
<b>Date:</b> <$BlogItemDateTime$>
<BR>
<b>Comments:</b> <$BlogItemCommentCount$>
</font>

I think I will leave the rest of the code how it is. I want my readers to see the title of the post, the date it was posted and the number of comments that the post has received. If they want to leave a comment, they can scroll to the bottom of the post and click the usual link. I don’t really want my readers to be searching all over the place for my “hidden link” to leave a comment.

This is part of the Blogger Template Overhaul series.

Part 1 – Introduction
Part 2 – Template Code
Part 3 – Design
 Part 4 – Headers
Part 5 – Posts
Part 6 – Comments
Part 7 – The Sidebar
Part 8 – The Footer

Comments (3) | May 30th, 2006

3 Responses to “Blogger Template Overhaul – Part 5 of 8”

  1. Part 6 - comments at GeekLimit Says:
    June 1, 2006 at 4:50 pm

    [...] Forum « Blogger Template Overhaul – Part 5 of 8 Geeks Unite » [...]

  2. Vishwas K Says:
    June 15, 2007 at 5:08 am

    Thanks a lot. I had been looking for codes to increase the font size of my title post. Finally found it in your site.

  3. How To Start A Blog Says:
    October 26, 2007 at 7:19 pm

    How To Start A Blog…

    I couldn’t understand some parts of this article, but it sounds interesting…

Leave a Reply