Time-dependent graphics.

I especially like when a website isn't just presenting information, but it is also friendly. Probably there are many ways to make it so, one of My favorite is to make the layout (or some parts of it) time-dependent.

Imagine Yourself visiting some website in the early morning. Suddenly You've realized that it shows You a nice graphic of rising Sun (inbuilt in its overall layout). Or maybe You're lying in the bed in the evening, browsing the Net - and the same website shows You a pleasant night sky... wishing You a good night's sleep? Or maybe even in a broader sense: You could imagine a website responsive to various holidays and.or seasons. Every occasion could be rendered in some way through its visual layer, making it something more than just an ordinary website - making it more human.

Let's focus on various time of the day. Technically-wise there are several ways to make it happen. The core mechanism would be a simple JavaScript snippet, in which You define a couple of time spans - and behavior related to each one.

For example, if You'd like to make the graphic on top of Your site time-dependent - it would work like this:

if the time is somewhere between 5am & 11am
then display this (morning) picture

The actual and complete JavaScript code (version without jQuery) with several time spans would be, as follows:

<!-- TimeView –>
<script type="text/javascript">
<!-- Hide from non-Javascript browsers
// The following fragment is an example of displaying a different
// string to the user depending on the time of day.
//
d = new Date();
hour = d.getHours();
if(hour < 5)
{
document.write("<div id='TimeSkins'><img src='https://pathToTheNightImage.png' class='TimeSkins' /></div>");
}
else
if(hour < 8)
{
document.write("<div id='TimeSkins'><img src='https://pathToTheMorningImage.png' class='TimeSkins' /></div>");
}
else
if(hour < 19)
{
document.write("<div id='TimeSkins'><img src='https://pathToTheDayImage.png' class='TimeSkins' /></div>");
}
else
if(hour < 21)
{
document.write("<div id='TimeSkins'><img src='https://pathToTheEveningImage.png' class='TimeSkins' /></div>");
}
else
if(hour < 24)
{
document.write("<div id='TimeSkins'><img src='https://pathToTheNightImage.png' class='TimeSkins' /></div>");
}
else
{
document.write("");
}
//—>
</script>

The code above covers following time spans (24-hour clock):

• 00:00 - 05:00,
• 05:00 - 08:00,
• 08:00 - 19:00,
• 19:00 - 21:00,
• 21:00 - 00:00;

In case You'd like to have more or less time spans, just add or remove a repeating fragment of code (from "if" to "else" - for example You can add it before the first "if").

So You need to have a set of pictures dedicated to each time of the day defined above. If You have them already, You could upload them - for example directly into Your Blogger account - use this instruction:

How to quickly and easily host graphics for Your layout - no FTP needed!

Now You can replace all time-depending images' paths with the addresses You've just obtained.

 

Installation.
Since Blogger allows You to highly modify its layout without a need of editing templates - You can introduce time-depending graphics into Your site simply through gadgets. If You, however, feel comfortable editing the actual template - in a way it could be done easier. Take a closer look on each method and decide by Yourself :) .

 

Method 1: no template-editing, just gadgets.
This method is meant for beginners (when You don't know how to design a Blogger template from scratch and wanna use as little code as possible) and consists on two steps. In the first step You will put "the recipe" of time-dependent images into Your website's "engine". In the second step You will point out where exactly the image should be placed. Let's get started.

 

I0. Preparing images.
If You've chosen this method, probably You don't want to have anything to do with editing Your website's template code. Instead You'd like to base on one of existing themes You've chosen some time ago for Your site.

Now, suppose You'd like to make the top (header) graphic time-dependent (most themes includes some pictures on the top). Would You like to have Your time-dependent image of the same size as the current one? If it's not necessary - skip this part and move to the next. Otherwise this is how You can easily find out what the exact dimensions of Your current top image are:

1. In Chrome right click the image on the top and choose "Inspect".
2. A new window should emerge. It is generally filled with code - note that one particular part is highlighted. It should begin with "<img". Hover the cursor over this highlighted code and You should see a tooltip with image's width and height in pixels (in the same time the dimensions will be displayed somewhere by the image).

 

I. Installing "the recipe".

1. Log in into Your Blogger dashboard and enter the Layout section (on the left).
2. Find a link called "Add a Gadget", click it. On the list find a "HTML/JavaScript" item and choose it.
3. Fill the Title field with something recognizable for You - like, for example, "Time-dependent images".
4. If You're using jQuery first time on Your website - then on the very beginning of the Content field paste the following code:
   

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

It will "install" jQuery on Your website - which will come in handy a little bit further. Then below this line...

5. ...paste the whole JavaScript code You've constructed before.
6. Click "Save" on the bottom - and then (after the smaller window disappeared) click "Save arrangement" on the top right.

 

II. Choosing a place to display the image.

In order to replace the old image with the new one - You need to know the so-called "ID" of "the box" in which Your image is already placed.

This is how You can find it out:

1. In Chrome right click the top image and choose "Inspect".
2. A new window should emerge. It is generally filled with code - note that one particular part is highlighted. It should be part beginning with "<img".
3. Right above this part You should see a line beginning with "<a href" - and then above this one You should see a line beginning with "<div id="theIDname">.
4. If there is no line beginning with "<a href" just above the line beginning with "<img" - then enter the Layout section and check if the Page Header gadget has "Placement" set to "Behind title and description" (You can do that via "Edit" link attached to this gadget). If no, correct the value to the one I've mentioned above.
5. Copy the ID name - in the screenshot below it is called "header-inner".

_{(click images to enlarge)}

 

Now You can complete the JavaScript code You've prepared before:

1. Log in into Your Blogger dashboard and enter the Layout section (on the left).
2. Find a Time-dependent images gadget You've created and click the Edit link attached to it.
3. Go to the very end of the code - it should end with:

//-->
</script>

4. Create an empty line between those two and then past the following jQuery code there (in this example I used "header-inner" name - note that it is preceded by "#"):

$(document).ready(function(){
$("#header-inner a:first").html(jQuery("#TimeSkins").html());
});

5. Click "Save" on the bottom - and then (after the smaller window disappeared) click "Save arrangement" on the top right.

Congratulations :) ! It should be working by now :) ! Refresh Your site and check it out!

 

Method 2: modifying the template's code.
This method is meant for more advanced users. It comes in handy especially if You already know:

1. HTML & CSS.
2. How to build Your Own Blogger template from scratch.

I've mentioned before that this method is simpler in a way - because You don't need to create any gadgets.

Side note:
Although this time You can do without gadgets - I would recommend to use them anyway because they could make Your work much easier in the long run (thanks to gadgets You can focus only on those code snippets You'd like to work with now - without a need to update the whole template every time You've introduced some changes).

In order to benefit from this method You need to know how to put Your code directly into the template. Besides, if You are more advanced with designing Blogger templates, You could be able to do without jQuery. Let's see how it could be done:

1. In the proper place inside Your template's code create a container for time-dependent images, e.g.:

<div id="TimeDependentImages"></div>

2. If You don't use a gadget, paste the JavaScript code (a version without jQuery lines added) directly into this container.
3. If You do use a gadget, leave the container empty - instead, inside the gadget use the JavaScript code, jQuery lines included, but modified accordingly (keeping the container's ID in mind) - for example:

$("#TimeDependentImages a:first").html(jQuery("#TimeSkins").html());

(which means: put #TimeSkins' content (= an image) into #TimeDependentImages container)

4. Complete with all the CSS needed to make up the container's look and other properties.
5. Save the template and refresh Your site to check it out.

 

As a curiosity: it's good to know that You can place time-dependent images directly into posts, too - in order to do that You just need to paste the JavaScript code (the base version without jQuery) directly into post's code (using "HTML" view while editing the post) - here is an example:

Another working example You can see at this site.