[教學] Flickr Album Maker 在部落格上的應用

有朋友問艾瑪

http://www.wretch.cc/blog/amarylliss&article_id=5056228
照片排放的好讚

我也有使用album maker
但是我摳他原始碼之後.排出來的都是垂直一列

目前我唯一的作法是去掉</p><p>
勉強可以讀到一堆的小圖
但是沒有辦法像你文中如此美觀

我查了好多好多辜狗資料.完全不得要領.
SO..真的是很抱歉
可以請你告訴我你的小訣竅嗎?

這是一個有使用 Flickr 相本的人才會需要懂得的簡易相本做法。

  1. 首先,當然是要將所有照片上傳至 Flickr
  2. 再來,請到 Flickr Album Maker 選擇你要放入相本的所有照片。
  3. 選取所有相本中的HTML碼。

通常前面這三步大家都不會出錯,小妮二月的時候也問過我這個問題。但是,一貼到網誌上之後,就會變成這個樣子:

[教學] Flickr Album Maker 在部落格上的應用

怎麼辦?很簡單!

如果跟我一樣,不選個人相本圖示也不加入標題的話,利用Flickr Album Maker之後,程式碼會顯示成下面這個樣子:


<style>
.Album { width: 625px; background: #f5f5f5; padding: 5px;}
.AlbumHeader { text-align:center; padding-left:0px; }
.AlbumHeader h3 { font: normal 24px Arial, Helvetica, sans-serif; color: #FF0084; text-align: center; }
.AlbumHeader h4 { font: 16px Caflisch Script,cursive; color: #660033; text-align: center; }
.AlbumPhoto { background: #f5f5f5; margin-bottom: 10px; }
.AlbumPhoto p { float: left; padding: 4px 4px 12px 4px; border: 1px solid #ddd; background: #fff; margin: 8px; }
.AlbumPhoto img { border: none; }
</style>

<div class="Album">
<div class="AlbumHeader"><h4></h4></div>
<br clear=all>
<div class="AlbumPhoto"><p><a href="http://www.flickr.com/photos/amarylliss/165105839" target="_blank" class="flickrImage"><img src="http://static.flickr.com/58/165105839_988a472130_s.jpg" border="0" class=""></a></p>
<p><a href="http://www.flickr.com/photos/amarylliss/165105808" target="_blank" class="flickrImage"><img src="http://static.flickr.com/57/165105808_8132e9eaf7_s.jpg" border="0" class=""></a></p>
重複的照片語法省略
</div>
<br clear=all>
<p align="right"><font style="font-size:10px;color:#AABBCC;">Generated by <a href="http://webdev.yuan.cc/famaker.php" target="_blank" style="color:#AABBCC;text-decoration: underline;">Flickr Album Maker</a></font></p>
</div>


我用顏色區分成兩個部分

  1. 第一個部分是由 <style></style>,這個部分請去除<style></style>,將其餘藍色的CSS設定貼入你的網誌樣式CSS中。像我的CSS中就是這樣設定:

     /**Flickr Album Maker**/

    .Album { width: 500px; background: #f5f5f5; padding: 5px;}
    .AlbumHeader { text-align:center; padding-left:0px; }
    .AlbumHeader h3 { font: normal 24px Arial, Helvetica, sans-serif; color: #FF0084; text-align: center; }
    .AlbumHeader h4 { font: 16px Caflisch Script,cursive; color: #660033; text-align: center; }
    .AlbumPhoto { background: #f5f5f5; margin-bottom: 10px; }
    .AlbumPhoto p { float: left; padding: 4px 4px 12px 4px; border: 1px solid #ddd; background: #fff; margin: 8px; }
    .AlbumPhoto img { border: none; }

     

  2. 第二個部分是紅色的 <div class="Album"> </div>(綠色的部分其實可以刪除,如果你沒有用到Flickr 個人圖示和相本標題的話),這整個紅色的部分都是要貼到文章本文中的。如果貼好的話應該會像下方這樣:
     

 

就這麼簡單,重點就在於把CSS碼正確地貼到網誌樣式中,並且將 Flickr Album Maker 所產生出來的碼,貼到他該貼的地方,一切就會非常完美,世界和平!

分享此篇文章

延伸閱讀

【關於作者】艾瑪 | amarylliss

台灣第一位全職旅遊部落客受邀出國旅遊超過百次(受邀列表),1996年起於台大椰林BBS自助旅行版(Tour Abroad)發表旅遊心得並擔任版主,2000年起於明日報/ANYWAY旅遊網分享旅遊心得,2003年起任艾瑪隨處走走部落格格主至今,從無名小站至痞客邦,目前回歸個人部落格持續經營;更詳細網路書寫歷史請參考關於我聯繫、合作或邀約請聯繫:[email protected]

 Email Facebook Flickr YouTube Instagram

TG按讚:0

42 thoughts on “[教學] Flickr Album Maker 在部落格上的應用”

  1. ><艾瑪大大

    完了!因為偷研究妳的新玩意兒
    我一個晚上忘了睡覺啦!(哀泣中~~)

    好想去睡喔!不過怕睡了,明天包準起不來啊!

  2. 現在剛上班,看到這個有趣的東西,
    好想試試哦…但是..不行,只能等下班囉..
    看來今天會是充滿期待的一天…
    感謝艾瑪…^^

  3. 一切就會非常完美,世界和平!
    我喜歡這句XD

    現在來去試試看
    謝謝艾瑪的教學

  4. 對啊,這好像是今年新的功能,
    我幾個月前試了好幾次…
    也都出現一排的照片,氣死我,差點把電腦給燒了.

    後來也是把程式碼copy到word慢慢研究,
    才知道是那原因…
    不過,這個功能我覺得很讚!

  5. 提供這個工具的人是台灣人,他還提供了很多非常有趣、有用的免費工
    具。因此就像引言發出引用一樣,請支持這樣的軟體工作者,不樣將最後
    <b> Generated by Flickr Album Maker </b> 的連結移除喔!

  6. 之前也申請Flicker,
    可是也是沒法做成那樣,
    有了艾瑪的介紹就知道怎麼做了!:P

  7. 謝謝艾瑪的分享:~
    在這邊我學到很多BLOG的東西:~
    我是BLOG新手 @_@

  8. 耶~!又學到一樣新東西!
    謝謝艾瑪的分享!
    感恩啊~~!

  9. 艾瑪解釋得好清楚!

    這個功能超好用, 我喜歡,
    之前也研究了很久才研究出來,
    今天才知道原來作者是台灣人 🙂

  10. 每每看見Flickr的超級質感. 內心不免就很鬱卒感嘆… ~~"
    因為MSN Spaces根本無法放上. 而且就連CSS也不開放了! (倒!)

  11. 本來想說來艾瑪家逛一下就要去工作了,
    結果竟然發現了這麼好用的語法~~~
    不管啦!好想翹班來試一下喔!

  12. c好耶~正需要這篇教學~真是太感謝啦~馬上收入精華區~呵呵~

  13. DEAR 艾瑪
    想問一下Flickr沒附費的話
    分類最多是不是只有三個阿..
    因為我看艾瑪的分類好多阿!
    謝謝!

  14. 可能喔
    我知道非付費的(非PRO)會員
    只能有一兩百張照片會顯示在網頁上

  15. 我看你那個兩個灰底部份的程式碼第一個變成照片, "第二個部分是紅色的"下面只剩一個"到"字, 是只有我這樣嗎?
    另外想請教一下, 你好像有一篇介紹Flickr一般用戶送超過200張後, 前面的照片會看不見, 那要如何做(除了升級)才能看到? 謝謝.
    1/25微風的法國麵包店就要開幕嘍!

Comments are closed.