2007-05-01

怎样为你的Blogger添加相册?

怎样为你的Blogger添加相册?
虽然Google认为相册不是Blogger的必备功能(即使他们已经推出了google网络相册),不过还是有很多朋友(特别是从msn space上转过来的朋友)还是想在自已的Blogger上添加一个照相簿。托phydeaux3的福,你的这个愿望可以在三分钟后实现(该hack在新版blogger下测试有效,旧版的没试过):
1. 既然是新版blogger的用户,那么你一定已经有了一个google网络相册(并且相册里已经有些照片了)。

2. 以下就是你要粘贴到自己blogger上的代码,老规矩,你可以修改其中的粗体字部分(你也可以直接到 Picasa Web Albums Widget Creator for New Blogger上进行设置)。为了加快进度,就不一一解释了,不过千万记得修改最后一行中的"my pwa feed "(当然是用你自己的pwa feed代替)

<div id="pwFeed" style="text-align: center;"></div><script type="text/javascript"> var imgNum = 0; var pwaHeader = true;var albumDisplay = false ; var pwaLogo = true; var pwaSlideShow = true; var pwaSlideSpeed = 5000; var pwaImageSize = 160; var pwaImageFeed = 20; var pwaBorder = true; var pwaBorderSize = 2; var pwaBorderColor = ' #000'; function pwShow(root) { var feed = root.feed; var entries = feed.entry || []; var pwTitle = feed.title.$t; var album = feed.link[1].href; pwf= document.getElementById('pwFeed'); if(pwaHeader){ h2 = document.createElement('h2'); h2a = document.createElement('a'); h2a.href = album; h2t = document.createTextNode(pwTitle); h2a.appendChild(h2t); h2.appendChild(h2a); pwf.appendChild(h2);} ul = document.createElement ('ul'); ul.id = 'pwaUL'; ul.style.listStyleType = 'none'; if(feed.entry.length > pwaImageFeed){ pwaFetch = pwaImageFeed;} else {pwaFetch = feed.entry.length;} for (var i = 0; i < pwaFetch ; ++i) { var entry = feed.entry[i]; var title = entry.title.$t; var jsonImage = entry.media$group.media$content[0].url; if(albumDisplay){var link = entry.link[1].href;}else {var link = entry.link[1].href;} li = document.createElement('li'); li.style.backgroundImage = 'none'; li.style.border = '0px'; if(pwaSlideShow){li.style.display = 'none'; li.id = 'pwa' + imgNum;} a = document.createElement('a');a.href = link; a.title = title;img = document.createElement('img');img.src = jsonImage + '?imgmax=' + pwaImageSize + '&crop=1'; if(pwaBorder){img.style.padding = '2px';img.style.border = pwaBorderSize + 'px ' + pwaBorderColor + ' solid';} img.style.width = pwaImageSize + 'px'; img.style.height = pwaImageSize + 'px';a.appendChild(img);li.appendChild(a);ul.appendChild(li);imgNum++;} if(pwaLogo){ logoli = document.createElement('li');logoli.style.paddingTop = '3px';logo = document.createElement('img');logo.src = 'http://photos1.blogger.com/x/blogger2/4751/2497/320/550435/picasaweblogo-en_US.gif';logoli.appendChild(logo) ; ul.appendChild(logoli);} pwf.appendChild(ul);if(pwaSlideShow){ pwaPlay();}} var pwaCurrent = 0; function pwaPlay(){if(pwaCurrent >0){ pwPrev = pwaCurrent - 1; document.getElementById('pwa'+pwPrev).style.display = 'none';} else {pwPrev = imgNum -1;document.getElementById('pwa'+pwPrev).style.display = 'none';} document.getElementById('pwa'+pwaCurrent).style.display = 'block'; pwaCurrent++; if (pwaCurrent == imgNum){ pwaCurrent = 0;}setTimeout('pwaPlay()', pwaSlideSpeed)} </script><script type="text/javascript" src=" my pwa feed"></script>
3. 对上述代码进行修改后就可以直接放到侧边栏(或者其他你认为合适的位置)。

因为不是很新的hack,相信有很多朋友都已经用上了,如果有什么疑问,欢迎大家在评论中留言!

via: New Blogger Widget for Picasa Web Albums

更新1:pwa feed地址在哪里?

picasa web album feed


更新2:怎样实现“照片散落”效果:打开picasa(没有可以到下载的圈圈下载)然后按图示操作

怎样实现“照片散落”效果

7 个说法:

Susan 说...

我直接把picasa生成的代码加入blogspot,为什么照片不播放T_T,而且也没有你那种散落的照片的效果。还有弱问下,什么叫pwa feed?怎么找,我把你放的代码加进去就没有显示了。。。厄 tangfangxin (at) gmail.com

匿名 说...

问题同上,望能解答一下!

坚硬的泡沫 说...

:) 解答完毕~!

lune 说...

谢谢啊,虽然我很菜,不过总算搞定了
谢谢圈圈:)

坚硬的泡沫 说...

(*^__^*)
u r welcome!

白小沅 说...

为什么我把上面的代码改好然后加到模板HTML里面他却提示我错误,而且加到不同的地方显示的错误也不同~~
我真的搞不大懂,快崩溃了,晕~~到底上面的代码应该加到什么模板的什么地方呀?
请解答~~~~

坚硬的泡沫 说...

试试这个:

在layout编辑模式下,添加一个新的html页面元素,然后加入代码。:)

HOW TO: 怎样生成自己的标签云

搜索此博客