Summarize and TOC Blogger Widget
The following widget uses javascript to automatically summarize an article and provide a table of contents when not summarized. During summarization the widget will remove all HTML tags and display by default up to 255 characters or a new line (whichever comes first). When creating a table of contents the widget will search for header tags, add the appropriate anchors, and generate a table of contents with links to the headers in the article.
Requirements
- Blogger (Beta) Blog
- Using the layouts templates
- Javascript
- Use H1 - H6 to denote section headings
Usage
Summarize
By default the summarize widget will display up to 255 characters or a new line (whichever comes first). To adjust the amount of characters shown in the summary, change the summarize_length variable to the desired length. The summarize_length variable can be accessed through the widget settings screen.Table of Contents (TOC)
The table of contents is displayed only if there are heading tags within the article. By default headings H1 - H3 are used by blogger to display the article title, date, and comments headings. So, I use H4 - H6 in articles to make things a little easier to read; however H1 - H3 could be use too depending on the style you want.To change the way the table of contents is displayed edit the .tocH* CSS classes found within the widget settings.
Examples
The summarize and table of contents widget was built for use on John's Computer Journal. You can take a look around and see the widget doing its thing.Summarize
Check out a non-article page for an example of summarize in action. The index (main) and search pages will summarize all post content.Table of Contents
Check out the top of this page for an example of the table of contents in action. The table of contents at the top of this page has been dynamically created by the widget's javascript code without having to be hardcoded into the page.Install
Limitations
- Since the summarize function removes HTML tags when summarizing, images and formatted text will not appear. To ensure an image shows up for a post when its summarized, use an img tag within the title of the post.
- The summarize function will mess up google's beta translations.
- There will be a delay until the page has completely loaded before the summarize or toc functions load and display the results. The delay can be fixed by ensuring the widget is placed after the posts and removing window.onload and just calling the functions directly.
- The summarize function fails to engage when older posts are viewed through blogger's pagination.
References
No comments:
Post a Comment