Timeline.Js is an easy and useful tool to create a timeline and place it on your website, article or blog.

The site actually shows you how to create a timeline step-by-step on the home page. The first step is to create the content of your timeline.

Timeline.Js is linked with google spreadsheet. There is a sample spreadsheet that shows exactly what it should look like(sample google spreadsheet). Click “Use this template” in the top left corner to clear it out and add your own content. Each section on the spreadsheet explains itself and tells you what you need to put in.

Screen Shot 2014-12-02 at 9.15.46 PM

Screen grab from Google Docs.

Spreadsheet tips: 

  • The “Start Date” section has times as well as dates. You can’t delete it, but you can put all zeros like the template shows and it will not show up on the timeline.
  • In the “Media” section, put the url for whatever media you want to include on the timeline. If you don’t have a video, photo, social media post or map, you can also use this section to show a related link’s screenshot by putting the url of the page in this section. If you don’t have any related media at all, leave it blank.

  • The “Type” section allows you to select from a drop
    Screen Shot 2014-12-04 at 4.14.02 PM

    Screen grab from Google Docs.

    downmenu within the box. It says “title” and “era”. Selecting “title” will make that slide the row the first slide in the timeline. So for the other rows make sure they do not say anything in that drop down menu because it can mess up the order of the events in the timeline.

After you are done with filling out the content in the spreadsheet. Go to the upper right hand corner of the screen. Click File->Publish to the web… Check the box beside “Automatically republish when changes are made”. Hit “publish now”. Copy the URL in the box at the bottom.

Go back to the main page of Timeline.Js. Scroll down to part 3 and paste the URL where it says “Google Spreadsheet URL”.

When you do that a code will appear in section 4 below that. You can preview the timeline on the website or in a different window. If you want to change something you can do it on the spreadsheet. Just hit preview again and it should update the changes. If not, re-copy and paste the url into section 3, then hit preview.

When done, copy and paste the code in box 4 and embed into whatever page you like.

Here is an example from Time.com: Nelson Mandela timeline.