Pages

Wednesday, September 28, 2011

20

Show date on all Blogger posts within same date

Blogger groups articles written on same day together, and the template variable data:post.dateHeader is only set for the first displayed post of the day (which is the last post of the day because of non-chronological blog post order). I saw some instructions to replace dateHeader by timestamp, that is ok but you loose the timestamp under the post. I came up with this solution, tested it, googled a little more, and found that some others had invented similar hacks, too. But here is mine.

These instructions work for the "Simple" template (september 2011), may work for others, too. I will install this hack on this blog to verify, that these instructions work.

Edit your blog's HTML. If you don't know how, you should definitely read this: Know your way around.
 
Commenting out template lines

Choose Expand Widget Templates. Edit 6/2013: Select Jump to widget -> Blog1 (editor has been changed). Find the section of code (use browser's find function, ctrl+F), where this string is three times:

<b:if cond='data:post.isDateStart'>

For me that code section looks like this (it may be different for you):

        <b:if cond='data:post.isDateStart'>
          <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
            &lt;/div&gt;&lt;/div&gt;
          </b:if>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-outer&quot;&gt;
        </b:if>
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>
The important parts are the tree "if" lines and their corresponding "endif" lines. Put those three <b:if>'s in html comments, and also their closing tags </b:if>'s, like this:

<!--    <b:if cond='data:post.isDateStart'> -->
          <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
            &lt;/div&gt;&lt;/div&gt;
          </b:if>
<!--    </b:if> -->
<!--    <b:if cond='data:post.isDateStart'> -->
          &lt;div class=&quot;date-outer&quot;&gt;
<!--    </b:if> -->
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
<!--    <b:if cond='data:post.isDateStart'> -->
          &lt;div class=&quot;date-posts&quot;&gt;
<!--    </b:if> -->
This is a good way to "delete" things from your html template. Blogger will strip all comments out, so they won't clutter the final html of your blog page.

Add javascript code to copy the date

Stay in the html editor and the vicinity of those previously commented lines. A few lines up from there, look for a line like this:

<div class='blog-posts hfeed'>
After that line, add these lines:
<!-- dates for all posts (on same day)/mspotilas. commented if/endif-lines + added unindented lines: -->
<script type='text/javascript'> var postDate=&quot;&quot;; </script>
That section is not absolutely necessary, but I like to declare the variables I use (C/C++ background). Then move down about 16-20 lines, where you should find a lines:
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
After those add these lines:
<script type='text/javascript'> postDate = &quot;<data:post.dateHeader/>&quot;; </script>
<b:else/>
<h2 class='date-header'><span><script type='text/javascript'>  document.write(postDate); </script></span></h2>
Now you should have date for every post, also on posts written on the same day.
[Hide comments] - [Show comments]
Click on a single comment to hide/show its text

20 comments:

Sharon said... [reply]

Hi. Just started blogger. Been looking for a way to reverse the dates. I tried putting in your other code and then adding the #order but nothing happened. Then I realized my test was two posts in one day. I saw the link to this on your other post and came here. However, I think google just changed everything. I know they did for youtube. I noticed a "link back to old" and all the help files for blogger IN blogger don't make since for what I'm seeing. Anyway I can't find the code you mention.
I can't even find 'data:p as soon as I type the p the browser goes from finding stuff to 0 found. (this is chrome). They DO have groups though. Such as: Group description="Date Header" selector=".date-header"
Variable name="date.header.color" description="Text Color" type="color"
default="$(body.text.color)" value="#8b00bb"/
Variable name="date.header.background.color" description="Background Color" type="color"
default="transparent" value="transparent"/
/Group

(note edited so it wouldn't think it was html)

Do you have a newer fix? I HATE having to go down to the bottom of a page to read a blog and would like mine to be oldest post first. thanks.
- Sharon

MS-potilas said... [reply]

@Sharon
Hi,
thanks for trying this and the post reversal hack. Both still work, like in this blog, Google won't change your template, only you can you do it yourself (switch to dynamic template, for example). I think the problem was, that you did not have "Expand Widget Templates" checked. If it is not, then that code is not found.

If you cannot get this to work, you can edit the other post's date so that they are different.

Another way to read your blog in reverse order would be my other hack, which gets posts from feed and displays them on a blog page in chronological order, see the hack here.

Sharon said... [reply]

Thanks for the reply. :) I found the check box and got the second part to work.

I'm disappointed though... because in order for me to get it to REALLY work I have to add #order=ASC to the url to get it to work. I mean I can give my friends taht link and I can put the link on the blog page... but when I click on archived links... it's back to being the wrong way. I want OTHER people to be able to read my page the way I want them to BY DEFAULT not having them add that.

Also I don't understand this part at all: quote: You need to modify the red and green parts and possibly the blue parts of the url to get your first post displayed. First change your blog url, that's easy. Then there is updated-max parameter, which contains the date of the first post not shown anymore on the first posts' page + your time zone. And then the number of posts per page, from your blog's settings. end quote

This was from your first help file.

Is this something you do in the template still? Because that's what I was going to ask you... how to get the #order= info INTO the template itself so that it redirects to that link. Note if this gets too complex I may just reply to the email instead of posting here. Thanks.

MS-potilas said... [reply]

@Sharon
Hi,
unfortunately the "default view" is not easily modified to start with the first post. It would be easy to reverse the posts on the page Blogger shows by default (your blog address), but that has only the newest posts (assuming you have posts on several pages).

(to other's, we're talking here mainly about this chronological order hack).

So you have to construct the link to (where you change the red and green parts) 1. get you to the last page of posts (where blog's first post is), and 2. reverse those posts on the screen (the #order=ASC part). I think it'll make more sense when you have several pages of posts in your blog - when you have only one page, the link cannot be made.

So users need to click some link to show the posts in chronological order. You can try to place the link in your blog so, that users will find it. The new pages gadget, where you can put also links, or the links gadget could work best. Often users are only interested in the newest posts, unless you're writing a book or something. I think it might be possible to write some javascript to redirect the front page to the "reverse link", but I have not tried that. I use a link myself.

The "last" method to reverse the posts, with no hack needed, but quite clumsy, which would display the posts in that order you want, would be to modify the dates of the posts to reversed (and possibly hide the modified dates). It may work on some (smallish) blogs.

Johanna said... [reply]

Hi, I would like to do this on my blog too. But it looks like this:
< div class ='date-header'>
&nbsp;&nbsp;



do you have a soulution?

MS-potilas said... [reply]

@Johanna
Hi,

if your code is (I'm not sure, because it is not shown correctly on the comment):

<div class='date-header'>
<data:post.dateHeader/>&amp;nbsp;&amp;nbsp;<data:post.timestamp/>
</div>

then the last code snippet should be something like this:

<script type='text/javascript'> postDate = &quot;<data:post.dateHeader/>&quot;; </script>
<b:else/>
<div class='date-header'><script type='text/javascript'> document.write(postDate); </script>&amp;nbsp;&amp;nbsp;<data:post.timestamp/></div>

So basically in the latter part we have the same div 'date-header', only <data:post.dateHeader/> is substituted with the javascript document.write.

Hope you'll get it working.

ceejay said... [reply]

hi, i tried this on my bllog here free mtn browsing tweak
i was unable to make it work.
can you really check if it is working?

ceejay said... [reply]

can't even get it done with this blog also university of Nigeria
i have messed up with my first blog!!! above and am trying to fix iyt.

MS-potilas said... [reply]

@ceejay Hi, the links did not work, the correct adresses of your blogs are: http://www.dailyschoolinfo.com/ and http://www.hotnigerianews.com/

I checked those blogs a minute ago, and seems that this hack is not installed on them.

Before trying to install hacks, you should backup the template (save a copy on your computer), so if anything goes wrong, you can restore the template.

I think this hack should work with your blogs' templates. Just follow the instructions carefully.

Filippo said... [reply]

I used this and it worked very well. Thanks!

Preston83 said... [reply]

Brilliant!

Many thanks for this—works very well, and the resulting appearance is much better than the default running together of often unrelated posts.

Maker's Notes said... [reply]

This is awesome! Worked perfectly for me. Thanks a million!

NicoBlogs said... [reply]

didn't work for me i did exactly as you said..:(
this is my blog
http://niconde.blogspot.com/

MS-potilas said... [reply]

@NicoBlogs
Hi,
the template (html) editor has changed. To find the correct line, select "Jump to widget" and "Blog1", and then search for the "isDateStart" lines. Most templates have the same structure and once you find the right place, the hack should work.

If it does not, can you tell more what went wrong? Did you find the right place to change in the template?

Nico psp said... [reply]

@MS-potilas

Thanks i i got it working as you see :)

Jerome Paul Esteban said... [reply]

I just wanted to thank you for this. It's made my template so much better!

Filipe said... [reply]

Thanks, that really helped.

Shapath Das said... [reply]

The helpful talent of resume writing doesn't need a protracted time to master. Indeed, several helpful resume techniques will expedite the method of making a strong resume writing during a comparatively transient amount of your time. This handy article can justify the way to write a resume in exactly one hour. visit the site

Post a Comment

Related Posts Plugin for WordPress, Blogger...
See the hack
for this dynamic
views icon: