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

Posted onAuthor艾瑪42 Comments

有朋友問艾瑪

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之後，程式碼會顯示成下面這個樣子：

<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 個人圖示和相本標題的話），這整個紅色的部分都是要貼到文章本文中的。如果貼好的話應該會像下方這樣：
    　

　

Generated by Flickr Album Maker

　

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

Post Views: 2,779

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

  2. ><艾瑪大大

    完了！因為偷研究妳的新玩意兒
    我一個晚上忘了睡覺啦！（哀泣中～～）

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

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

  8. 一切就會非常完美，世界和平！
    我喜歡這句XD

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

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

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

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

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

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

  20. 耶～！又學到一樣新東西！
    謝謝艾瑪的分享！
    感恩啊～～！

  23. 艾瑪解釋得好清楚!

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

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

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

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

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

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

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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *