煉鋼廠第二期工程報告

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

功能調整:

使用的 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 on Google Plus

About 賴大鐵


    Blogger Comment
    Facebook Comment

4 意見:

  1. 來看煉鋼廠的新家喔~~
    我的懶人閱讀也是在一開始會讀圖~
    感覺會比較慢~
    有機會換成你這個hakcer~~

    回覆刪除
  2. Re: 百里幻雲 <295581196342764800>
    to 幻雲,

    這個的缺點就是無法和懶人包一樣自動化 XD
    要自己加 tag 。

    回覆刪除
  3. Re: 皮老師 <6790356154802211012>
    謝謝鼓勵啦,相信等小皮出現後,你也會如此的 ^^

    回覆刪除

Related Posts Plugin for WordPress, Blogger...