Here is Yet Another Table of Contents - The YATOC Gadget. It is based on the Google AJAX API. You can use it to Make a Sitemap Page for your blog. See picture below :
You can see the demo at top of posts column in My Gadget Showcase blog. It shows all the post titles in the blog linked to respective posts. It is based on official Google AJAX code. Here are the steps to install it..................INSTALLATION
To install this gadget follow these steps :
1. Login at Blogger.com.
2. Click Layouts link under blog title on Dashboard.
3. Click 'Add Gadget' link on Layout---->Page Elements subtab.
4. In popup window scroll down and click Html/Javascript gadget.
5. Copy all the code below :<!--
Copyright (c) 2008 Google Inc.
You are free to copy and use this sample.
License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
-->
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("gdata", "1.x", { packages : ["blogger"] });
</script>
<script type="text/javascript">
function _run() {
var content = document.getElementById('content');
var bloggerService =
new google.gdata.blogger.BloggerService('com.appspot.interactivesampler');
var feedUri = 'http://MYBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999';
var handleBlogPostFeed = function(postsFeedRoot) {
var posts = postsFeedRoot.feed.getEntries();
var html = '';
html += '<dl>'
+ '<dt><strong>Blog:</strong> '
+ '<a href="'
+ postsFeedRoot.feed.getLink('alternate').getHref()
+ '">'
+ postsFeedRoot.feed.getTitle().getText()
+ '</a></dt>';
html += '<dd><ul>';
for (var i = 0, post; post = posts[i]; i++) {
var postTitle = post.getTitle().getText();
var postURL = post.getHtmlLink().getHref();
html += '<li><a href="' + postURL + '" target="_blank">'
+ postTitle
+ '</a></li>';
}
html += '</ul></dd>';
content.innerHTML = html;
};
var handleError = function(error) {
content.innerHTML = '<pre>' + error + '</pre>';
};
bloggerService.getBlogPostFeed(feedUri, handleBlogPostFeed, handleError);
}
google.setOnLoadCallback(_run);
</script>
<div id="content" style="width:100%;">Loading...</div>
Get This Gadget at <a href="http://www.blogdoctor.me/2009/01/yet-another-table-of-contents-yatoc.html">Yet Another Table of Contents-YATOC.</a>
6. Paste in contents window on HTML gadget popup window.
7. Change 'MYBLOG' in the code to actual subdomain of your blogspot.
8. Save Gadget.
9. View Blog. Wait for page to load completely for gadget to load.
10. Enjoy your sitemap!
Yet Another Table of Contents YATOC. |
Rotating Post Titles Gadget. |
This is a smaller version of the Random Rotating Post Gadget. This shows only the post titles linked to their posts in the blog. It has less height and saves more space. It would look good just below the blog header or above the posts column. See picture below :
It shows all post titles in the blog by rotating through them. If you hover the mouse over it the titles will pause rotating. It is also based on Google AJAX code. Here is how to install it......................INSTALLATION STEPS
1. Login at Blogger.com.
2. Click Layout link on Dashboard under blog title.
3. Click Add Gadget link in sidebar on Layout----->Page Elements tab.
4. Scroll down in popup window and click on Html/Javascript gadget.
5. Copy the code below :<style type="text/css">
.gfg-root {
width : 100%;
height : auto;
position : relative;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 20px;
border: 1px solid #BCCDF0;
}
.gfg-title {
font-size: 20px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.0em;
overflow : hidden;
white-space : nowrap;
text-align : center;
margin-bottom:40px !important;
}
.gfg-title a {
color : #3366cc;
}
.gfg-subtitle {
font-size: 20px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
margin-bottom : 0px;
}
.gfg-subtitle a {
color : #3366cc;
display:none !important;
}
.gfg-entry {
background-color : white;
width : 100%;
height : 6.9em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}
.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
margin-bottom : 5px;
display:none !important;
}
.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
margin-left : 5px;
margin-right : 5px;
}
.gfg-listentry-odd {
background-color : #F6F6F6;
}
.gfg-listentry-even {
}
.gfg-listentry-highlight {
background-image : url('garrow.gif');
background-repeat: no-repeat;
background-position : center left;
}
/*
* FeedControl customizations.
*/
.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 24px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
margin-bottom : 2px;
}
.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #000000;
margin-top : 3px;
}
/*
* Easy way to get horizontal mode, applicable via js options to gadget.
*/
.gfg-horizontal-container {
position : relative;
width:600px;
height:40px;
}
.gfg-horizontal-root {
height : 1.5em;
_height : 100%;
position : relative;
white-space : nowrap;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 13px;
border: 1px solid #AAAAAA;
padding : 5px;
margin-right : 80px;
}
.gfg-horizontal-root .gfg-title {
font-weight : bold;
background-color: #FFFFFF;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
float : left;
padding-left : 10px;
padding-right : 12px;
border-right: 1px solid #AAAAAA;
}
.gfg-horizontal-root .gfg-title a {
color : #444444;
text-decoration : none;
}
.gfg-horizontal-root .gfg-entry {
width : auto;
height : 1.5em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 0px;
margin-left : 0px;
padding-left : 10px;
}
/* To allow correct behavior for overlay */
.gfg-horizontal-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : 100%;
height : 100%;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
}
.gfg-horizontal-root .gfg-list {
display : none;
}
/*
* FeedControl customizations.
*/
.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
.gfg-horizontal-root .gfg-entry .gf-result .gf-author {
display : none;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-title {
color: #0000cc;
margin-right : 3px;
float : left;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
float : left;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
display : block;
color: #AAAAAA;
}
.gfg-branding {
white-space : nowrap;
overflow : hidden;
text-align : left;
position : absolute;
right : 0px;
top : 0px;
width : 80px;
}
.gfg-collapse-open, .gfg-collapse-closed {
background-repeat : no-repeat;
background-position : center;
cursor : pointer;
float : right;
width : 17px;
height : 20px;
}
.gfg-collapse-open {
background-image : url('arrow_open.gif');
}
.gfg-collapse-closed {
background-image : url('arrow_close.gif');
}
.gfg-collapse-href {
float : left;
}
.clearFloat {
clear : both;
}
#feedGadget {
margin-top : 5px;
margin-left: auto;
margin-right: auto;
width : 440px;
font-size: 16px;
color: #9CADD0;
}
#feedGadget2 {
margin-top : 5px !important;
float:left;
width : 440px;
color: #9CADD0;
}
.feedGadget2 {
}
#big {
width : 440px;
font-size: 10px;
}
</style>
<script src="http://www.google.com/jsapi/?key=PASTE AJAX KEY HERE"
type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
<script type="text/javascript">
function showGadget() {
var feeds = [
{title:'BLOG_TITLE',
url:'http://MYBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},
];
new GFdynamicFeedControl(feeds, 'feedGadget',
{numResults : 1000, horizontal : true,
});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="big">
<div id="feedGadget">Loading...</div>
<div id="feedgadget2">Gadget by <a href="http://www.blogdoctor.me" target="_blank">The Blog Doctor</a>.</div></div>
6. Paste it in Contents window of the HTML gadget popup window.
7. Change "BLOG_TITLE" to actual title of blog. Also change "MYBLOG" to actual subdomain of your blogspot. Also sign up for an AJAX key for your blog. Then paste the key where it says "PASTE AJAX KEY HERE".
8. Save the HTML gadget.
9. Click on the HTML gadget in the sidebar and drag it to top of posts column.
10. Click Save button at top of sidebar.
View Blog. Wait for page to load fully before gadget starts to operate.
Enjoy!
Random Rotating Post Gadget with Excerpt. |
If you have a blog with more than 20 posts than this gadget is just the thing your blog needs :
Click on above picture to enlarge it. You can see it above the posts column in this blog when the page is completely loaded. Features :
- 1. Shows one post title at a time.
- 2. Links to the post.
- 3. Shows post excerpt also.
- 4. Every 5 seconds shows a new post.
- 5. Cycles through all the posts in the blog.
- 6. Starts a new cycle at the end of the list.
- 7. Once loaded continues cycling even when not connected to the Internet.
- 8. Uses official Google AJAX technology.
- 9. Can be used on other blogging platforms (not tested).
- 10. Hovering with mouse cursor over the post title halts the rotation till mouse moves off the gadget.
Bloggers with plenty of posts in their blogs face a major problem in showing all of them to the viewers. Some solve this by changing the settings to show all the posts in Main Page. This slows down the loading speed of the blog and can turn away visitors.
The Blog Archive gadget which comes as a default with the standard Blogger Layouts shows only the posts in the blog for the present month. The rest of the posts are hidden and can be seen only by clicking the black arrows to expand the archives. This saves the real estate on the blog page but to the new visitor hides the previous months blog posts.
One can eliminate the dates in the Blog Archive and show all your posts in a blogger gadget but this makes a very long sidebar and if you have posts with little content this may make the blog seem lopsided.
To save space and yet show all posts one by one this gadget uses official Google AJAX API Feed technology and the Dynamic Feed Control. It fetches the post titles and data from your blog and displays it in the gadget. To install this on your blog :
1. Login at Blogger.com.
2. Click Layouts link on Dashboard.
3. Click Add Gadget link in sidebar on Page Elements subtab of Layout tab.
4. In popup window scroll down and click Html/Javascript gadget.
5. In Contents window copy the code below and paste after modifying it :
<style type="text/css">
.gfg-root {
width : 100%;
height : auto;
position : relative;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 20px;
border: 1px solid #BCCDF0;
}
.gfg-title {
font-size: 24px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
}
.gfg-title a {
color : #3366cc;
}
.gfg-subtitle {
font-size: 20px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
margin-bottom : 0px;
}
.gfg-subtitle a {
color : #3366cc;
display:none !important;
}
.gfg-entry {
background-color : white;
width : 100%;
height : 6.9em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}
.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
margin-bottom : 5px;
display:none !important;
}
.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
margin-left : 5px;
margin-right : 5px;
}
.gfg-listentry-odd {
background-color : #F6F6F6;
}
.gfg-listentry-even {
}
.gfg-listentry-highlight {
background-image : url('garrow.gif');
background-repeat: no-repeat;
background-position : center left;
}
/*
* FeedControl customizations.
*/
.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 24px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
margin-bottom : 2px;
}
.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #000000;
margin-top : 3px;
}
/*
* Easy way to get horizontal mode, applicable via js options to gadget.
*/
.gfg-horizontal-container {
position : relative;
}
.gfg-horizontal-root {
height : 1.5em;
_height : 100%;
position : relative;
white-space : nowrap;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 13px;
border: 1px solid #AAAAAA;
padding : 5px;
margin-right : 80px;
}
.gfg-horizontal-root .gfg-title {
font-weight : bold;
background-color: #FFFFFF;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
float : left;
padding-left : 10px;
padding-right : 12px;
border-right: 1px solid #AAAAAA;
}
.gfg-horizontal-root .gfg-title a {
color : #444444;
text-decoration : none;
}
.gfg-horizontal-root .gfg-entry {
width : auto;
height : 1.5em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 0px;
margin-left : 0px;
padding-left : 10px;
}
/* To allow correct behavior for overlay */
.gfg-horizontal-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : 100%;
height : 100%;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
}
.gfg-horizontal-root .gfg-list {
display : none;
}
/*
* FeedControl customizations.
*/
.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
.gfg-horizontal-root .gfg-entry .gf-result .gf-author {
display : none;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-title {
color: #0000cc;
margin-right : 3px;
float : left;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
float : left;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
display : block;
color: #AAAAAA;
}
.gfg-branding {
white-space : nowrap;
overflow : hidden;
text-align : left;
position : absolute;
right : 0px;
top : 0px;
width : 80px;
}
.gfg-collapse-open, .gfg-collapse-closed {
background-repeat : no-repeat;
background-position : center;
cursor : pointer;
float : right;
width : 17px;
height : 20px;
}
.gfg-collapse-open {
background-image : url('arrow_open.gif');
}
.gfg-collapse-closed {
background-image : url('arrow_close.gif');
}
.gfg-collapse-href {
float : left;
}
.clearFloat {
clear : both;
}
body {
background-color: white;
color: black;
font-family: Arial;
font-size: small;
margin: 0;
}
#feedGadget {
margin-top : 5px;
margin-left: auto;
margin-right: auto;
width : 440px;
font-size: 16px;
color: #9CADD0;
}
</style>
<script src="http://www.google.com/jsapi/?key=PUT_AJAX_KEY_HERE"
type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
<script type="text/javascript">
function showGadget() {
var feeds = [
{title:'title',
url:'http://MYBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},
];
new GFdynamicFeedControl(feeds, 'feedGadget',
{numResults : 1000, stacked : true,
title: "BLOG_TITLE ~ Random Posts."});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Loading...</div>
<div id="feedGadget">Gadget by <a href="http://www.blogdoctor.me" target="_blank">The Blog Doctor</a>.</div>
In the above code make changes in the following parts :
<script type="text/javascript">
function showGadget() {
var feeds = [
{title:'title',
url:'http://MYBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},
];
new GFdynamicFeedControl(feeds, 'feedGadget',
{numResults : 1000, stacked : true,
title: "BLOG_TITLE ~ Random Posts."});
}
Change "MYBLOG" to actual blog subdomain and "BLOG_TITLE" to actual title of your blog. Then paste the modified code in the Html gadget and save the gadget.
Get your AJAX API key and put it in above code instead of 'PUT_AJAX_KEY_HERE'.
Lastly click and drag the HTML gadget from the sidebar to above the posts column. See picture below.

This is because the width of the gadget is more suited for the posts column than the sidebar. Save the Layout. View Blog.
If you do not want to save space you can show the whole Table of Contents with post preview.












