最新文章

顯示具有 煉鋼廠整修記錄 標籤的文章。 顯示所有文章
顯示具有 煉鋼廠整修記錄 標籤的文章。 顯示所有文章

官方版的"繼續閱讀"

10月 04, 2009
Google Blogger 終於有 "繼續閱讀" 了 ^^

之前為了這個功能,往往求助於各家高手的 hack。

現在可以轉回來用官方自己的囉!

而且這個 "繼續閱讀" 和其他 bsp 的一樣,是真正的不載入!
這樣就可以加快整個首頁的載入速度呢  ^^

不過由於之前煉鋼廠也用了那些hack,所以要先把它修正回來。
但還是沒辦法直接使用
(因為用的 hack 太多,版面的程式碼已經更動不少,系統無法自動添加程式碼)。

所以還是請參考一下 Abin 兄的教學

[Facebook] 我的新玩具 - 臉書 Facebook

8月 05, 2009
其實幾年前我就有因為玩美版魔獸,而申請了 Facebook。

當時我還搞不懂它是要做什麼,只知道是國外很著名的社交網路。

最近因為開始弄 blog,所以也漸漸接觸到這些服務囉。

剛好 Facebook 也支援了繁體中文,許多格友和噗友也開始漸漸往 Facebook 移動~~

又因為某些雜誌或趨勢專家的影響,這些服務就開始大紅大紫!

連我之前的東家 - GIS 中心,也開始大力鼓吹員工來了解這些東西。
所以好友就激增啦 !

這種東西就是要朋友多才會好玩啊~~~~

除了為數眾多的小遊戲外,還有各種互動的小玩意兒(像是一籮筐的心理測驗啊,送些星星、愛心啊的~),增加朋友間的交流!

我覺得Facebook 暴紅,開心農場真是功不可沒.... = =



因此我和鐵媽最近開始加入 Facebook 的行列了 ^^

不知不覺,Facebook 已經變成是我每天最常使用的工具啦 XD


要怎麼開始呢?



不知道要怎麼開始嗎?
其實網路上隨便找一下就有很多教學文了,像是這一篇:

FACEBOOK 教學圖片

就有一些常用的技巧囉 !!
當然最重要的是先找朋友啦~~

Facebook 有提供匯入 email 通訊錄的功能,相當方便!

另外就是它會去分析你和別人之間共同的好友。

使用這樣的方式出現在你的"朋友建議名單"中,

我常常被一些人給嚇到 XD


我也有幾個心得:

1. Picasa 直接上傳至 Facebook 相簿。

安裝 Picasa Uploader 外掛程式在 Picasa 程式中,就會多出一個 Facebook 按鈕。


這樣我可以輕易將 picasa 的照片,也上傳至 Facebook 中進行分享~

此外,Facebook 的相本,有提供 Tag 的功能呦!
(就是類似 Google Picasa 網路相本的人臉標識功能)

參考:

Picasa與Facebook相簿間的橋樑



2. Plurk 自動同步至 Facebook 塗鴉牆。

Facebook 的塗鴉牆,很類似 Windows Live 的 "最新動態"。


也和噗浪相當類似,可以在下面加上回應。


(如果你很懶的話也是可以按個 "" 就好啦.. XD)

光是塗鴉牆就可以大書特書啦!

你可以調整他顯示各式資訊的比率,而且你可以設定朋友的名單(就是分類)。


讓塗鴉牆可以顯示你指定分類的朋友動態。

和某人有互動時,塗鴉牆又可以變成 "雙向塗鴉牆",只顯示兩個人的互動過程~~


一方面我們也用噗浪,所以把噗浪的訊息轉噗到塗鴉牆上,
也是一個省事的方法。(當然也有不少人反對這樣做)

可以參考:

[網路相關] 把Plurk 同「噗」到FaceBook



3. 網誌匯入。

當然是要把煉鋼廠給匯進去呀!

現在蠻多人都有自己的 blog ,Facebook 可以輕易將它整合進來!

雖然說我們可以在塗鴉牆上貼 "連結" (它還會自動抓取內容和縮圖呢)。

不過 Facebook 也提供了很方便的匯入功能,只要將 RSS 貼進去即可。

可以參考下面的連結,不只是Wordpress適用而已呦!

超簡單將Wordpress 文章匯入Facebook Note 之中| 夢行者的夢想天空


4. 隱私權

很重要的一點,就是隱私權的設定。
電腦玩物已經有一篇很棒的解說了,請參考一下囉^^

Facebook 個人用戶隱私設定心得完整分享 @電腦玩物



最後就是~~~~
把我加入好友吧 ^^


http://zh-tw.facebook.com/chiachun.lai

下一篇再來分享遊戲~~~

小鐵終於有頭像了!

6月 13, 2009

感謝迷也幫小鐵畫的頭像插畫 ^^
現在小鐵有自己的專屬頭像囉!

畫出來的結果超出我們的預期呀!
小鐵的大目仁和頭髮那一撮都有抓到 XD

接下來我們也請迷也繼續幫小鐵畫各種表情。





把我們的banner重改一下嚕:


之後再來設計煉鋼廠的 Logo 和連結貼紙 ^^"

作者迷也發表的文章在這邊:小鐵娃娃 - 迷宮鏡

FeedBurner - 燒製煉鋼廠的 RSS Feed

6月 02, 2009
參考了阿湯的文後,
我想說也來燒製一個 feed 位址吧 !
這樣以後不管我們搬到哪裏,這個 RSS Feed 位址就會一直跟著煉鋼廠。
大家也就不用再重新訂閱囉 !!

而且 Burn 後,也可以看到統計資訊呢!

詳細的說明請見阿湯的這篇 - 【Google FeedBurner】製作專屬的RSS網址,就算搬家也不怕!- 就是教不落


請大家重新訂閱我們的 RSS Feed 呦~~~

1. 先點擊我們看起來很好吃巧克力愛心訂閱鈕 XD

rss1


2. 跳至 FeedBurner 的頁面,選擇訂閱工具~~~

rss2


3. 以 Google 為例,會連結至下面這頁。
我們可以選擇要訂閱至 iGoogle 首頁或是 Google Reader。

rss3

我想使用 Google Reader 的人應該蠻多的吧? ^^
謝謝大家的訂閱囉!

DISQUS實裝

5月 25, 2009
終於下定決心把貧弱 Blogger留言系統換掉,
改成了蠻多人推薦的 DISQUS



申請的方法google搜尋一下就有囉!

比較麻煩的是,有時我們已經修改過模板的程式碼,已經亂成一團 XD
DISQUS的安裝功能可能就無法幫我們修改程式碼... (煉鋼廠現在就是這樣...)

所以,就必須要用人工的方式,一個個修改啦!

我參考的文章如下:


初學者如何在Blogger安裝Disqus - 黑色童話



How-To: Add DISQUS Manually on Blogger/BlogSpot - WebDev


不知為何黑色童話的那篇我改了沒有成功,
最後主要是按照 WebDev 的那篇改的。

除了這些文章的修改方式外,
還要記得把我們自己加上的內嵌留言移除 (煉鋼廠的模板下,是自己加的)

另外,"最新回應" 外掛模組也因此失效囉!
所以我使用 DISQUS 的 Recent Comments widget 取代之。

麻煩大家在這篇文章幫我試試看 DISQUS 的留言功能是否正常 ^^

煉鋼廠第二期工程報告

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月 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 ,程式碼已經很亂了... 啊,有時間再來想吧~~~


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