Timeline in Blogger Beta.

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://betabloggerfordummies.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 <b:skin> and </b:skin> tags :

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

Technorati Tags:posts, previous posts, timeline

How To List Previous Posts by Title.

To list All Previous Posts by Title...............

you will use your blog's RSS feed to put content into your sidebar. How to do this has already been described in the post : Add Content with RSS Feeds in a general way. This is a special case in which you can use this method to display the title of all your previous posts in the sidebar.

STEP 1. The feed for your beta blog is of the format :

http://yourblogname.blogspot.com/feeds/posts/full

where instead of 'yourblogname' type in the name of your blog. The feed for your old Blogger blog is :

http://yourblogname.blogspot.com/rss.xml or
http://yourblogname.blogspot.com/atom.xml

Step 2. You will have to convert this feed into Javascript code which you can then insert into your webpage so that it displays on your site. There are many RSS-to-Javascript convertors online which you can search out usinf Google. One of these convertors is located at :

http://itde.vccs.edu/rss2js/build.php

Copy and Paste the above link into your browser and press Enter. Copy and paste the link for your blog feed obtained in Step 1 into the "Enter the web address of the RSS Feed" under 'Build your feed'. In Select the options set 'Number of Items to display' as 0 - This will display all posts. In 'Show item descriptions? How much?' set it as 0 to show no descriptions. Set 'Show item posting date?' as No and click Preview to see whether your titles are coming through. If it displays correctly then click 'Generate Javascript'. The program generates Javascript code along with a noscript code for those browsers without Javascript. Copy the entire code.

Step 3. Go to Layout in your blog after logging in to Dashboard. The Page Elements page opens. Click on 'Add Page Element' in the sidebar section. A new popup window opens where choose HTML/Javascript option and paste the code obtained in Step 2 above in the Content box. Click Save Changes.

Refresh cache. View Blog.

You can see an example of this in my right sidebar at the top.

To do this in Classic Blogger just paste the Javascript code in your template in the sidebar section.

Technorati Tags:feed, javascript, previous posts, rss