Blogger Template : Gadget 1.0 ( AOL Engadget Style )

Code Name : Gadget 1.0
你愛看 Engadget.com 嗎?我還蠻喜歡看的。每天早上電腦一開機就是先去看看 Engadget.com 有什麼新消息,畢竟這個時候美國方面的各種大大小小消息也差不多該告一段落了。

Engadget.com 是 AOL 底下一個以消費性產品之消息為主的 Blog 網站(要說是「新聞」,我覺得還不到那麼嚴肅的程度啦!),打從開站以來似乎就是一直使用「左一右二」(或右多)的版面設計風格,而同樣的風格也沿用在之後不斷成立的相關網站當中(像是 Joystiq.com),而這樣的風格有在閱讀上群聚資訊的好處,主要內容在左邊、連結集中在右邊,相當符合網頁設計基本原則的方式。

今天早上起床,沒什麼事情,專案也結束了,我就想該開始弄這個範本樣板來玩玩,我主要是改自於前一個釋出範本樣板 BlackCat 2.0,所以相關功能跟 BlackCat 幾乎一模一樣:有 Peek-A-Boo Nav Bar、Peek-A-Boo Archive & Label Post、Read More、 Via Links、Labels as breadcrumb 等等,在控制後台中一樣不會爆框,更重要的是我沒有用 TABLE 進行設計(自己的 Blog 反而比較偷懶,用 TABLE 去解決分欄的問題),一樣是純 CSS Tableless Design。我在右邊的 Sidebar 群中又多增加了一個上方跨欄的橫 BAR(就是圖片中 Profile 的位置),這樣看起來就非常像是 Engadget.com 的風格了吧?(請點範例圖看大圖)Read More 還幫你加上了「點點點」,表示文章還沒結束哩。

套用後你就可以立即使用,相關設定一個也沒少,你可以自己改變各種版面原色的設定顏色,不必一定得用我隨手弄弄的灰白色調(灰白色調是標準的電腦科技色,這大概也是 Engadget.com 會採此色調作基本設計的原因吧?);安裝方法也是一樣的,上傳覆蓋就安裝完畢,不然就是記事本開啟原始檔案後,全部複製貼上,蓋過原來的範本樣板內容即可;之前已經使用其他的版本的使用者,想要更新到這個範本樣板就請參考這篇文章(雖然我在寫這個教學的時候覺得極其無聊)。宣告也大同小異。

啊?什麼?你只看得懂中文?好吧! Engadget.com 也有中文版。啥?很多 Blogger 都愛 Engadget.com ?你也想在 Blogger.com 中成立一個像是 Engadget.com 的資訊消息 Blog?那就用這個 Engadget 風格的 Blogger Template 範本 Gadget 1.0 吧! XD

Download : Blogger Template : Gadget 1.1.
右鍵存檔比較保險

Oh~yes~又完成一個範本樣板了~喔!對了!右邊的 SideBar 中有一欄寬、一欄窄,這可不是設定錯誤喔,你去 Engadget 看看,你會發現他們正是一寬一窄的設計風格,我只是忠於原味而已。

假如有任何建議\回饋\意見\錯誤\修正等,請至社群留言或討論(如果只是單純的什麼 CSS 不會設定或 HTML 原始碼的問題,請去搜尋其他教學網站吧!)

update:
歷經多人測試與使用之後,進行修正,版本提昇至 1.1 (因為修改幅度其實並不大):
版面寬度修正為850PX,所以讀者螢幕解析度必須為 1024*768 以上。
邊欄中兩個內建欄位各為125PX與175PX寬度,可以放進兩種不同 SIZE 的 Google AdSense,邊欄最大總寬度為 310PX,可以放入 300PX 大矩形的 Google AdSense。
邊欄底下因應要求收回一欄。直接下載同一連結的檔案即可。

這個網誌中的熱門文章

Gatsby 廣告中木村拓哉機械舞的背後

玩玩軟路由系統

Google Doodle : Pacman 小精靈