More Than Cat Diaries: Publishing With Weblogs

Notes: Blogger Presenter

• For this demo, I have uploaded all of the graphics for the slides and style sheets to my own web server. Since this is not always an available option, there is no reason why the images could not be referenced with &ltg'img src="....."gt; tags pointing to files with URLs on Flickr. For example, the opening slide image is on my flickr site and could be inserted into my slides as HTML pointing to flickr:

  <img src="http://photos13.flickr.com/17881017_6150474c08_o.jpg" 
    width="600" height="450" alt="cat-diaries-cover" />
  

• The "Blogger Box" refers to the layout and display of 99% of Blogger sites- a main page withe the last N entries, a sidebar full of links, and archives organized by date. There is no reason why Blogger could not be used to publish a series of articles not strictly organized by date, and in fact, in this presentation, I have completely subverted the date order through my own navigation (the order of the slides is not the order in which they were written.
• In fact, the front page is just static content, and is found in the <MainPage>.....</MainPage> tags (content displayed only on the main or front page)
• In fact the settings for this blog have the setting for archives to "None". They have no meaning here.
• The drop down navigation menu and the button navigation were the most challenging things to deal with. My first attempts were to use Blogger's PreviousEntries tag, but the problem is that it only works for the front page to display all previous pages. If I created 5 slides on May 20, 2005, and 5 more on June 2, 2005... the June entries would never appear on the March pages since they are not "previous". I also tried an approach of creating each slide as an archive, but ran into the same problems of date order. The answer was spawned by the Blogger Help page for "How Do I Change the Order of the Archive Links" where the Blogger tags are used to populate a JavaScript array, and then JavaSCript is used ti dynamically build a menu. For this presentation, I manually loaded the slides into an array in the HEAD of the template. Rather than manually setting the array indices, I use an incrementing counter; this way I can easily change the order of the show by moving two line together:

  <script type="text/Javascript"> 
  
  // The base URL for the blogger site, no trailing slash
  var myurl = 'http://cat-diaries.blogspot.com';
  
  // Build an array for navigation menus, because of Blogger's limited tags
  // this needs to be hand edited
  var myitems = new Array(); 
  
  // This is a counter so we do not have to manually edit array indices
  ic=-1;
  
  // A slide can be moved in order by just cutting and pasting the two lines of code
  
  ic++;
  myitems[ic] = new Array('/', 'Splash Screen'); 
  
  ic++;
  myitems[ic] = new Array('/2005/05/online-diaries.html', 'Online Diaries');
  
  :
  :
  
  

• Where we need the menu and buttons, we can now use this array to generate the form elements. There is a little upfront math to determine if the URL for the current page document.location.href matches the URL for the menu item being built. We kee track of the array index for the current page sel so we can also set up the back and next buttons. (the notes button is explained below).

  <form method="post" name="navmenu">
  <select name="items" onchange="document.location.href= myurl+this.options[this.selectedIndex].value;" class="nav_form">
  
  <script type="text/javascript"> 
  var sel = 0;
  var mytitle = '';
  
  for (var i=0;i<myitems.length;i++) {
   // test for current URL in view, store for now in variable
   if (myurl+myitems[i][0] == document.location.href) {
    sel = i
   }
  
   // write menu item
   document.write('<option value="' + myitems[i][0] +  '">' 
       + myitems[i][1] + '</option>');
  } 
  
  if (sel == 0) {
   myprev = myitems.length-1;
  } else {
   myprev = sel -1;
  }
  
  if (sel == myitems.length-1) {
   mynext = 0;
  } else {
   mynext = sel + 1;
  }
  
  </script> 
  </select>
  <input type="button" value="«" onClick="document.location.href=myurl+myitems[myprev][0]" class="nav_form">
  <input type="button" value="»" onClick="document.location.href=myurl+myitems[mynext][0]" class="nav_form">
  <ItemPage>
  <input type="button" value="+/- notes" onClick="expandcollapse('ss_notes')"  class="nav_form">
  </ItemPage>
  </form>
  

• The other trick was setting up the show/hide notes button to toggle the visibility of the notes and comments below the slide. This was achieved by a method borrowed from the Blogger article on "How can I make show/hide links for my posts?". A slide page content is set up as two CSS divs with classes that can toggle the visibility:

   <div id="ss_show" class="show_it" >

  contains the main slide show content (top of the screen) and is set always with a visibility of "on" controlled by the class "show_it":

  .show_it {
   display:block;
  }
  

  while the notes section is set with its own div and a class set to hide it on initial display:

   <div id="ss_notes" class="hide_it" >

  set invisible by its class:

  .hide_it {
   display:none;
  }
  

  The button merely calls a JavaScript function than can toggle the class of a given div:

  // function for showing/hiding the CSS div with the notes
  function expandcollapse (part) { 
     whichpart = document.getElementById(part);  
     if (whichpart.className=="show_it") { 
        whichpart.className="hide_it"; 
     } 
     else { 
        whichpart.className="show_it"; 
     } 
  } 
  
  

  This set up with two divs and the need to keep the comments portion inside the notes div creates a bit of havoc when publishing through the Blogger editor as it generates an error message because it finds a missing opening <div>
• And here it is, what you may really be looking for-- a text file containing the entire blogger template that powers this presentation:http://mcli.cogdogblog.com/show/nmc05/docs/cat-diaries.template
• Finally, editing with ecto greatly sped up the publishing process.