[教學] Blogger 改造 - 最新文章、相關文章、Ajax圖片載入、多媒體瀏覽器

"您或許對這些文章有興趣:" - LinkWithin

        在用「範本設定工具」更新了整個 Blogger 的頁面之後，很多以前用的 Blogger Hacks 也都失效了，有些像是「繼續閱讀」則是變成有內建的可以用，最近把一些之前的 CSS 設定加回來，同時也新加了不少東西，趁著有空的時候來記錄一下，免得以後就忘記了（年紀大了記憶力退化中XD）。


最新文章

「最新文章」區塊

        參考自「不連續x思考斷x面解構: Blogger Hack: 最新文章 AJAX 縮圖版」，詳細的作法裡面都講得很清楚了，大概只要把 CSS 部份調整一下，想辦法讓字不要超出那小小的區塊，然後把上下一頁的連結改成圖片就完成了。

        其實原本 Blogger 就有內建的小工具可以用，不過相對來說就沒有縮圖以及上下一頁的功能，感覺頁面上還是要多加點圖片才會比較豐富（笑）。


相關文章 - LinkWithin

        這邊用的是 LinkWithin 所提供的功能，設定簡單免登入帳號又支援許多 Blog 平台，所以很多 Blog 都有在頁面放上這個小工具，不過設定好似乎要等一小段時間才能正常顯示（似乎是吃 RSS 來抓資料），所顯示的文章基本上會以相同標籤的文章連結優先，其他的就應該是隨機出來的結果。

        另外這個工具最主要的功能其實是希望能讓讀者在 Blog 裡閱讀更多的文章，也讓一些很久以前發表的文章有重現天日的機會（雖然說有些文章應該也沒什麼人想看就是了XD）。

「相關文章」區塊

Ajax圖片載入 - LazyLoad

        前面提到要在頁面上多加點圖片才會比較豐富，不過加了太多圖片的網頁就可能會面臨到「載入時間」過長的問題， LazyLoad 這個 jQuery 的 Plugin 就是為了解決這個問題才開發出來的。它的原理在於一開始開啟網頁時先跳過載入圖片的動作，等到瀏覽者拉動頁面到真的要「看到」那張圖片時，再用 Ajax 的方式來載入圖片，這樣一來就可以節省等待圖片載入的時間。

        不過要用這個工具要花的工就比較大了，jQuery 的 js 檔案有 Google 提供的 可以拿來用，  LazyLoad 本身的 js 檔案就要自己找個地方上傳了（Google Code 的空間可以偷偷用， Dropbox 的Public 功能也不錯）。由於 LazyLoad 安裝起來比前兩個複雜許多，建議對 jQuery 有初步了解的人再來安裝，也可以參考「不連續x思考斷x面解構: 影像部落格必備外掛: Lazyload 」或「Lazy Load 延遲圖片載入，讓網站更順暢 - 香腸炒魷魚 」的說明來設定。

LazyLoad 的使用說明

多媒體瀏覽器 - Shadowbox.js

        其實本來是要用 ThickBox 的，不過後來看到它網站上推薦一些其他相似的替代品，看了幾個後最後選了 Shadowbox 來用。其中最大的原因在於 Shadowbox 不只可以用在圖片瀏覽上，在影片播放上的支援度也相當不錯（未來朝影片分享邁進？XD），設定上也十分具有彈性，可以將許多圖片（影片也可以）設成一個 Group ，讓瀏覽者可以輕鬆的依序播放，在測試過執行速度以及各大 Browser 的支援性都還 ok 之後就放心採用了。

        Shadowbox 最大的缺點大概就是 js 檔案比較「肥」了一點，同時也需要有空間放其他的一些 css 和 image 檔案（Google Code 和 Dropbox 又要登場了），同樣建議對 jQuery 有初步了解的人再來安裝，我是有多加一些 Script 讓舊文裡的圖片也能自動套用到此功能，有興趣嘗試的人可以來多多討論使用心得。

Shadowbox 的效果

其他

        另外還有增加的工具是「Abin's Tech Note: 增加文章更新時間 (Show Post Update Time) 」，因為常常會需要去修改/增加舊文的篇幅（寫了一堆待續...orz）。

        其實滿多東西都是在四處亂逛別人 Blog 的時候發現的，在 Blogger 的好處就是自由度很高，可以自己亂加東西。不過也希望 Blogger 能多「內建」一些好用的功能（像最近的統計跟熱門文章的功能就還不錯），讓一般不懂網頁的人也能輕鬆使用（其實是一整個懶而已XD）。