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: 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



3 comments:

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...