将picasa相册搬到你的GAE博客

原文:http://coldplains.com/archives/884
原文是针对WP的,经过本人测试在micolog中也照样能用,效果请看本人的相册http://www.hanso.me/img

1、下载资源包(感谢木木同学提供)
picasa.7z(包含了一些渐隐渐显、页面滑动以及slimbox特效)
2、解压资源包,修改picasa.js中的google的ID为你的GMAIL帐号,
比如你的GMAIL是:abcd@gmail.com,修改picasa.js中的google的ID为:abcd.如图:

3、删除picasa.css中(去掉2,3,4行代码,然后点保存)

  1. *{margin:0; padding:0;}img{border:0 none;}.clear{clear:both;}   
  2. a,a visited{color:#666;text-decoration:none;}a:hover{color:#000;}   
  3. body{font:13px 'Comic Sans MS','Microsoft YaHei',Arial,Tahoma,Sans-Serif;color:#555;width:680px;margin:2em auto 3em;background:#262626;}   
  4.   
  5. #navi {margin-top:2em;text-align:center;}   
  6. #navi a{padding:5px;margin:0 10px;}   
  7. #navi .current{text-shadow:#AAA 1px 1px 1px;}   
  8. #items{display:none;}  

不然会影响你原来网页的布局
4、将资源包中images里面的图片剪切-粘贴到staticimages下,若提示,是否替换,则选是
5、在index.html中修改为如下路径(href="static/):

  1. <link rel="stylesheet" type="text/css" href="static/picasa.css" />   
  2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>   
  3. <script type="text/javascript" src="static/slimbox2.js"></script>   
  4. <script type="text/javascript" src="static/picasa.js"></script>  

6、将修改后的picasa.js、index.html、picasa.css和slimbox2.js放在micologstatic下

7、连同index.html一起上传,不是为了单独页面,只是为了备份!呵呵,你可以自己作主咯
打开index.html,
<title>My Picasa Albums</title>

  1. <link rel="stylesheet" type="text/css" href="static/picasa.css" />   
  2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>   
  3. <script type="text/javascript" src="static/slimbox2.js"></script>   
  4. <script type="text/javascript" src="static/picasa.js"></script>  

复制以上划掉以后的代码,然后在纯html下,粘贴到新建页面!标题写为相册,slug:ablum etc!这两个随你啦
哈哈,本人菜鸟,高手就不要笑啦!本着分享精神,才写了这么篇文章!感谢原创,让我们又一次体验到GOOGLE的优质服务!

Comments

发表评论

电子邮件地址不会被公开。 必填项已用*标注

CommentLuv badge