Easy HTML Tricks for Blogging

Google Analytics Conversion Funnel

Yesterday I promised to post some more about Google Analytics. Well, here it is. It's about the Conversion Funnel.
I
set it up last week to see how many of my visitors reach the Install
Recent Posts Widget-button on my Widget Download and Installation Page.
So, after reaching my Blog (by Google, by reference, or otherwise) at
the Recent Post Widget Updated post, my visitor has to navigate to the
Downloads page, and then has to click the button. Those 3 steps are
called a Funnel, and a visitor who reaches the destination is called a
Conversion.

Let's take a look at my Funnel:

As
you can see, the first step of the Funnel is my post called "Recent
Posts Widget Updated". There have been 75 visits to this post. People
reach this post through Entrance Points, displayed at the left. From
this 75 visitors 52% move on through the funnel to the downloads-page,
and 48% leave to another blog-page (the Exit Points, to the right). In
the end, only 16% of the visitors reach the end of the Funnel, and click
the Install-button.

Setting up a Funnel is easy, you just have
to enter a list of all the page urls that are part of the funnel. The
Funnel information is very usefull if you have e-commerce goals, and
want to know how people are reaching your payments-page (browsing the
products, adding stuff to their shopping-cart, ordering, paying is a
typical e-commerce funnel), but as a blogger you can use it to track how
people reach your most valuable information.

You can also
monitor clicks on external links, such as my Install-button, by adding
some extra code to the link. This is clearly explained in the
help-section of Google Analytics.

Google Maps Tutorial

For some time now I have been looking into Google Maps, just to learn how to add a simple map to my Blog. Wouldn't you like to learn that as well? Okay, here is a tutorial!
In
this post you will find a Google Map that does not give the exact
location of Beautiful Beta Headquarters, but it would give them if I
only would be so kind to provide the exact GPS location. So read on if
you want to know how you could add this map to your Blog.

Before you set out, you have to know a few things, just to understand what is happening.

To
work with Google Maps, Google has provided a lot of standard javascript
functions. Those functions are used to draw the map, add markers, and
add mapcontrols (zooming, panning, and so on). All these javascript
functions together are called the Google Maps API: the Application
Programmers Interface. Those functions give us an interface to work with
the maps.

Second, you will need a key to work with Google Maps.
This key is provided for a certain url. For each blog or website you
have, you will need a key. You can get a key here. This key is a very long row of characters. Don't try to type it over, just copy and paste it into the code.

You have to add some javascript code to the head of your template. Insert it just above the </head>-tag.

The
map itself will be drawn inside a <div id="map">. You can put
this div anywhere, in a post, in your sidebar, or anywhere else.

So, here we go.

Step 1: back up your template.

Step 2: add the following javascript-code to your template head.


<script src='http://maps.google.com/maps?
file=api&v=2&key=YOUR_KEY_HERE' type='text/javascript'/>
<script src='http://www.google.com/uds/api?file=uds.js&v=1.0&source=uds-
msw&key=YOUR_KEY_HERE' type='text/javascript'/>
<script type='text/javascript'>
function LoadMap() {
var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(YOUR_LONGITUDE, YOUR_LATITUDE), 3);
var point = new GPoint(YOUR_LONGITUDE, YOUR_LATITUDE);
var markertext = "YOUR_MARKER_TEXT";
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml
(markertext);});
map.addOverlay(marker);
}
GSearch.setOnLoadCallback(LoadMap);
</script>

In this code you have to insert your own data on some places.
YOUR_KEY_HERE: paste your Google Maps Key here.
YOUR_LONGITUDE,
YOUR_LATITUDE: enter your longitude and lattitude here, as
GPS-coordinates. Find them with Google Earth, with your GPS-navigator,
or with a Geocoding-application that converts addresses to
GPS-coordinates.
YOUR_MARKER_TEXT: enter some text for the marker
balloon. You can use html here, but you have to escape double quotes by
putting a back-sledge (\) in front of it, and you have to change all
< by < and so on.

If you save the template, and switch
to another screen, you will receive a warning that your API-key is not
valid. This is caused by the fact that you requested the key for your
blog's url, and editing the template is done at the beta.blogger.com
url. You can ignore this warning.

Step 3: Place the map on your blog

Now add the following div to your sidebar, or to a post.
< div id="map" style="width:360px; height:260px; border:solid 1px #000000;">Loading map...</div>

Save and view your blog.

Creating a Widget Installer

Several readers asked me to write a
tutorial on how to make a one-click widget installer, like the one I
made for installing the Recent Posts Widget. Well, that seemed a good
idea, so here it is. The purpose is to make you understand how it works,
so that you can create your own. Disclaimer: Brainless copy-paste won't
work.

Step 1: Create a Widget
If you want to create a Widget
Installer, obviously the first thing you need to do is to create the
widget itself. A real one-click-installable widget should contain all
the necessary code. So if there is javascript-code that need to be
installed, try to embed it inside the widget.
Just for the fun of it, let's create a Random Quote Widget (thanks Annie).
Open
your Blog's template, add a HTML/Javascript page-element, set the title
to "Random Quote", and add the following javascript to its content:


<script language="JavaScript">
//store the quotations in arrays
quotes = new Array(6);
quotes[0] = "So many cats, so few recipes.";
quotes[1] = "Use the best: Linux for servers, Mac for graphics, Windows for Solitaire.";
quotes[2] = "That's not a haircut. That's a cry for help.";
quotes[3] = "The last thing I want to do is hurt you. But it's still on the list.";
quotes[4] = "Some days it's just not worth gnawing through the leather straps.";
quotes[5] = "Doing for blogging what Ghengis Khan did for social work.";
//calculate a random index
index = Math.floor(Math.random() * quotes.length);
//display the quotation
document.write("\n");
document.write(quotes[index]);
//done
</script>

This
code is a javascript script. What it does is easy to understand. It
creates a data structure called an array, with six elements. The
elements are number 0 through 5. Then it calculates a random number from
0 to 5, and displays the array-element with this index. This is just
plain javascript.
Save the widget, and see how it works. Every time you reload your page, a new quote will appear.

Step 2: Understand how widgets can be added to Blogger
Now that you have created your widget, you have to learn how you can add a widget to Blogger. That is explained in the Blogger Help pages.
What you have to do is that you have to create a FORM. A form is a
HTML-element, and can have input boxes, radio-buttons, check-boxes,
buttons, and so on.

Step 3: Create a Widget Install Button
Now we will create our own Install Button using a form. Our form has to look like this:

<br /><form method="post" action="http://beta.blogger.com/add-widget"><br />  <input name="widget.title" style="display:none" value="Random Quote"/><br />  <textarea name="widget.content" style="display:none;"><br />     &lt;script language="JavaScript"&gt;<br />       //store the quotations in arrays<br />       quotes = new Array(6);<br />       quotes[0] = "So many cats, so few recipes.";<br />       quotes[1] = "Use the best: Linux for servers, Mac for graphics, Windows for Solitaire.";<br />       quotes[2] = "That's not a haircut. That's a cry for help.";<br />       quotes[3] = "The last thing I want to do is hurt you. But it's still on the list.";<br />       quotes[4] = "Some days it's just not worth gnawing through the leather straps.";<br />       quotes[5] = "Doing for blogging what Ghengis Khan did for social work.";<br />       //calculate a random index<br />       index = Math.floor(Math.random() * quotes.length);<br />       //display the quotation<br />       document.write("\n");<br />       document.write(quotes[index]);<br />       //done<br />       &lt;/script&gt;<br />    </textarea><br />   <input type="submit" name="go" value="Add widget to your blog"/><br /></form><br />

Let
us take a closer look at this form. As usual with HTML, there is an
opening-tag <form> and a closing-tag </form>. The content of
the form has to be posted to the url
http://beta.blogger.com/add-widget. This information is added to the
form opening tag. The form has to contain 3 elements: the widget title,
the widget content, and a button to submit the form to Blogger. The
widget title is set using an Input Field in the form. The name of this
input field has to be set to "widget.title", so that Blogger knows it is
the widget title. The value of this field can be anything you like. The
value is displayed on your Blog as the widget's title. In this example I
set it to "Random Quote", but it could also be "A Very Deep Thought".
The
widget content is the javascript-code from step 1. We put this
javascript inside a textarea-field. The textarea has an opening tag and a
closing tag. Put the javascript between these two tags. Inside this
form, we have to make sure that the javascript is handled as text, and
not as javascript. Therefore, replace all < with < and replace
all > with >. The name of the textarea is set to
"widget.content" so that Blogger knows that this field contains the
widget content. The style of both the title input and the textarea is
set to display:none, so that the user doesn't see them (but don't worry,
it is there all the same).
Finally, there is an input button, the value is displayed as the button text.
If
you copy this form and paste it to the end of the widget-code that is
already in your sidebar, you will get a button below the widget, and
clicking the button will install the widget to your visitor's blog.

Customizable Widget Installer Tutorial

Some of you were not completely satisfied with my last tutorial
on how to create a simple widget installer. You wanted to learn more.
You wanted to learn about using the JSON-feeds, and above all you wanted
to learn how to make the widget customizable.

Well, I hope you
will like this tutorial. I will teach you how to make a customizable
Table Of Contents Widget, and how to create an installer for this
widget.

For the purpose of this tutorial it will be an extremely
simple widget. If we make it too sophisticated, the code will be more
complicated and less easy to understand. Our purpose is to take you by
the hand and make you understand everything that happens. You can work
from there to develop this widget into something useful for yourself.

What the TOC widget has to do
The
TOC-widget will get the posts-feed from your blog, with a maximum of
100 posts. It will display a list of the posttitles. You can customize 3
settings: the widget title, the number of posts to display, and whether
or not to sort the posts alphabetically.

What the Installer has to do
We
will create an Installer. The Installer is a HTML-document with a form
that contains a few fields and a few buttons and some javascript. It is
best to host this installer from a webserver where you can upload
HTML-pages to. I experienced big trouble with the Blogger page elements
trying to embed the installer directly into the sidebar: Blogger messes
everything up in a horrific way. So what we will do is add a simple
button to the blog, and this button will invoke the widget installer. A
visitor of your blog can then enter his/her data into the fields, push
the Install-button, and the widget will be installed to his/her blog.

Okay, how do I get this done?
Step 1: Create a javascript function that retrieves a JSON-feed from Blogger
Step 2: Define javascript variables for the number of posts to display and for sorting
Step 3: Create a javascript function for displaying the table of contents
Step 4: Combine steps 1 to 3 into a Table Of Contents Widget and add it to your Blog
Step 5: Check that everything works as it should
Step 6: Create an input form for the Widget Installer
Step 7: Create a javascript function that builds the widget
Step 8: Combine steps 6 and 7 into a Widget Installer
Step 9: Upload the Installer and add a button to your Blog
Step 10: Test and debug the Installer

Well, it's not as difficult as it looks, and not as easy as you hope. Somewhere in between.

Step 1: Retrieving the JSON-feed from Blogger.
To retrieve the JSON-feed from Blogger, we will use the following line of javascript:


<script src="http://YOURBLOGNAME.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=100&callback=showtoc"></script>

Replace
YOURBLOGNAME with the name of your blog. This line of javascript asks
Blogger to return the feed of your posts in JSON-format. JSON means:
JavaScript Object Notation. The feed is returned as a set of Javascript
Objects, and that makes it easy to handle for us in step 3. We also tell
Blogger to return a maximum of 100 results (Blogger won't allow for
more than 100, and the default size of feeds is 25). And finally we tell
Blogger to send the JSON-feed to a Javascript function called showtoc.
We'll write this function in step 3.

Step 2: Create variables for the Table of Contents
We will create 2 Javascript variables, using the following code:

<script style="text/javascript"><br />   var numposts = 20;<br />   var sortposts = true;<br /></script>

The
variable numposts is the number of posts you want to show in the Table
of Contents. If you set it to 20, the 20 most recent posts will be
displayed.
The variable sortpost is a boolean variable, and can be
true or false. If it is true, the posttitles will be sorted. If it is
false, the posts will be in chronological order, from newest to oldest.
For your information: these variables make the widget customizable, as we will see later.

Step 3: Create a javascript function for displaying the table of contents.
Now
we have to write the javascript function showtoc that we met in step 1.
It takes a JSON-object (our feed) as input, rips the posttitles from
it, and stores them in an array. If you don't know what an array is:
it's a stack of data. We push the posttitles on this stack, and then we
can sort them and display them on the screen. Take a look at the code, I
have added comments, so even if you are new to Javascript you can get
an idea of what is happening.

<br /><script style="text/javascript><br />function showtoc(json) {<br />   // create an array to hold all posttitles<br />   var toc = new Array();<br />   // get the number of entries that are in the feed<br />   // if there are more entries in the feed than we want to show, take the number we want to show<br />   var numentries = json.feed.entry.length;<br />   if (numentries > numposts) numentries = numposts;<br />   // main loop gets all the entries from the feed<br />   for (var i = 0; i < numentries; i++) {<br />      // if current value of i is bigger than number of entries in feed, then stop the loop<br />      if (i == json.feed.entry.length) break;<br />      // get the entry from the feed<br />      var entry = json.feed.entry[i];<br />      // get the posttitle from the entry<br />      var posttitle = entry.title.$t;<br />      // add the post to the array<br />      toc.push(posttitle);<br />   }<br />   // sort the array if needed<br />   if (sortposts) toc.sort();<br />   // write all posts to the page<br />   for (var i = 0; i < numentries; i++)<br />      document.write('<br/>' + toc[i] + '<br/>');<br />}<br /></script><br />

Step 4: Create the Widget
Open
Notepad or any texteditor, and cut and paste the code from steps 3, 2
and 1 (in that order) to Notepad, and save the file to your desktop
(better be safe than sorry). The Widget code is this:

<br /><script style="text/javascript><br />function showtoc(json) {<br />   // create an array to hold all posttitles<br />   var toc = new Array();<br />   // get the number of entries that are in the feed<br />   // if there are more entries in the feed than we want to show, take the number we want to show<br />   var numentries = json.feed.entry.length;<br />   if (numentries > numposts) numentries = numposts;<br />   // main loop gets all the entries from the feed<br />   for (var i = 0; i < numentries; i++) {<br />      // if current value of i is bigger than number of entries in feed, then stop the loop<br />      if (i == json.feed.entry.length) break;<br />      // get the entry from the feed<br />      var entry = json.feed.entry[i];<br />      // get the posttitle from the entry<br />      var posttitle = entry.title.$t;<br />      // add the post to the array<br />      toc.push(posttitle);<br />   }<br />   // sort the array if needed<br />   if (sortposts) toc.sort();<br />   // write all posts to the page<br />   for (var i = 0; i < numentries; i++)<br />      document.write('<br/>' + toc[i] + '<br/>');<br />}<br /></script><br /><script style="text/javascript"><br />   var numposts = 20;<br />   var sortposts = true;<br /></script><br /><script src="http://YOURBLOGNAME.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=100&callback=showtoc"></script><br />

Now,
go to your Blog Layout and open the Page Elements tab, click Add a Page
Element and select a HTML/Javascript Element. Copy the Widget code from
Notepad and paste it into the Page Element, and Save.
Probably
Blogger will mess things up: it did so when I pasted the code into the
Page Element. So you probably have to correct the code manually. If you
have done so, save again and view your Blog. You will see the 20 most
recent posttitles sorted alphabetically. Your Widget works!

Step 5: Check that everything works as it should.
Now
go and play with the widget. Set numposts to 10, or to 50 if you like
and see what happens. Also switch sortposts from true to false and back
again. Just make sure that you understand how the widget works.
If you reached this step, your widget should work fine. I tested it on my testblog, and it executes fine.

Step 6: Create an input form for the widget installer.
Now
that our widget is ready, we will start with our widget installer. For
this installer we need a HTML-form with several fields and buttons. We
need an input field for the Widget Title, so that the user can customize
his/her own widget title. The Widget Title is a required field for
adding the widget to Blogger. We'll also need an input field for the
user's blogname. This is needed so that the user will get his/her own
feed, and not yours. We also need an input field for the number of posts
that the user wants to display. And a checkbox that has to be checked
if the user wants his/her table of contents to be sorted. Finally there
are the buttons: Reset to clear all fields, Customize to create the
customized widgetcode, and Install to install the customized widget to
the user's blog.
There is also a textarea in the form, that is hidden
from view. This textarea will be used for storing the customized
widgetcode. This textarea is required for passing the widget code to
Blogger.
Here we go with the code:

<br /><form method="POST" action="http://beta.blogger.com/add-widget" target="_blank"><br /><span style="width:130px;">Widget Title</span>: <input type="text" size=30 name="widget.title" value="Table of Contents"/><br/><br /><span style="width:130px;">Blog url</span>: http://<input type="text" size=10 name="iblogurl" value="yourblogname"/>.blogspot.com<br/><br /><span style="width:130px;">Number of posts</span>: <input type="text" size=3 name="inumposts" value="20"/><br/><br /><span style="width:130px;">Sort posts</span>: <input type="checkbox" name="isortposts" checked/><br/><br /><br/><br /><input type="button" value="Customize" onclick="javascript:customize();"><br /><input type="button" value="Reset" onclick="javascript:defaultvalues();"><br /><input type="submit" disabled name="go" value="Install Widget"/><br /><br/><br /><textarea name="widget.content" style="display:none"></textarea><br /></form><br />

Now
just for the fun of it: wrap this form inside a HTML-document (using
Notepad), save it to your desktop, and view it in your browser. You will
have a nice (but not-working) preview of your widget installer. You can
enter data into the fields, you can click buttons, but nothing will
happen - yet. Wrapping it inside HTML? Oh, yes, that goes like this:

<br /><html><br /><body><br /><form method="POST" action="http://beta.blogger.com/add-widget" target="_blank"><br /><span style="width:130px;">Widget Title</span>: <input type="text" size=30 name="widget.title" value="Table of Contents"/><br/><br /><span style="width:130px;">Blog url</span>: http://<input type="text" size=10 name="iblogurl" value="yourblogname"/>.blogspot.com<br/><br /><span style="width:130px;">Number of posts</span>: <input type="text" size=3 name="inumposts" value="20"/><br/><br /><span style="width:130px;">Sort posts</span>: <input type="checkbox" name="isortposts" checked/><br/><br /><br/><br /><input type="button" value="Customize" onclick="javascript:customize();"><br /><input type="button" value="Reset" onclick="javascript:defaultvalues();"><br /><input type="submit" disabled name="go" value="Install Widget"/><br /><br/><br /><textarea name="widget.content" style="display:none"></textarea><br /></form><br /></body><br /></html><br />

Now let's move on to step 7.

Step 7: Creating javascript functions to create the customized widget.
We
have to write 2 javascript functions that respond to buttons being
pressed. One to reset the form to its default values, and one to create
the widget code. Let's start with a function for resetting the form
field. The function defaultvalues() will set the form to its default
values when the Reset button is clicked. Here is the code:

<br />function defaultvalues() {<br />   document.getElementsByName("widget.title")[0].value = "Table of Contents";<br />   document.getElementsByName("iblogurl")[0].value = "yourblogname";<br />   document.getElementsByName("inumposts")[0].value = "20";<br />   document.getElementsByName("isortposts")[0].checked = true;<br />   document.getElementsByName("go")[0].disabled = true;<br />}<br />

This
function looks up the formfields by there name, and sets their
contents. The last line greys out the Install-button, so that we can
only click it if we have customized the widget settings.
The second
function we will create is the function customize(), that is invoked
when the user clicks the Customize-button. The code of this function is:

<br />function customize() {<br />   // Get input values<br />   var blogurl = document.getElementsByName("iblogurl")[0].value;<br />   var numposts = document.getElementsByName("inumposts")[0].value;<br />   var sortposts = document.getElementsByName("isortposts")[0].checked;<br />   // Generate widgetcode<br />      var txtarea = document.getElementsByTagName("textarea")[0];<br />      txtarea.value = "\<script style='text/javascript'\>";<br />      txtarea.value = txtarea.value + "function showtoc(json) { ";<br />      txtarea.value = txtarea.value + "var toc = new Array(); ";<br />      txtarea.value = txtarea.value + "var numentries = json.feed.entry.length; ";<br />      txtarea.value = txtarea.value + "if (numentries \> numposts) numentries = numposts; ";<br />      txtarea.value = txtarea.value + "for (var i = 0; i \< numentries; i++) { ";<br />      txtarea.value = txtarea.value + "if (i == json.feed.entry.length) break; ";<br />      txtarea.value = txtarea.value + "var entry = json.feed.entry[i]; ";<br />      txtarea.value = txtarea.value + "var posttitle = entry.title.$t; ";<br />      txtarea.value = txtarea.value + "toc.push(posttitle); } ";<br />      txtarea.value = txtarea.value + "if (sortposts) toc.sort(); ";<br />      txtarea.value = txtarea.value + "for (var i = 0; i \< numentries; i++) ";<br />      txtarea.value = txtarea.value + "document.write('\<br/\>' + toc[i] + '\<br/\>'); } ";<br />      txtarea.value = txtarea.value + "\</script\>";<br />      txtarea.value = txtarea.value + "\<script style='text/javascript'\>";<br />      txtarea.value = txtarea.value + "var numposts = " + numposts + "; ";<br />      if (sortposts) { txtarea.value = txtarea.value + "var sortposts = true; "; }<br />         else { txtarea.value = txtarea.value + "var sortposts = false; "; };<br />      txtarea.value = txtarea.value + "\</script\>";<br />      txtarea.value = txtarea.value + "\<script src='http://" + blogurl + ".blogspot.com/feeds/posts/default?alt=json-in-script&max-results=100&callback=showtoc'\>\</script\>";<br />   // Show add button<br />      var addbutton = document.getElementsByName("go")[0];<br />      addbutton.disabled = false;<br />}<br />

What
happens here - you won't believe it - is that this javascript-function
writes the javascript-code for the widget! Now that is kind of Baron of
Munchhaussen, if you are familiar with this German nobleman who pulled
himself out of the water by his own neck. The entire widget-code
(without the comments) is written into the textarea of the form and the
Install-button is enabled.

Step 8: Create the Widget Installer
From steps 6 and 7 we can now create the widget installer. Open Notepad, and create a textfile with the following content:

<br /><html><br /><script style="text/javascript"><br />function customize() {<br />   // Get input values<br />   var blogurl = document.getElementsByName("iblogurl")[0].value;<br />   var numposts = document.getElementsByName("inumposts")[0].value;<br />   var sortposts = document.getElementsByName("isortposts")[0].checked;<br />   // Generate widgetcode<br />      var txtarea = document.getElementsByTagName("textarea")[0];<br />      txtarea.value = "\<script style='text/javascript'\>";<br />      txtarea.value = txtarea.value + "function showtoc(json) { ";<br />      txtarea.value = txtarea.value + "var toc = new Array(); ";<br />      txtarea.value = txtarea.value + "var numentries = json.feed.entry.length; ";<br />      txtarea.value = txtarea.value + "if (numentries \> numposts) numentries = numposts; ";<br />      txtarea.value = txtarea.value + "for (var i = 0; i \< numentries; i++) { ";<br />      txtarea.value = txtarea.value + "if (i == json.feed.entry.length) break; ";<br />      txtarea.value = txtarea.value + "var entry = json.feed.entry[i]; ";<br />      txtarea.value = txtarea.value + "var posttitle = entry.title.$t; ";<br />      txtarea.value = txtarea.value + "toc.push(posttitle); } ";<br />      txtarea.value = txtarea.value + "if (sortposts) toc.sort(); ";<br />      txtarea.value = txtarea.value + "for (var i = 0; i \< numentries; i++) ";<br />      txtarea.value = txtarea.value + "document.write('\<br/\>' + toc[i] + '\<br/\>'); } ";<br />      txtarea.value = txtarea.value + "\</script\>";<br />      txtarea.value = txtarea.value + "\<script style='text/javascript'\>";<br />      txtarea.value = txtarea.value + "var numposts = " + numposts + "; ";<br />      if (sortposts) { txtarea.value = txtarea.value + "var sortposts = true; "; }<br />         else { txtarea.value = txtarea.value + "var sortposts = false; "; };<br />      txtarea.value = txtarea.value + "\</script\>";<br />      txtarea.value = txtarea.value + "\<script src='http://" + blogurl + ".blogspot.com/feeds/posts/default?alt=json-in-script&max-results=100&callback=showtoc'\>\</script\>";<br />   // Show add button<br />      var addbutton = document.getElementsByName("go")[0];<br />      addbutton.disabled = false;<br />}<br /><br />function defaultvalues() {<br />   document.getElementsByName("widget.title")[0].value = "Table of Contents";<br />   document.getElementsByName("iblogurl")[0].value = "yourblogname";<br />   document.getElementsByName("inumposts")[0].value = "20";<br />   document.getElementsByName("isortposts")[0].checked = true;<br />   document.getElementsByName("go")[0].disabled = true;<br />}<br /><body><br /><form method="POST" action="http://beta.blogger.com/add-widget" target="_blank"><br /><span style="width:130px;">Widget Title</span>: <input type="text" size=30 name="widget.title" value="Table of Contents"/><br/><br /><span style="width:130px;">Blog url</span>: http://<input type="text" size=10 name="iblogurl" value="yourblogname"/>.blogspot.com<br/><br /><span style="width:130px;">Number of posts</span>: <input type="text" size=3 name="inumposts" value="20"/><br/><br /><span style="width:130px;">Sort posts</span>: <input type="checkbox" name="isortposts" checked/><br/><br /><br/><br /><input type="button" value="Customize" onclick="javascript:customize();"><br /><input type="button" value="Reset" onclick="javascript:defaultvalues();"><br /><input type="submit" disabled name="go" value="Install Widget"/><br /><br/><br /><textarea name="widget.content" style="display:none"></textarea><br /></form><br /></body><br /></html><br />

Save
this file as widgetinstaller.html to your desktop, and launch it in
your browser. You have to allow for scripts and active content, but then
you will see that your installer really works!

Step 9: Upload it and create a button to launch the installer
Upload the widgetinstaller.html file to one of your folders with your ISP webhost.
Now add a HTML-page element to your blog, give it an appropriate title, and add some text to describe the widget.
Then add a button using the following code:

<br /><form action="_self"><input type="button" value="Add Table of Contents to Blog" onclick="window.open('http://YOURHOST/widgetinstaller.html','popupwindow','width=500, height=500'); return false" /></form><br />

Save the page element and view your Blog.

Step 10: Test and debug.
Now play around to check if everything works as it should.
Congratulations! You are done!

Beyond this point you are completely at your own risk!

If you want to improve this widget, here are some ideas:
- Add the post url to the posttitle
- Add the date to the posttitle
- Add an option to display a postsummary
- Add CSS-styling to the widget
- Add CSS-styling to the widget-installer
- Add a preview-pane to the widget-installer

Resources:
- JSON-documentation
- Delving into JSON-feeds on Beautiful Beta

Displaying code inside a post

In my posts I have put some code-snippets. I got some questions on how I did this. Well, to be honest, it is very easy.
I
am using the <pre>-tag inside my post. Anything that is put
between a <pre> and a </pre>-tag is handled by your browser
as pre-formatted, and your browser leaves it as it is. You can add some
styling to it inline, such as <pre
style="font-size:90%;color:#009000;">, or you can add a class
definition to your template skin.
If you want to display html-code
inside your post, be aware that you have to replace every < by
<, and every > by >.

Adding a favicon to your blog

Old stuff, and explained by many excellent
bloggers and hackers, but usefull all the same. How to add a small icon
to your weblog, that shows up in your browsers favorites?
Well, that little thingy is called a favicon in webspeak. And this is how you add it to your blog.

First, create a icon using a program such as the freeware version of IconArt. Upload this file to the web.

Then,
edit your blog template in html-mode, and add the following lines of
code to the head of your template, just below the <head>-tag for
example.


<link href='youriconfile.ico' rel='shortcut icon'/>
<link href='youriconfile.ico' rel='icon'/>

If
you have already a link in your favorites-bar to your blog, in IE you
will probably NOT see the icon right after adding it to your blog. You
will have to delete the link from your favorites, empty your browser's
cache, close your browser, start it again and add the link again to make
it show up in IE.