Embed Picasa Gallery in Blogger

Some people asked me for showing Picasa albums in a page of Blogspot, and in my latest template that made for customer, he requested the same. So in this post, I will show you the way to embed Picasa Gallery in Blogger by using Jquery Picasa Gallery. This plugin is writen by Alan Hamlett at http://ahamlett.com .

Demo

1,Go to this website: http://ahamlett.com/jQuery-Picasa-Gallery/ Download the zip or tar file. Then extract them. You will see files :
jquery.picasagallery.css
jquery.picasagallery.js
and a document name Fancy box.

2,If you have a private hosting, you can host files above in your own host.

3, If you do no own a hosting ,you can embed scripts and css into template file by using tips in this post :Unlimited hosting for blogger

4, Open template file, then add lines as bellow :

<link href="your_host/jquery.fancybox.css" rel="stylesheet" type="text/css" media="screen" />
<link href="your_host/jquery.picasagallery.css" rel="stylesheet" type="text/css" media="screen" />
<link href="your_host/jquery.fancybox-thumbs.css" rel="stylesheet" type="text/css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="your_host/jquery.fancybox.pack.js" type="text/javascript"></script>
<script src="your_host/jquery.fancybox-thumbs.js" type="text/javascript"></script>
<script src="your_host/jquery.picasagallery.js" type="text/javascript"></script>

Replace link in code above with url to files in your host.
If you have no hosting and follow step3, you can skip this step.

5, Save template file and upload to your host.

6, Go to Blogger Dashboard -> Create a pages . You can name it whatever you want . In my case, I choose "photo gallery"

7, In editor window , choose HTML mode ,then add the code bellow into content :

<script type="text/javascript">
$(document).ready(function() { $('.picasagallery').picasagallery({'username':'alan.hamlett'}); } );
</script>Replace alan.hamlett in code above with your Picasa username . Save page and back to your blog to see result. When you click on photo gallery page ,you will see all public albums in picasa will be shown , you can click on each album and view the image with effect from FancyBox.

That's all. Hope this tip helpful to you.

Thanks Dinh Quang Huy