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.

Share this post

Advertisement

5 comments

  1. To know about these embed codes of picasa gallery in blogger in the website was just awesome to acknowledgment.[url=http://pepdeal.com/]website templates[/url]

    ReplyDelete
  2. This is really great, almost exactly like what I am looking for. One question: Is it possible to alter the code so that only one Picasa album is shown on the page, instead of all albums on one page?

    For example, say I want to make a post for "my Vacation" and show just the album of my vacation photos. Then I make another post called "Birthday Party" with just the birthday album. Can this be done? Thanks.

    ReplyDelete
    Replies
    1. you can check for other options in internet. There are many choice for one album only. It's only difficult for multiple albums only.
      For the second question, you can do it. Just add the code of gallery in to post content, in edit HTML page.

      Delete

Here are some rules for commenting on Simplex Design blog :
1, Search first ,then ask question. You will get the answer faster
2, All comments except spams are welcome.
3, Please make all requests in English.
4, Do not use generic titles such as Admin or Mod. This confuses readers