Timeline Tutorials
The following is the first of many planned tutorials. In this tutorial we will walk you through the process of creating a new timeline using the My Timelines system.
1. Choose your feed
You'll need a valid Atom, RDF or RSS feed that includes date information. For this tutorial I will be working with the Odin Assemble Blog and it's associated Atom feed. Like most Blogger based blogs this Atom feed includes date information.
2. Choose your display style
We currently offer four different display style settings. You want to choose the setting that is closest to your blogging schedule. If you blog multiple times a day then you probably want Hour/Day - if its less frequent move up the scale. This blog adds a new entry each day so we'll select Day/Week.
3. Choose your font
This font will be the default display, this setting only controls the initial font. Your caption box fonts are controlled via CSS. You can use the following classes to control the caption boxes:
- .timeline-default
- .timeline-event-bubble-title
- .timeline-event-bubble-body
- .timeline-event-bubble-body img
- .timeline-event-bubble-time
To match my blog I'll be using Georgia.
4. Choose your height
It's important to choose a height that is large enough to hold all your blog entries. Good starting points are 150, 175 and 180. I'll use 175 for the tutorial.
5. Choose your width (optional)
You can set your width or leave it unset to indicate 100%. I'll leave it blank for this tutorial.
6. Add the generated code to any HTML page
After entering all my values into the Create a Timeline wizard I received the following header and html code.
Header Code
HTML Code
I've pasted the header code between the <head></head> tags, and the html code between the <body></body> tags.
You can see the live results at the Odin Assemble Blog.
