版面再進化。JQuery UI tab

既上次改版後，一直覺得大概不會再對版面動大工程了，沒想到這次不動則已，動則就搞了一整天….= =

這次改版的大重點就是Jquery UI Tab的應用。一直以來，版面精簡和資訊豐富兩樣東西很難在一個版面上並存
當初我設計這個版面就是訴求簡單易讀，但也因為必須捨棄很多東西，例如留言板等可以增加Blog趣味性的widget
在一次看到部落客nightspirit的Blog時，突然靈機一動，何不也來做一個UI Tab分頁呢？          


所謂的UI Tab講白了就是利用javascript將widget顯示、隱藏，藉此表現出如分頁般的效果，詳細教學這邊就不多論述了（其實是懶得打了XD，網路上都找的到），附上幾個還蠻有參考價值的相關連結：Jquery UI Tab、

Blogger Hack - JQuery UI tab + TOC 實作

     

在分頁方面，我增加了許多有用的資訊（至少我自己覺得還蠻有用的XD），分頁標籤如下：

1. 網誌文章：即是文章內容，也是網誌的主體
2. 時間軸：所有文章的列表，其實就是Blogger內建的網誌存檔，本來有想要用TOC來展示全文，但是測試後發現，實在是太拖網頁讀取速度了，加上幾百篇文章一次列下來，應該也沒有人有興趣吧…，所以最終還是回純樸XD
3. 新文章、新回應：就……是新文章新回應嘛^^|||
4. 塗鴉版：這是新放進去的東西，其實就是google friend connect的留言版，雖然不知道有沒有人會去留言XD
5. Flickr：Flickr最新上載的照片，試過了用SlideShow等方式，都不是很滿意，畢竟讀取時間也是一大考量，最後找到了Flickriver裡的badge，不過我還是比較想要像是相簿般的列表，重點是要會自動更新，在慢慢尋找吧
6. 噗浪ing：就是plurk啦！
7. 愛閱讀：這個項目是我這次改版最喜歡的一個地方，可以讓所有人看到我訂閱的部落格，就像好東西就是要分享給大家的感覺，以前礙於版面，遲遲沒有將blogger內建的這項widget放下來，現在終於有機會讓它出現了
8. 人際地圖：為人數統技術聚的地方，做個整理讓資訊一目瞭然
9. I'm：也就是關於我XD
10. I'♥：裡面是放一下我喜歡或者是有興趣的網誌貼紙
11. 搜尋：裡頭有搜尋框，可以提供關鍵字搜尋，還有簡易的標籤分類，本來想用LVCHEN Blogger 標籤選台器，但是同樣的原因，為了要爭取網頁讀取的速度，只好捨棄

(光分頁介紹就講的落落長Orz，好像在寫說明書XD)

大體方面，配色並沒有什麼改變，倒是版面有點小小的更動

Header部份，將原本的"(媽哈哈哈)™遊樂園"和在線人數計數器拿掉，取而代之的是訂閱按鈕和分頁按鈕，看起來更簡潔，也因為分頁按鈕上"(媽哈哈哈)™"標誌的設計，網誌識別度並不會因為沒有Header而降低 。除此之外，有鑑於進入文章後缺少了明確回首頁的按鈕，我使用〈b:if〉語法來將首頁按鈕(位於中間，灰色的"媽哈哈哈遊樂園"按鈕)做條件式的隱藏、顯示

      
                      ↑改版前                                             ↑改版後（位於首頁）                               ↑改版後（位於內頁）

網誌底部lower bar部份就改變很多了，將所有的widget都移到分頁去，只留下頁尾的版權宣告。還有一個改變的地方是，一樣利用〈b:if〉讓廣告在首頁時不會出現，但是點進去文章後就會出現在lower bar裡 (改版前皆無放廣告)

       
                         ↑改版前                                          ↑改版後（位於首頁）                    ↑改版後（位於內頁，廣告在下方）  





最後一個改變，是將原本文字列表的相關閱讀拿掉，取而代之的是LinkWithin的圖文化相關閱讀，我覺得此外掛最大的優點在於擁有擷圖，不再只是幾行字，如此一來，不但可以增加讀者繼續點閱文章的動力，也增加了網誌的整題質感

 

最後，感謝nightspirit大的相關教學，特此立感謝狀XD