[教學] 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 所產生出來的碼,貼到他該貼的地方,一切就會非常完美,世界和平!

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

  1. ><艾瑪大大<br />
    <br />
    完了!因為偷研究妳的新玩意兒<br />
    我一個晚上忘了睡覺啦!(哀泣中~~)<br />
    <br />
    好想去睡喔!不過怕睡了,明天包準起不來啊!

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

  3. 一切就會非常完美,世界和平!<br />
    我喜歡這句XD<br />
    <br />
    現在來去試試看<br />
    謝謝艾瑪的教學

  4. 對啊,這好像是今年新的功能,<br />
    我幾個月前試了好幾次…<br />
    也都出現一排的照片,氣死我,差點把電腦給燒了.<br />
    <br />
    後來也是把程式碼copy到word慢慢研究,<br />
    才知道是那原因…<br />
    不過,這個功能我覺得很讚!<br />

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

  6. 艾瑪解釋得好清楚!<br />
    <br />
    這個功能超好用, 我喜歡,<br />
    之前也研究了很久才研究出來,<br />
    今天才知道原來作者是台灣人 🙂

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

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

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

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

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

發表迴響

你的電子郵件位址並不會被公開。