Migrating A Custom Object In The Classic Template

Most custom objects in your Classic Blogger template are coded in plain old HTML / JavaScript.

Migrating a custom object like that is easy. Just create a new HTML / JavaScript page element, in the Page Layout editor, and copy the code, word for word. Place and size it as you like, and you're done.

But watch out! Some custom code comes in two, or more sections. I've seen some custom code with variable definitions at the top of the template, and the actual HTML at the bottom. Make sure that you find all of the code required! And minimise the stress - test your code before you migrate the production blog!

A single object, say SiteMeter, could be dropped right into a new HTML / JavaScript page element, as is, right from the SiteMeter wizard. Here's a few examples.

OK, I shortened a few lines, with "********", and inserted line breaks, to prevent the old post / sidebar alignment problem.

<!-- Site Meter --><script src="http://s26.sitemeter.com/js/counter.js?site=********" type="text/javascript"></script><noscript><a href="http://s26.sitemeter.com/stats.asp?site=********" target="_top"><img border="0" alt="Site Meter" src="http://s26.sitemeter.com/meter.asp?site=********"/>
</a></noscript>
<!-- Copyright (c)2006 Site Meter -->

If I want to get fancy, I use nested tables, and put the SiteMeter and StatCounter code side by side.

<table border="0" align="center"><tr><td><table><tr><td width="33%"><!-- Site Meter --><script src="http://s26.sitemeter.com/js/counter.js?site=********" type="text/javascript"></script><noscript><a href="http://s26.sitemeter.com/stats.asp?site=********" target="_top"><img border="0" alt="Site Meter" src="http://s26.sitemeter.com/meter.asp?site=********"/>
</a></noscript>
<!-- Copyright (c)2006 Site Meter --></td><td width="33%"><script language="javascript" type="text/javascript">var sc_project=********; var sc_invisible=0; var sc_partition=16; var sc_security="********"; </script><script language="javascript" src="http://www.statcounter.com/counter/counter.js" type="text/javascript"></script><noscript><a href="http://www.statcounter.com/" target="_blank"><img border="0" alt="website hit counter" src="http://c17.statcounter.com/counter.php?
sc_project=********&java=0
&amp;amp;amp;amp;amp;amp;amp;amp;amp;
security=********&invisible=0"/></a> </noscript><!-- End of StatCounter Code --><br/><a href="http://my.statcounter.com/project/standard/stats.php?
project_id=********&guest=1"
>View My Stats</a></td></tr></table></td></tr></table>

Here's how to make a 3 object page element, in the footer, like the one in Googolians - The Blog.

<table border="0" align="center"><tr><td width="90%"><table><tr>
<td width="33%">(whatever you want, in the left cell)</td>
<td width="33%">(whatever you want, in the centre cell)</td>
<td width="33%">(whatever you want, in the right cell)</td>
</tr></table></td></tr></table>

I know there are other possibilities. Try them. Have fun.

For more information about Tables, see the W3Schools tutorial HTML <table> tag.