最新文章

煉鋼廠第二期工程報告

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

功能調整:

使用的 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 給予的支援 ^^

這兩週的小鐵 (九個月)

5月 17, 2009
最近比較少貼小鐵的文啊,趕快整理整理po一下 XD


前陣子帶小鐵去重慶國小走走,那邊可以看到許多爸爸媽媽帶著小朋友在玩呢!
還有一個小姐姐在練習走路~

一個真正的強者

5月 13, 2009
本文引用自huiya100 - 一個真正的強者

沒想到居然看到這個好文,好廣告!
我是邊看邊感動啊 ~~~~

這根本是一部電影了呀 !!

一直想要收集這樣正面憾動人心的強者群像,終於開始第一篇了 ^^
英雄的繪卷 !

~大鐵





一個從小聾啞的女孩,懷揣著音樂的夢想長大,卻經常遭受姐姐的不屑與打擊。

正當她對自身的價值產生疑問的時候,一個流浪藝人告訴她:音樂,只要你閉上眼睛就能看見。”

兩人同時入圍音樂節,由於嫉妒和害怕,姐姐在比賽前雇人摔壞了妹妹的小提琴,打傷了一直在教導妹妹的流浪藝人。


自以為陰謀得逞,但是妹妹仍然出現在比賽現場,飛揚的卡農從殘破的小提琴中破繭而出,震動了所有人的心。


這是一部相當完整的濃縮版電影,伏筆,發展,轉折,高潮,典型的人物性格,激烈的矛盾衝突,可以說一切符合戲劇的元素都在本片中一一呈現。


開場的悲劇化色彩濃烈,聾啞的小女孩和落魄的流浪藝人同樣都是悲劇的代表人物。


而最後的高潮運用了很多意象化的景物,曠野,蝶化,朝陽,都預示了一個新的方向。


極具衝擊力的運動鏡頭,充滿情緒化的蒙太奇剪輯手法,和引導人物命運的卡農樂曲,都給這部影片賦以激昂的史詩感。


片子雖然是潘婷的公益廣告,但與宣傳的商業主體已無多大關係了,全片揭示的是一個勵志主題:

在困境中仍然能保持積極樂觀的人,才是一個真正的強者。


這個廣告正是在影射人生


最喜歡裏面聾女和那個賣藝老人間的對話:

“為什麼我和別人不一樣?”

“為什麼你必須和別人一樣?”


Who am I ? 我是怎樣的我? 是活在別人期待下承受巨大壓力的我? 還是活在別人陰影底下不敢抬頭的我?




有時上帝將我們打碎、為的是祂可以重新塑造我們。

願神賜福您



機車還是贏不了汽車 !

5月 13, 2009
記得這個廣告嗎?
機車廣告蠻溫馨的。

看到網路上有人剪接真的好好笑哦 XD




還有更多版本,請連結過去看看,Mobile01 上有人整理了哦 !
[更新]最後還是敵不過三菱的Fortis~~

始動! 巨型獨角仙機器人

5月 13, 2009
轉載自 engadget 中文版 - Andy Yang

哇咧,人家明明就是獨角仙,Andy 兄怎麼會說是鍬型蟲啊~~~~
總之,高橋先生,當地球有難時,就靠你出擊啦 !!
尊夫人能夠支持真是太棒了,真的是賢內助啊 !! XD
~大鐵
-------------------------------------------------------------



不,這次不是某城市為了觀光而做的搞笑魷魚機器人,而是貨真價實的巨型獨角仙機器人,由日本茨城縣古河市的高橋均さん花了11 年的時間製作完成。

這隻甲蟲名為カブトム(Kabutom),不僅頭會動、腳會動(但很可惜,不能完全靠腳撐起全身的重量),甚至還可以遙控、屁股裡有個看起來頗先進的駕駛艙、肚子裡還可以坐六個人!

據高橋先生自已所言,當初做之前和老婆商量要做一隻巨型可坐人的巨型獨角仙機器人時,老婆的反應是「好啊,就做吧!做出來了就可以坐著它去倒垃圾了」。

日本綜藝節目去訪問的影片...




--------------------------------------------------

當然也有人提出反面的意見啦,認為比不上土木工程用螃蟹吊車啦:


不過對大鐵來說,這代表的是一個男人的浪漫啊 !!!

高橋先生將自己的夢想灌注其中,花了十一載手工打造完成的鋼鐵巨像!
豈是區區一個土木工程器械可以比擬咧?


啥? 你問我那獨角仙機器人可以幹嘛?
我想.... 就是有萬一的時候可以保衛地球吧... (默)

煉鋼廠大改版

5月 10, 2009
幾乎是整個翻過來了啊!
之前的版面其實我就很不滿意了,但想要到改版面,要一整個都換過來就覺得很懶.... orz


在母親節前夕終於卯起來把它換了。
目的是要提升本文(main)的載入速度,還有可以方便我們排放各式元件。
配合也要讓整體看起來更柔和。


Template:


七欄式模板 - 伊斯法罕

OurBLOGGERTemplates 站找到的。

這系列版面已經隱藏了導覽列,也增加了許多網頁元素的空位(我不用自己再去修改空位)。
此外,側邊欄也都在右側和下面,這樣在載入時就可以讓 main 先載好。


而且 main 這邊的寬度還不錯,完全符合我們的想法!
因為鐵媽不喜歡暗色調,所以我們最後選擇了這個看起來比較古樸又柔和的模板!

使用了這個 Template 後,有幾項必須要修改:

1. 快速編輯鈕不見了解決方式

2. 內嵌編輯回應也不見了解決方式


我想其他同系列的七欄模板大概都有這兩個問題 XD
不過照上面 Q&A 的修改,很容易就可以完成。

外掛

1. 繼續閱讀功能

發現一個懶人包,支援三種模式:繼續閱讀懶人加強版 (超好用的)
完全取代之前使用的繼續閱讀功能,還有 [+/-] 收合功能 hack。



2. 最新回應

換成在LVCHEN的外掛 2.0。
功能比原本煉鋼廠使用的強大的多,但是載入的速度也稍慢。我是覺得還蠻值得的啦。



Blogger hack:

1.[Blogger] 為blogger 每則留言繡上數字(Numbering comments)

2.回應區加對話框
並根據作者回應,也配上不同的底色。

3. 作者回應:
作者和一般回應的標示區別 (Author comment highlighting) - Abin's Tech Note

4. 修改預設字體 :以避免一開始 post 的字太小。


5. 讓側邊列 (Sidebar) 的元件能夠展開和摺疊 (Element Toggling)
目前只摺疊一個,之後會視情況把需要的都摺起來~~


未解問題:

1. Link List:

目前網站連結的部分還沒加回去,得一個個重加啊.... QQ
不知有沒有比較好的備份方法 @@?

2. Blogger 的回應功能比較弱,有考慮用 DISQUS

不過不曉得原本的留言會不會不見...
看網路上的說明,還要改回應部分的程式碼。
由於目前我在回應區這一部分已用了三個 hack ,程式碼已經很亂了... 啊,有時間再來想吧~~~


也請大家給新版的煉鋼廠一些意見囉 ^^
(為了載入速度,我們把軌道、噗浪和留言版都放到最下面去了,煩請大家到最下面留言囉 ^^")

始動!四足步行戰車!!

5月 07, 2009
上週二,在爺爺奶奶那邊,小鐵終於可以把屁股抬起來了!
   
就像尺蠖蟲一樣的尺蠖運動 XD


到了這星期,小鐵由於兩手的力量增加後,已經可以配合兩腳讓身體撐起來!
變成四足著地的姿勢。
 
Copyright © 大鐵與小鐵的煉鋼廠. Designed by OddThemes