How to create a timeline using Timeline JS

Want to know how to create a timeline like this for your website?

Timeline JS is a useful, easy and open-source tool that enables you to build visually rich, interactive personal timelines.

If you are a beginner, you can create a timeline using a Google spreadsheet.

1. STEP ONE – SPREADSHEET

Get the template sheet from here – you will need a Gmail account. Once you have your Google spreadsheet, click onat the top left. From here, you can start editing your timeline.

2. STEP TWO – ENTER DATE

NB: Don’t change the column headers, don’t remove any columns, and don’t leave any blank rows in your spreadsheet – just edit the content.

In the first four columns A-D are the dates of your timeline entry.  Enter the year and/or month and/or day and/or even the time of a particular event. For BC dates, you need to use a negative year, such as -600. 

Columns E-H are optional. You have the option to add end dates. Spans of time will display in the bottom portion of the timeline.

Column I represents a “display date” over any slide of your timeline. It can be helpful so that TimelineJS knows how to display the date.

3. STEP THREE – CONTENT EDITING AND ADDING MEDIA

Columns J–K contain the headline and the body text of your timetable.

You can add your media in column L by entering the link to the media you want to display. TimelineJS supports several sources like Twitter, Instagram, Flickr, Google Maps, DropBox, DocumentCloud, Wikipedia, SoundCloud, Storify, iframes, and videos from major video sites like YouTube or Vimeo. Read the complete list here.

In column M, you can credit the media’s original source, and in column N you can include a short caption.

To set the background of the slide to a specific colour,  enter a CSS hex color value, CSS named color, or the URL to an image in the Background column R.

4. STEP FOUR – PUBLISH YOUR TIMELINE

Once you have finished editing your spreadsheet, you are ready to publish it. Click on “File” at the top left of your Google spreadsheet and select “publish to the web“.

Then click the blue “publish” button.

In the pop-up window, make sure you are under the Link tab, then make sure that “Automatically republish when changes are made” is checked and that “Entire Document” is selected. Now, copy the URL that appears in the centre of the window.

5. STEP FIVE – READY TO PUBLISH?

Paste spreadsheet URL into the box in the bottom of this page (make sure you’ve published the spreadsheet),  and check you’re happy with the width, height, language, font etc.

Your code has now been generated. You just need to copy this embed code into your website.

Easy, isn’t it?