Blogspot customization

If you were on this page before you probably noticed that it looks different. I realized that our blogs can be customized to whatever we want them to look like (offered templates are nice, but they will never be exactly as you want). Tell you the truth, it was Johannes’ blog, which started me thinking about doing this (thanks Johannes).

Basically, the goal is to make your blogspot page look like one of the pages on your site (our project web site). This seems to change the perception that our site is static and not interactive. A lot of big sites use third party services and users are simply redirected to third party pages. These pages have to resemble the appearance of sites they are supposed to be part of.

(Side note: another popular solution is to use javascript or iframe to embed third party code, which is called dynamically every time page is loaded. As an example, look at Johannes’ “Contact“ page. He utilizes iframe, which pulls the submission form from http://creator.zoho.com/

Here is a code: <iframe height="474px" width="100%" name="zohoform6" frameborder="0" scrolling="no" src="http://creator.zoho.com/showForm.do?formLinkId=6&link=true&sharedBy=jkuhs&borderColor=F3F3F3&headerColor=F3F3F3&successMsg=Thanks, your comments have been submitted successfully!&privatelink=xnzvKSk7PrsFDGKv4WpTN8KJPn5OSVQOEF5Bhshzz3Gwza7svFuPfdyYeUHDVjdsP3xa8Gus0B6ZBgGUTP06V1S136CJsbnG0e0M" > </iframe > ).

Fortunately, blogspot designers tried to accommodate everybody’s needs and made their page customization as less painless as they could. After about three hours of figuring out how it all works (IE developer toolbar was very useful) you can see the result. Not every detail is exactly matched to look the same as my project pages, but pretty close.

Also, if you read my previous post, you know that a user can choose between two web site themes. I did not want to implement this functionality on the blogspot page, because it would require couple more hours of css tweaking, and it did not seem worth it. I decided to pick one of the themes and apply it to the blog page. I like the alternative style more and went with it.

Every blogspot page have a toolbar on top (the one with blue background), which is injected on the server side, and not present in the template. I could not change its background to blend it with overall theme. Thus, I just set its width to match the navigation menu, centered it and left it alone (at least for now).

P.S.
I probably have to switch default and alternative styles on main site since the default style for blog is set to look like an alternative, which becomes confusing.

All references to images, css stylesheet, navigation links have to be absolute on blog page, because it is hosted on different server.

The blogspot page does not pass w3c html validation. Please do not blame me for this, I do not have control over it, it is all Google’s fault. :)

I added a Blog menu item. Now it is really integrated.