epsco: Simplex Design blog : Embed Picasa Gallery in Blogger

عنواين الرئيسيه

كشف حقيقة التربح غير المشروع لجمعيات الاسكان التعاونى وتوظيف الاموال ؟ جمع الاموال لمشروع بناء وهمى على ارض محل نزاع قضائى على الملكيه ؟-رسالة من أحد ضحايا كشف الفساد المالى والإدارى -فراد أسرة النائب العام متوغلون في إدارة شركات مكتظة بالفساد المالي -المهندس شريف سوسة رئيسا لشركة بدر الدين للبترول. -إهدار4 ملايين جنيه بشركة بدر الدين للبترول -فساد بـ4 ملايين جنيه بشركات البترول بمطروح-مذكره التي اثارت غضب بعض الافراد من شركه بدر الدين...

الأربعاء، 19 ديسمبر 2012

Simplex Design blog : Embed Picasa Gallery in Blogger

Link to SimplexDesign - free premium blogspot template

Embed Picasa Gallery in Blogger

Posted: 19 Dec 2012 02:02 AM PST

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.