Sunday, May 3, 2009

Create site with Blogger as CMS and P...

Create site

Create site with Blogger as CMS and Picasa as Photoalbum

One day I decide to create my personal site: . I didn't want something difficult. I was need site with simple CMS manager and with photo album. Also I wanted to practice in using Mootools library with Google API. So I decide use Blogger as site holder and CMS manager, Google Pages as javascript and images holder and Picasa as album manager. A structure of the site you can see on following diagram.


I have google account. If you have google account you can use it for registration on, and  So in blogger I created blog per page on my site. A main page blog I used to entring point to my site. Also I customized XML template of the blog. I changed the layout of page according to my design, and deleted all old content of XML. In additional I added to header, links to javascript and CSS files.
So the base of my site was created.
I started javascript coding. The structure of content you can see on following diagram.

When user pressed on button in menu bar, I started loading content from blogger according to the button. 
You can see the script that do it at:

The following script is loading all post of blog in Json format.



var script = document.createElement('script');

var src = ''+






     src += '&orderby='+this.options.orderBy;


script.setAttribute('src', src);

script.setAttribute('id', 'blogJsonScript_' + this._blogId);

script.setAttribute('type', 'text/javascript');




After loading the script call to function that run by Json objects and fill content holder with content.

A script that loading albums from Picasa look different but concept is same:


FeedTheRightWolf said...

You did a really good job on that site, looks amazing!

LoftNinja said...

never load...interesting idea....but no cigar

Akansha said...

its great...