How to Create a Timeline Widget for Blogger
A Timeline of your posts can be added to your beta blog. This shows the titles and links of all your posts against a horizontal scroll of dates published.........
This is an intresting way to display all the links to your posts so that your viewers get a visual impression of how prolific you have been in posting to your blog.
To do this you will have to get code from http://www.mytimelines.net/. To create one go here. Paste your feed url in the Feed URL text box. The URL of your beta blog's feed is :
http://yourblogname.blogspot.com/feeds/posts/default?alt=rss
Substitute your actual blog name instead of 'yourblogname' in above link. Next choose from four different x-axis. There are two levels of time display along the horizontal axis. You can choose Day/Month, Day/Week, Week/Month or Hour/Day. Week/Month will give you a horizontally shorter timeline with all your post titles seen vertically stashed along an incline. See Image below : Click image to enlarge it.
In the next options choose the font, width and height of your timeline. Then click the 'Get Code' button.
Code is generated for you and also a preview. If you are not satisfied with the preview you can go back to the options and modify them to get it right. The preview also serves to check whether your feed url is correct by showing you the titles of your posts.
You can scroll the timeline horizontally by placing your cursor on it. The cursor changes into a hand. Then click and drag in either direction horizontally to see other posts. Clicking on the post titles brings up a box with the title of the post and the date when it was published. Then closing this box opens this post in a new tab. To stop it opening the post click outside the box in the timeline area.
To put the code in your template go to edit Html subtab of Template tab and first backup yourtemplate using the Download Full Template link found on that page. Then scroll down in Edit Template text box till you come to :
<b:section class='main' id='main'>
Change this line to (Delete above line and add below line in its place) :
<b:section class='main' id='main' maxwidgets='3' showaddelement='yes'>
Save Template and go to Page Elements tab. There you will see a Add Page Element link above the Blog Posts section. Click this link and in popup window choose Html/Javascript option. Do not paste anything in content section as yet. Just save this element by clicking on save.
Now go to Edit Html tab and put a check in Expand Widget Templates box and then scroll down till you locate the newly added page element at the top of the Blog posts. The code will be like this :
<b:widget id='HTML14' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Delete the line in red in the above code and add this code :
<div id='my-timeline'>
</div>
Save the template. Then go to Page Elements subtab under Template tab and click on Edit link in the Page Element created above the blog posts. In the pop up window paste the 'header' code in the contents text box and Save. It will look like this :
<script src="http://simile.mit.edu/timeline/api/timeline-api.js" type="text/javascript"></script>
<script src="http://www.mytimelines.net/js/mytimelines.v1.0.php?
u=http://the-blogger-templates.blogspot.com/feeds/posts/default?
alt=rss&s=wm&f=arial&h=250&w=550" type="text/javascript"></script>
Instead of my url in above code you will see your url. IN ABOVE CODE COPY AND PASTE 'amp;' WITHOUT THE QUOTES AFTER EACH '&' CHARACTER OR ELSE YOU WILL GET ERROR ON SAVING TEMPLATE. YOU WILL HAVE TO DO THIS FOUR TIMES BEFORE 's','f','h'and 'w'.
Now you will have to style the page element by adding the following code in the css section of your template between the
#my-timeline {
height: 400px;
width: 500;
border: 1px solid #eaeaea;
font-size: 11px;
font-family: arial;
}
Change the width, height and font attributes to those which you had chosen on the create timeline page. Save Template. View Blog after refreshing the cache. Enjoy!
See my timeline in action at the foot of this blog.
By Admin n E.K