Season-oriented timestamps.

This may come in handy:

When it comes to compose a post template within Blogger, You can customize it to a certain degree by choosing which elements You'd like to include - and where they should be placed. These are elements which seem to be obvious and common, such as posts' titles, labels, timestamps, authors, etc. Although at first glance there is nothing especially interesting here - You can make it so by recognizing that there is a room for improvement :) . Or "seasoning", if You will :) .

How You could "season" Your blog?
Years ago, using both The Bat! (an email app for Windows) and Notepadtress (a text-editor, also for Windows) I learned that timestamps can be handled in a surprising, creative, and a more friendly way: instead of putting just a sole date and time You can transform it into something like: "Good morning, Jeff!" (opening an email message) or "...published on one spring 2019 afternoon" (a blog post timestamp).

A nice thing here is that those headers are created automatically, based on the time You are writing an email - or publish a blog post. As You probably know, Blogger can put a date and time alongside Your posts, but this is all it can do - while You are able to make it much more interesting. Imagine, for example, that each and every post of Your blog is preceded by this kind of a timestamp. As a result, when someone clicks one of Your blog's labels, browses the archive, etc. - (s)he will see posts with a whole variety of timestamp headers, indicating that some of them have been written in the morning, some at late night - some were created during the winter time, some during the summer, and so on.

Furthermore, alongside those new "timestamps" You can put - also automatically ascribed - small images, also season-dependent (so, for example, winter posts could be accompanied by a snowman figurine, while summer posts could have a palm tree displayed next to them).

Imagine, how all of this could change the experience with Your blog - from Your Guest's perspective. It could be much more interesting and fun, I guess :) . Moreover, it is fantastic that You don't need to write those timestamp headers by hand - You just need to write a proper code snippet to do it automatically. From the Blogger perspective nothings changes: posts still have common timestamps attached to them. The whole "magic" happens at Your Guest's side - the place where jQuery comes in.

How to make more friendly timestamps?
First, You need to prepare the ground Blogger-settings-wise (I'll describe it the way I Myself have achieved it):

1. Go to Your Blogger dashboard, from the menu on the left choose "Settings" and then "Language and formatting".
2. Set "Date Header Format" to "May 16, 2019" (it will display the current date), and "Timestamp Format" to "23:21" (I use a 24-hour format).
3. Save by "Save settings" button on the top right.

Second, You need to put a code responsible for posts' timestamps within Your Blogger template - put it in place where You'd like to have timestamps displayed (I putted it just before post's title):

<!-- post timestamp –>
<span class="PostTiming">
<p>
<span class="PostTimingTXT">..traces left on one </span>
<span class="PostTimingB"><data:post.dateHeader/></span>
<span class="PostTimingA"><data:post.timestamp/></span>
</p>
</span>
<!-- post timestamp -->

The code above is "the grid" to be fulfilled by the actual jQuery code snippet You'll write in a moment. <data:post.dateHeader/> is a Blogger tag responsible for inserting a post's date - it will come in handy to determine the season of the year. Whereas <data:post.timestamp/> stands for a post's ordinary timestamp - which You'll use to determine the time of the day. Let's go to the jQuery: the whole code should be placed within Your jQuery "box": a proper "HTML/JavaScript" gadget, i.e. the one in which You place various jQuery code snippets).

Now, since the whole timestamps code isn't short, let's look at its overall idea first:

/* Post Timing - start */
I. Detect the time of the day for x posts displayed on the screen.
II.Detect the season of the year for each of those posts.
III.Add the proper year.
IV.Add the proper season picture.
/* Post Timing - end */

Let's have a closer look at each of these steps.

I. Detect the time of the day for x posts displayed on the screen.
First, answer following questions:

1. How many posts You want to be equipped with more interestingly looking timestamps?
2. How many - and what - time spans You want to have to differentiate various time of the day?

In My case there are four time-spans (morning, afternoon, evening and night). This is how the code for the first post looks like:

/* post #1 */

var hour = parseInt($('.PostTimingA:first').text());
if (hour >= 23 && hour <= 00 ) { $(".PostTimingA:first").text('night...'); }
if (hour >= 00 && hour <= 04 ) { $(".PostTimingA:first").text('night...'); }
if (hour >= 04 && hour <= 12 ) { $(".PostTimingA:first").text('morning...'); }
if (hour >= 12 && hour <= 18 ) { $(".PostTimingA:first").text('afternoon...'); }
if (hour >= 18 && hour <= 23 ) { $(".PostTimingA:first").text('evening...'); }

The code for the second post will look quite similarly:

/* post #2 */

var hour2 = parseInt($('.PostTimingA:eq(1)').text());
if (hour2 >= 23 && hour2 <= 00 ) { $(".PostTimingA:eq(1)").text('night...'); }
if (hour2 >= 00 && hour2 <= 04 ) { $(".PostTimingA:eq(1)").text('night...'); }
if (hour2 >= 04 && hour2 <= 12 ) { $(".PostTimingA:eq(1)").text('morning...'); }
if (hour2 >= 12 && hour2 <= 18 ) { $(".PostTimingA:eq(1)").text('afternoon...'); }
if (hour2 >= 18 && hour2 <= 23 ) { $(".PostTimingA:eq(1)").text('evening...'); }

If You need to include more posts - just copy&paste the latter code snippet, and adjust it by changing "hour2" into "hour3" (the third post), "hour4" (the fourth post) and so on - and "eq(1)" into "eq(2)" (the third post), "eq(3)" (the fourth post), and so on.

II. Detect the season of the year for each of those posts.
Since My final goal is to have (for example) "..traces left on one spring 2016 afternoon..." displayed as My posts' improved timestamp, I've done that:

$(".PostTiming:contains('September') .PostTimingB").text('fall');
$(".PostTiming:contains('October') .PostTimingB").text('fall');
$(".PostTiming:contains('November') .PostTimingB").text('fall');
$(".PostTiming:contains('December') .PostTimingB").text('winter');
$(".PostTiming:contains('January') .PostTimingB").text('winter');
$(".PostTiming:contains('February') .PostTimingB").text('winter');
$(".PostTiming:contains('March') .PostTimingB").text('spring');
$(".PostTiming:contains('April') .PostTimingB").text('spring');
$(".PostTiming:contains('May') .PostTimingB").text('spring');
$(".PostTiming:contains('June') .PostTimingB").text('summer');
$(".PostTiming:contains('July') .PostTimingB").text('summer');
$(".PostTiming:contains('August') .PostTimingB").text('summer');

III. Add the proper year.
Since You've already replaced the whole date with the appropriate season's name - the day, month and year are no longer available - so You can't use them to determine posts' years anymore. So instead of "..traces left on one 2019 spring evening..." You'll see "..traces left on one spring evening...". Not a big difference, but You still are able to determine a year within a single post - because in this case a post's year is available through its address (e.g. "https://trailofthelight.blogspot.com/2019/04/my-first-klwp-preset_91.html"). Since jQuery can take those addresses into account - You may freely take advantage of them. Cover as many years as long You've published on Your blog:

if (document.URL.indexOf("2019") > -1) {
$(".PostTiming .PostTimingB").append(' 2019'); }
if (document.URL.indexOf("2018") > -1) {
$(".PostTiming .PostTimingB").append(' 2018'); }
if (document.URL.indexOf("2017") > -1) {
$(".PostTiming .PostTimingB").append(' 2017'); }
if (document.URL.indexOf("2016") > -1) {
$(".PostTiming .PostTimingB").append(' 2016'); }
if (document.URL.indexOf("2015") > -1) {
$(".PostTiming .PostTimingB").append(' 2015'); }
if (document.URL.indexOf("2014") > -1) {
$(".PostTiming .PostTimingB").append(' 2014'); }

IV. Add the proper season picture.
The last piece is to garnish Your brand new timestamps with season-dependent images. The actual images You'll define within CSS, now let's just point out which classes should be added to which timestamps:

$(".PostTiming:contains('winter')").addClass("winter");
$(".PostTiming:contains('fall')").addClass("autumn");
$(".PostTiming:contains('spring')").addClass("spring");
$(".PostTiming:contains('summer')").addClass("summer");

Then, let's do CSS :) . First You need to define the whole timestamp box: if You haven't done that before, define .PostTiming. Then, for each season You can define the appropriate class, e.g.:

.winter
{
height: 88px;
padding-left: 58px;
background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9yrhayyHqR5Ge-FGqGJv3U-ELM5umtl-59CpN1FGZYtKq8kodnAyy5PQIA4lgZUGjoOncK1AVLh0XR0Ry5M-STmZi8E8dwMmP4bZewfcKRMPQDv0kNQSbgPOOP_VQiBEp9Zo6eDMYuWQ8/s1600/seasons_winter.png") no-repeat 0px -14px;
}

The code above is just a sample code - it depends on Your Own particular design. The most important part here is ascribing an image as a background - this way the season-dependent image will be displayed.

That's all, You may now enjoy Your much more interestingly looking posts' timestamps :) .