The Blog Doctor.

JSON Two Click Blog Archives Gadget for Bloggers.

Yet Another Table of Contents YATOC.

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!

Make Sitemap Page in Blogger.

Table of Contents Autoscroll Gadget.

Here is another gadget for those who wish to display all their posts in as little space as possible. The Random Rotating Post Gadget shows only one post at a time. The Table of Contents Autoscroll gadget shows all posts in you blog scrolling automatically in a small place. You can see it in action above the posts in Tips for Bloggers. (Wait for page to load fully) See picture below :

The Table of Contents is from Beautifulbeta. To save space I have added autoscrolling function to it. Features of the gadget are : .....................

FEATURES

1. Shows all Posts in blog.
2. Scrolls the posts list upwards automatically.
3. Mouseover will pause the autoscrolling.
4. Saves space.

INSTALLATION

To install it in your blog follow these steps :

1. Login at Blogger.com.

2. Click Layouts link on Dashboard.

3. Click 'Add Gadget' link in sidebar on Layout>>Page Elements subtab.

4. In popup window scroll down and click Html Javascript gadget.

5. In Contents paste the following code :

<script type="text/javascript">
// <!--
var speed = 2;
function init(){
  var el = document.getElementById("marquee_replacement");
  el.style.overflow = 'hidden';
  scrollFromBottom();
}
var go = 0;
function scrollFromBottom(){
  var el = document.getElementById("marquee_replacement");
  if(el.scrollTop >= el.scrollHeight-150){
    el.scrollTop = 0;
  };
  el.scrollTop = el.scrollTop + speed;
  if(go == 0){
    setTimeout("scrollFromBottom()",50);
  };
}
function stop(){
  go = 1;
}
function startit(){
  go = 0;
  scrollFromBottom();
}
// -->
</script>
<script style="text/javascript" src="http://blogging-tips-gadget.googlecode.com/files/TableOfContentsJS.js"></script>
<script src="http://MYBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>
<script type="text/javascript">showToc();</script>
<style type="text/css">
#marquee_replacement{
 border:1px solid #000;
 width:100%;
 height:250px;
 overflow:auto;
 background:#fff;
}
#marquee_replacement p.spacer{
 height:150px;
}
</style>
<div id="marquee_replacement" onmouseover="stop();" onmouseout="startit();">
<div id="toc">
</div></div><div id="feedGadget">Gadget by <a href="http://www.blogdoctor.me" target="_blank">The Blog Doctor</a>.</div>

In above code change "MYBLOG" to the url (subdomain) of your blogspot and save.

Enjoy!

Table of Contents with Preview for Blogger.

A Table of Contents is essential for each blog so that readers can look at the post titles and decide which post to visit. The Blog Archives widget can be configured to show all post titles but it has the dates also cluttering up the view. Then there are the arrows collapsing past months so that all post titles are not seen at once.

Classic templates have a Previous Posts section which shows only the previous ten posts. Here also all the blog posts cannot be seen.

One method to display post titles without dates is by using blog feeds. However this shows all posts from one blog only! What if you have multiple blogs and wish to show posts from all of them in one place? See picture below :

This method uses the AJAX Dynamic Feed Control from Google to show any number of posts from any number of your blogs in one place and cycles through each post title to show a preview at the top.........

TOC for ONE BLOG

First login at Blogger.com and click Settings link on Dashboard. Then click Site Feed subtab. Click drop down arrow for Allow Blog Feeds and choose the Short option. Save Settings.

Next click Layout tab and on the Page Elements subtab click the Add Page Elements link. Choose Html/Javascript option in popup window. In Contents paste the following code :

<!-- ++Begin Dynamic Feed Wizard Generated Code++ -->
<!--
// Created with a Google AJAX Search and Feed Wizard
// http://code.google.com/apis/ajaxsearch/wizards.html
-->

<!--
// The Following div element will end up holding the actual feed control.
// You can place this anywhere on your page.
-->
<div id="feed-control">
  <span style="margin:10px;padding:4px;">Loading...</span>
</div>

<!-- Google Ajax Api
-->
<script src="http://www.google.com/jsapi?key=<<INSERT KEY>>"
type="text/javascript"></script>

<!-- Dynamic Feed Control and Stylesheet -->
<script src="http://simblogg.googlepages.com/gfdynamicfeedcontrol.js"
type="text/javascript"></script>
<style type="text/css">
  @import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");
</style>

<script type="text/javascript">
  function LoadDynamicFeedControl() {
    var feeds = [
{title: 'Table of Contents',
 url: 'http://MYBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'
}];
    var options = {
      stacked : true,
      horizontal : false,
      title : "BLOG_TITLE."
    }

    new GFdynamicFeedControl(feeds, 'feed-control', options);
  }
  // Load the feeds API and set the onload callback.
  google.load('feeds', '1');
  google.setOnLoadCallback(LoadDynamicFeedControl);
</script>
Widget by <a href="http://betabloggerfordummies.blogspot.com">Betabloggerfordummies.</a>
<!-- ++End Dynamic Feed Control Wizard Generated Code++ -->

Change the code in green CAPS ('MYBLOG' and 'BLOG_TITLE') to your blog name and the title of your blog.

Also sign up for your Google API Key and put it instead of "<<INSERT KEY>>" in the above code.

Then save the page element. View Blog and wait for the page element to load. See Picture below :

You can see a live demo at top of the posts column on Widgetry blog.

The Table of Contents Template.

Post a Book in the New Blogger.

Add a Table of Contents to Main Blog Posts Column.

How to Change Post Order.

To change the order of your posts in Beta Blogger..............

remenber that posts are ordered according to "LATEST POSTED FIRST ON PAGE" rule. Hence the newest posts are first with earlier posts lower down in the order. The first post you made when you created the blog is the last on the page.

Your blog consists of a Main Page and Post Pages. The Main Page contains the number of posts you have set in Settings---->Formatting---->Show __ Posts on Main Page. The rest of the posts are shown as links in the Blog Archive widget in the sidebar. The posts on the Main Page also have their links in the Blog Archive widget. Each Post Page contains only one post.

To change this order login to Dashboard. Click on Posts link after 'Manage:' under name of your blog. You will see a list of all your posts with links to Edit, View or Delete them. Click on Edit link of the post you want to change the date of. The Posts Editor opens with its two modes : Edit HTML and Compose. The second mode is present only if you have enabled it in Settings as described in Set Settings Part1. The bottom frame of the Posts Editor contains a link 'Post Options'. Click on it to expand the frame as shown in above image. (Click on image to view it better). In the expanded frame you can change the Posts Date and time.

STICKY POST AT THE TOP

If you want this post to be the first post always in this blog then set the date to any time as far in the future as it will allow it to be set. This is because once that day arrives and you post more posts this post will start migrating downwards like the rest. Till then it will remain a "sticky" post at the top of your blog.

This is frequently used by bloggers who wish to post a book with chapters and all in their blog and want the first post to be a "Table of Contents". To see an example see here. Also you should have Post Pages enabled by going to Settings--->Archiving.

HIDE POSTS

If you have made a post like a 'Privacy Policy' post which you do not want to show on the Main Page backdate it. Then it will appear as a link in the Blog Archive widget.

Technorati Tags:change date, posts, table of contents