幾種Flickr 相簿效果
事前工作
[步驟]
1.申請Flickr相簿帳號。yahoo與Flickr合作,yahoo會員可以直接用yahoo帳號加入Flickr會員。使用者有免費與付費兩種會員制。當然,免費的會員相簿享受的功能就少,每個月有20MB圖檔上傳限制,雖然丟了一堆相片上面,但最多也只能秀出200張。
2.上傳圖檔檔案。
註冊好了以後,按照作業系統,先行下載上傳程式,以方便一次上傳多圖。
3. 在Flickr相簿的工具列裡,按下 you ,

然後在網址欄裡就可以找到你的usernameID(你的ID)。

http://www.flickr.com/photos/你的ID@N00/
Create your own Flickr badge
Flickr相簿所提供的2種基本badge 效果

按指示 choose photos(選擇照片) color(選擇badge版面顏色) ,layout(設定規格)。設定好相簿規格,再copy code語法,貼到blog邊欄區(sidebar),欲顯示的位置即可。
1.An HTML badge
[code語法]
<style type="text/css"> #flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;} #flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;} #flickr_icon_td {padding:0 5px 0 0 !important;} .flickr_badge_image {text-align:center !important;} .flickr_badge_image img {border: 1px solid black !important;} #flickr_www {display:block; text-align:left; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;} #flickr_badge_uber_wrapper a:hover, #flickr_badge_uber_wrapper a:link, #flickr_badge_uber_wrapper a:active, #flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;} #flickr_badge_wrapper {background-color:#ffffff;border: solid 1px #000000} #flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;} </style> <table id="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="10" border="0"><tr><td><a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><table cellpadding="0" cellspacing="10" border="0" id="flickr_badge_wrapper"> <tr> <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?show_name=1&count=3&display=latest&size=t&layout=h&source=user&user=你的ID%40N00"></script> <td id="flickr_badge_source" valign="center" align="center"> <table cellpadding="0" cellspacing="0" border="0"><tr> <td width="10" id="flickr_icon_td"><a href="http://www.flickr.com/photos/你的ID@N00/"><img id="flickr_badge_icon" alt="helenna's photos" src="http://www.flickr.com/images/buddyicon.jpg?你的ID@N00" align="left" width="48" height="48"></a></td> <td id="flickr_badge_source_txt"><nobr>More of</nobr> <a href="相簿名稱">http://www.flickr.com/photos/你的ID@N00/">相簿名稱 photos</a></td> </tr></table> </td> </tr> </table> </td></tr></table>
|
2. A Flash badge
[code語法]
<style type="text/css"> .zg_div {margin:0px 5px 5px 0px; width:117px;} .zg_div_inner {border: solid 1px #000000; background-color:#ffffff; color:#666666; text-align:center; font-family:arial, helvetica; font-size:11px;} .zg_div a, .zg_div a:hover, .zg_div a:visited {color:#3993ff; background:inherit !important; text-decoration:none !important;} </style> <script type="text/javascript"> zg_insert_badge = function() { var zg_bg_color = 'ffffff'; var zgi_url = 'http://www.flickr.com/apps/badge/badge_iframe.gne?zg_bg_color='+zg_bg_color+'&zg_person_id=48891737%40N00'; document.write('<iframe style="background-color:#'+zg_bg_color+'; border-color:#'+zg_bg_color+'; border:none;" width="113" height="151" frameborder="0" scrolling="no" src="'+zgi_url+'" title="Flickr Badge"><\/iframe>'); if (document.getElementById) document.write('<div id="zg_whatlink"><a href="http://www.flickr.com/badge_new.gne" style="color:#3993ff;" onclick="zg_toggleWhat(); return false;">what is this?<\/a><\/div>'); } zg_toggleWhat = function() { document.getElementById('zg_whatdiv').style.display = (document.getElementById('zg_whatdiv').style.display != 'none') ? 'none' : 'block'; document.getElementById('zg_whatlink').style.display = (document.getElementById('zg_whatdiv').style.display != 'none') ? 'none' : 'block'; return false; } </script> <div class="zg_div"><div class="zg_div_inner"><a href="www.http://www.flickr.com">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><br> <script type="text/javascript">zg_insert_badge();</script> <div id="zg_whatdiv">This is a Flickr badge showing public photos from <a href="helennahttp://www.flickr.com/photos/你的ID@N00">helenna</a>. Make your own badge <a href="here.http://www.flickr.com/badge_new.gne">here</a>.</div> <script type="text/javascript">if (document.getElementById) document.getElementById('zg_whatdiv').style.display = 'none';</script> </div> </div>
|

再來,Flickr亦有許多支援套件。利用badgr 2.0 來美化Flickr相簿的badge也是很棒的效果。
1. badge 效果
2.跑馬燈式相簿播放效果
display(顯示照片tag)
least : 最新上傳的tag。radom:隨機顯示tag。
name (相簿名稱)
1(顯示) ; 0 (不顯示)相簿網址。
size (照片規格)
mid(中等大小,局部會隱藏,游摽靠近時會完全展開);square (正方形);thumb(縮小圖)。


本文瀏覽人氣:
次
Posted by helenna at
樂多Roodo! │03:30
│
回應(11)
│
引用(1)
│
Blog練功房
引用URL
http://cgi.blog.roodo.com/trackback/2110469
想不到我也有被提問有關如何設定格子語法的時候,這真是令人覺得不可思議!不過我還是要感謝alin的提問,因為你的提問,讓我也有這樣的機會回憶自己學習部落格使用時,曾接受過的協助。
【回應】alin的提問【呼吸之間】
at November 22,2009 00:33
大姊helenna
可以考慮買一年帳號囉
我覺得很好用
比起國內任何一家相簿系統
支援性更多
我有買耶~
滿好用的
謝謝helenna的教學
來改一改~~
dear mark,
因為有打算自己架sever.
目前先還是用自己的硬碟save
所以flickr帳號先緩緩
不過,正如你所言
flickr支援性真的很多
dear ivy,
恭喜你成功了喔^^
等我看清楚
可能要一陣子....
還是很欽佩妳的腦袋
dear 小瓢蟲
我才羨慕你的創作力呢
每每就是一個驚艷!!
真不賴耶 又有新花樣
想當初你分享的"製作gif檔"就幫我的部落格增色不少^____^
dear 妞
好東西大家分享咩
我喜歡嘗試新鮮貨
最近忙著改模板
搞到眼睛快脫窗了....:P
你好,我想問yam blog的管理版方要加入邊項才phase flash code 因為我因加入自由欄不能做到,希望你能幫到我
dear Xian
能給我你的網站和語法嗎?
光這樣敘述
我還無法抓到原因