> ## Content Index
> Fetch the complete content index at: https://interhacktives.mymagic.page/llms.txt
> Use this file to discover other available public pages before exploring further.

# How to create a timeline using Timeline JS
- URL: https://interhacktives.mymagic.page/how-to-create-a-timeline-for-your-website-with-timeline-js/
- Published: 2015-11-04T12:19:09.000Z
- Updated: 2015-11-04T12:19:09.000Z
- Author: Debora Aru
- Tags: How-To, google spreadsheet, how to, open source, timeline, TimelineJS, #Migrated-1793717950415, #wp, #wp-post, #Import 2026-11-03 14:59

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

[Timeline JS](http://timeline.knightlab.com/?ref=interhacktives.mymagic.page) is a useful, easy and [open-source](https://github.com/NUKnightLab/TimelineJS3?ref=interhacktives.mymagic.page) 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](https://drive.google.com/previewtemplate?id=1pHBvXN7nmGkiG8uQSUB82eNlnL8xHu6kydzH%5F-eguHQ&mode=public&ref=interhacktives.mymagic.page) \- you will need a **Gmail account**. Once you have your Google spreadsheet, click on

![2](http://www.interhacktives.com/wp-content/uploads/2015/10/2.jpg)

at the top left. From here, you can start editing your timeline.

![num 1](http://www.interhacktives.com/wp-content/uploads/2015/10/num-1.jpg)

Credit: Debora Aru

## 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\.* 

![3](http://www.interhacktives.com/wp-content/uploads/2015/10/3.jpg)

Credits: Debora Aru

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.

![4](http://www.interhacktives.com/wp-content/uploads/2015/10/4.jpg)

Credits: Debora Aru

## 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](http://timeline.knightlab.com/docs/media-types.html?ref=interhacktives.mymagic.page).

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](http://www.w3schools.com/cssref/css%5Fcolors.asp?ref=interhacktives.mymagic.page) value, [CSS named color](http://www.w3schools.com/cssref/css%5Fcolornames.asp?ref=interhacktives.mymagic.page), 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**".

![6](http://www.interhacktives.com/wp-content/uploads/2015/10/6.jpg)

Credits: Timeline JS

Then click the blue "**publish**" button.

![7](http://www.interhacktives.com/wp-content/uploads/2015/10/7.jpg)

Credits: Timeline JS

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.

![8](http://www.interhacktives.com/wp-content/uploads/2015/10/8.jpg)

Credits: Timeline JS

## 5\. STEP FIVE - READY TO PUBLISH?

**Paste** spreadsheet URL into the box in the bottom of [this page](http://timeline.knightlab.com/index.html?ref=interhacktives.mymagic.page#make) (make sure you've published the spreadsheet), and check you're happy with the width, height, language, font etc.

![9](http://www.interhacktives.com/wp-content/uploads/2015/10/9.jpg)

Credits: Timeline JS

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

![10](http://www.interhacktives.com/wp-content/uploads/2015/10/10.jpg)

Credits: Timeline JS

Easy, isn't it?