Thứ Tư, 9 tháng 12, 2009

Show Date for all posts in Blogger


 Most bloggers prefer to display the date a post was published, which is often relevant to the subject matter of the post. Indeed, most blog templates include some elements of CSS styling for the post date (or date heading as it is often known).
When using Blogger to publish your blog, the date heading is only displayed for the most recent post of any given day. This means that if you make several posts in a single day, the date heading will only display for the last post published in this day.
While readers of your blog may be able to deduce the posting date in relation to other posts, many of us would prefer to simply display the date, especially when using a calendar icon or other template styling to display the date in a particular way.
In default Blogger templates (and indeed in most third party templates) there is no option but to use the restrictive <data:post.dateHeader> tag to display the date only for one post each day.
So in this post, I’ll explain a quick and simple customization which enables you to display the date for all posts in your blog, to inform your readers of the exact date of posting and ensure any date styling in your layout is rendered correctly.

Using the “Time-stamp” tags

The only method we can use to display the date on all posts on home and archive pages with Blogger is to replace the <data:post.dateHeader> tag with that usually reserved for the timestamp (permalink).
This is because the Blogger engine will render only one date-header statement for each day of posts, whereas timestamps are generated for each and every post.
If you take a look at the Settings>Formatting page in your Blogger dashboard, you will notice there are numerous options for formatting the date style for the timestamp, many of which mimic those used for the actual date heading.
The method we need to use for this customization involves switching the date-header tags for timestamp tags, and formatting the timestamp so it appears more like a date-heading instead.

Changing the template code to accommodate the date for all posts

This is a very simple customization to make.
Simply go to Layout>Edit HTML in your Blogger dashboard and check the “Expand widget templates” box.
Then search for the following section of code (or similar):
<b:if cond=’data:post.dateHeader’>
<h2 class=’date-header’><data:post.dateHeader/></h2>
</b:if>
Be aware that in your own Blogger template, the <h2> tags may have been replaced with a DIV or H3 tags instead. However, the surrounding code should appear in the same way.
Replace this entire section of code with the following instead:
<h2 class=’date-header’><data:post.timestamp/></h2>
Then preview your blog. If you have made more than one post in a single day, you will now see that the time-stamp is displayed for all posts on this day, whereas the date-header previously used would only display once for each day.
Optional:
As you are using the timestamp for the date heading of your posts, you may prefer to remove the timestamp from the post-footer section.
If this is the case, find the following section of code in your template:
<b:if cond=’data:top.showTimestamp’>
<data:top.timestampLabel/>
<b:if cond=’data:post.url’>
<data:post.timestamp/><a class=’timestamp-link’ expr:href=’data:post.url’ title=’permanent link’>Permalink</a>
</b:if>
</b:if>
And delete this entire section of code.
Be sure to preview your template agian before saving to ensure you have not accidentally deleted (or altered) any other aspects of your layout.

Formatting your new date heading

By default, the timestamp in Blogger blogs is set to display the time of posting, rather than the date. You may prefer to change this setting to reflect the date as this is more appropriate and informative for your blog readers.
To change this format, go to Settings>Formatting in your Blogger dashboard. On this page, you will notice a drop-down menu where you can choose the format for your timestamp:




Simply choose a setting which you feel would be more appropriate for your layout, and save this setting. Personally I prefer the full date option (ie: Tuesday, October 14 2008) though you may prefer a shorter date format instead.
Amanda Fazani

0 nhận xét:

Đăng nhận xét

Bạn có ý kiến hay thắc mắc về bài viết --> Hãy để lại nhận xét bên dưới !

Phản hồi của bạn luôn được đánh giá cao. Tôi sẽ cố gắng trả lời sớm nhất có thể.
Nhắc bạn:
1. Vui lòng đừng Spam ! Tôi sẽ xóa ngay lập tức nếu phát hiện.
2. Các bài comment phải nghiêm túc, không dung tục.
3. Nội dung phải liên quan tới chủ đề bài viết.
4. Hãy để lại tên của bạn khi bạn post bài comment, để mình có thể dễ dàng trả lời comment của bạn khi cần.
5.Đối với những thắc mắc không liên quan đến bài viết này, bạn vui lòng để lại câu hỏi ở đây --> PC Help

Thân chào,
Admin

  Sản phẩm mới của KNC