For those who are technically-inclined (you geeks know who you are) who are interested in how this blog was done, I'll include some notes here and answer any question about how it was done here as well.

First note to make -- this is no longer a Blogspot Blog. There's no way I could do this with Blogspot that I can think of. The reason is that this formatting and layout rely primarily on large amounts of php (and javascript).

For those less technically inclined, I'll mention that php is a server-side processor, while javascript is client-side. What this means is that when you request a web page, some of the work is done on the server, before the page gets sent to you (the php stuff), while some work is done by your browser, after you receive the page (the javascript). This blog was created primarily by using the css box model. All the different blocks you see all over the place are simply div sections. The challenge came when determining how and where to place all the different div boxes. The site is completely flexible in that the boxes adjust size and spacing depending on the size of your browser.

What made it interesting is that the server doesn't know how big your browser window is! Therefore, I couldn't completely use php to determine where to place the div boxes -- only AFTER the php was processed could your browser determine it's own size.

The solution I used, which you can see some of if you view the source of the page, is to combine the two parts. There is a basic stylesheet that gives the basic layout of the page. Then there's 2 sections of javascript to provide the exact details and locations.

When the page is processed by the server, it determines the post number, counting as it displays each post. When the browser gets that data, the php-calculated numbers are then fed to javascript functions that modify the basic style sheets, replacing items like top, left, and height.

Initially, the page determines the size of the browser and saves that value. Then, every time a new div section is needed, you will see a call to a javascript function with the name of the section. That javascript function uses the previously determined variables to write to the document the div section and css layouts for that div section, based on the javascript variables and the php variable values that were processed by the server when writing the page.

Where this was particularly interesting was with the date headers. You may notice the date headers only appear where the date changes. When this happens, the smaller box between posts is actually slightly narrower than other boxes. Again, this is simply the php determining when to place a box, and when the date changes, it provides a different number for the width of the narrow box.

The blogrolls were another challenge. With blogrolls that I could maintain, it was rather easy to use Blogrolling and simply replace the <BR> tags with spaces. However, where others maintained the blogrolls, I could easily hide the <BR> tags, but that left no spaces. I never did figure out the best way to fix that, so those blogrolls all have no spaces.

Some blogrolls inserted div sections for each new entry, or made a table. In that case I couldn't even hide the sections, or I'd get no entries. Instead, those are the blogrolls that scroll vertically -- I couldn't find any way around that one either.

Everything else is pretty standard tweaks to MT. If you have any questions about how I did any of this, just ask here!

Posted by: Ogre at 07:50 AM | No Comments | Add Comment
Post contains 627 words, total size 4 kb.