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: http://panshin.blogspot.com . 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 blogger.com, pages.google.com and picasa.com.  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: http://panshinspace.com/lib/blog.js

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

---

 

 

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

var src = 'http://www.blogger.com/feeds/'+

            this._blogId+

            '/posts/default?alt=json-in-script&callback='+

            this.options.objName+

            '.onGetDataComplete';

if(this.options.orderBy)

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

        

script.setAttribute('src', src);

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

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

 

document.documentElement.firstChild.appendChild(script);

 

---

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: http://panshinspace.com/lib/album.js