煉鋼廠第二期工程報告

在繼上次更換了版面後，我繼續參考別人家的網誌來進行微調。
目的仍然是讓看的人覺得快，又很順。
而且文章要好找！

功能調整：

使用的 Blogger Hack 與外掛插件：

1. 又是 "繼續閱讀"...

原本使用的懶人包，後來覺得會在一進來的時候，顯示所有文章內容後再隱藏起來。
看起來覺得不是很舒服... 所以就試試 abin 的。

修改成 abin 的版本 首頁長篇文章的收合 ，也就是可以用兩種 tag 。

讓圖少的文章直接讀進來再隱藏一部分，圖多的則改成連結。

雖然 abin 這個 hack 也會造成 blogger 在背景把它讀完。
但是可以讓讀者在連進來時，不會有一頓一頓的感覺而比較順暢。

2. 非首頁只列出標題

標籤或搜尋頁面只列出標題 - abin ，可以和1配合，讓除了首頁之外，都只列出標題，瀏覽起來比較快。
但是，因為之前我有使用日曆的修改，所以造成排列有問題，只好自己再修一下程式碼了。

3. 摺疊 sidebar 的元素

大量使用 讓側邊列 (Sidebar) 的元件能夠展開和摺疊 (Element Toggling)，把不用直接顯示的先蓋起來。雖然還是會讀，可是讀者看起來比較順。

4. Sidebar 元素的顯示控制

和3的目的相同，讓某些元件只在首頁顯示。
當讀者進到文章內頁時，就可以比較清爽。比如像 MyBlogLog 這樣的大元件，在主頁之外不顯示。
側邊欄元件只能在首頁顯示/不顯示 - abin

5. Ajax 文章日曆

為了方便讀者快速找文，一開始我增加文章日曆：

Blogger 專用的 Ajax 文章日曆 (Blogger AJAX Archive Calendar) - LVCHEN。

如此一來，再加上網頁存檔、標籤，可以快速找到所要的文章。

主要還是放在右上的最新回應、人氣排行，這是讓讀者可以有個參考。

但後來又看到一篇 我心中最理想的Blogger Archive日曆外掛 ，
是由 "網誌存檔" 元件修改而來，比 LVCHEN 的更適合我用！
所以我就換下來囉！而且 "網誌存檔" 和 "最新文章插件" 也就省掉了！

6. 3D 標籤雲 WP Cumulus

無意在 kate 介紹的 - 敗家誌中看到的，參考下列連結：

超炫的3D標籤雲(WP Cumulus)一步一步教你中文化移植到Blogger上
WP-Cumulus 3D標籤雲中文版

有點麻煩，但我覺得很炫。而且展示的意義大於實質用途 XD
成功的放上去後真的有種成就感呀 ^+++^

7. jQuery的Tab分頁

在第一次載入時，會一起顯示，之後就會變成分頁。
我現在的想法是用在連結的分類！
也就是把各種不同類別的連結 (親子部落格、好友部落格...等)，用這個 Tab 集中起來。
使用者要切換分頁，速度也相當快呦！

調用jQuery特效實作(Tab控件篇)


版面調整：

1. 欄寬調整

伊斯法罕模板的欄寬比較讓我不滿意的地方，應該就是切成兩邊的sidebar。
寬度比較窄，很多外掛插件 (軌道啊，噗浪等) 要放上去，都會覺得很擠。
所以就找了一些資料，邊試邊改調到可以接受為止囉！

範本架構圖片 (可以看到哪些部分叫什麼名字)
擴展 blogger 版面寬度
修改blogger範本(2) - 改頁面寬度
blogger頁面寬度修改--心得

煉鋼業寬度修改
CSS中，
#blog-wrapper : 從 940px 加為 1024px (我的header image 是 940x250，所以要再加大) 不過標準上並沒有這個區，應該是此模板自己定義的吧？
#content-wrapper：928px 加到 1012px，就是中下方裏面這一整塊的寬度。
#main-wrapper： main是左邊這一塊本文區，620px 不變。

重點的側欄來啦！
#side-wrapper：右方側欄外框。324px 加大到500px。
#sidebar1：非標準的，此模板自定。是指正常側欄。268px，加大到340px。
#sidebar2 和 3：這就是切成左右兩個側欄的地方，各120px，加大到140px和180px。較大的一邊可以用來放軌道等插件。

下方的橫欄：
#lowerads-wrapper：920px，不知是不是倒數第二條那個較短的？可以視情況配合整體加長。

2. 上方的 LinkBar

將一些不需要出現在主頁的插件，如噗浪、CBox 及 Google 留言板，都移過去變成連結。
這樣就不必在進入時花費許多時間載入了。
有需要的人自己就會去點，而連到另一個頁面 。

3. Header 重製


之前的是直接拿了可愛的照片就放上去，完全沒考慮配合版型，還有載入速度 orz
這次我就根據模板原有的圖片，等比例調整後。
再請鐵媽把選出來的成長照片，一個個整理上來。
這樣不僅可以看到小鐵的成長，而且也不會很突兀。載入速度也快！

4. 元件配置

按照載入順序由上至下，由左至右的原理。
這次選的模板就是讓 sidebar 放在右側和下面，也就是本文 main 會在 header 後第一個載入。
因為讀者要的就是內容，而不是那些有的沒有的元件。

再來是將讀者最需要的資訊 (如人氣排行、文章日曆，可以幫助尋找文章)，放置在上方。
相當重要的社交工具 "部落軌道"，當然也要放在明顯的位置。

其餘的儘量放置在下面。

廣告就不放了。在流量還不夠高之前，廣告根本沒有意義！


效能


使用 pingdom 進行測量。
在剛開始更換模板之後，全載入約24秒...

調校後，為 5~6 秒之間，幾乎快了四到五倍之多！
看來還蠻成功的啦，本文載入速度更是在2秒之內，也相當快  ^^

先醬

目前仍然不斷在微調一些東西，有進一步的成果再和各位報告了。


謝謝 Kate 給予的支援 ^^

Share this: