Blogger Template : Gadget 2.0

gadget20-in-IEin IE gadget20-in-firefoxin FIREFOX

下載 Gadget20-2008-01-15.xml | DEMO 參考網頁

釋出前的廢話:
上次製作 Gadget 1.0 已經是一年前的事情了,在這段時間內 Blogger 發表了許多新的功能,同時也更新了許多 template 中的範本功能,Gadget 1.0 原本就有著一些小毛病,起因除了當初釋出時沒有經過長時間的 Beta,也有一些是 Blogger 更新語法或提供新功能產生的,也常常造成許多使用 Gadget 1.0 的網友有很多意料中的問題,雖然有很多同好陸續在更新 Blogger 範本功能的解說,也提供了許多心得分享與更錯,但是並未整合在同一個範本當中,在經過一年之後,決定來一次完整的升級。

2008 年全球環保意識將會急速升高,綠色議題將會是全球關注的重點,這次 Gadget 2.0 就以綠色當作主要的色彩設定做釋出,網路使用者依然可以依照自己的喜好自行更換顏色設定(之後會進行說明)。(全文圖多且不小喔...)

主要 Gadget 2.0 特色說明:
gadget20-feature-0
在 1024*768/1280*800 以上解析度已經逐漸成為主流的年代,這一次把版面整體拉寬到 900 px,主文的部分擁有 550 px 的寬度,不論是 flickr 相簿或是其他相簿服務所提供的照片嵌入,應該不再是問題。
gadget20-feature-1-1
右邊欄位維持在 310px ,符合 Google Adsense 廣告版面大版面的需求,底下兩欄分別為 120 px 與 175 px ,亦可用來安排 Google AdSense 120*600 與 160*600 摩天大樓型式的廣告欄位,最後依據一些網友的需求收為一個欄位,讓整體有更好的運用。
gadget20-feature-1
近來有不少網路使用者喜愛偏三欄(左一大右二小)的版面設計,這次 Gadget 2.0 大幅修改這方面的 CSS 設定,只要使用者在最上方一欄內不放入任何網頁元素,就可以擁有與偏三欄一模一樣的效果。
gadget20-feature-2-2
標題區塊直接支援 Blogger 後台直接設定 Title 背景圖片的功能,標題區塊的預設高度會隨著圖片高度產生改變,使用者只要掌握好圖片的寬度(900px)與高度(120px)即可放入自己喜愛的圖片當成標題背景。
gadget20-feature-2-1
文章之間直接支援 Blogger 中 Google AdSense 的相關設定,現在要在文章之間插入 Google AdSense 的廣告欄位,使用者不用再費心於原始碼中尋找安插廣告欄位的位置,讓網站的廣告效果更好。
gadget20-feature-2
Peekaboo Post 文章躲貓貓,在 Archive 頁面與 Label 頁面當中,文章會自動收合成剩下標題的模樣,前方則有開啟與關閉的連結可以使用,文章產量高的 Blog 將能夠擁有較佳的瀏覽方式與較好的網站經驗。
gadget20-feature-3
加入完整的書籤按鈕,讓閱讀者要進行書籤收藏時更為方便,但是並沒有 hemidemi 與 Funp 的大型推收文按鈕,畢竟不是任何人的任何文章都會被收與推,這類功能只是提供到某種程度的方便性而已(書籤按鈕圖片來自 iPlay99 所整理)。
gadget20-feature-5
後台設定網頁元素版面位置直接完整對應,讓使用者在操作與新增各類網頁元素時直觀且方便。底下 footer 的部分亦有一欄寬度 900px 可以新增 768*90 超寬型 Google AdSense 廣告欄位並且將網頁元素置中處理,當然,直接放入 Table 規劃成多欄位的各式連結功能也可以喔!
gadget20-feature-6
此次修正最多的部分應該屬於這個部分,一口氣將以往無功能、設定無用的選項進行大幅修正,幾乎所有網頁上的各種區塊與顏色都可以透過後台「顏色與字型」的頁面進行調整,像是 link 的顏色、整體背景顏色、左邊區塊背景顏色、邊欄背景顏色、整體文章含邊欄的背景顏色都可以調整,不用再與不熟悉的CSS繼續奮戰(但是要更改背景圖片、調整特定區塊文字大小等,還是得自行透過CSS進行設定,這個功能的目的方便一些整體概觀的調整而已)。
所以,如果你覺得要改成藍色、黃色、紅色、紫色、、、等等,都隨你自己高興!

其他延續與繼承功能:
1. Read more 連結,使用方法請參考此文章
2.「消息來源」功能,當文章有輸入主要的 Link ,這個連結會自動出現。
3. 上方 Navbar 自動隱藏(Firefox 自動隱藏,IE中則是透明狀態)

已知問題:
要調整 Blog Post 中的區塊(像是作者、日期、標籤等)卻發現拖拉放後儲存,並未生效?
為了要製作 Read More 功能連結會動到原始碼中 post 的部分,而會讓網頁元素 Blog 設定失效,例如 Label 與作者等區塊拖拉位置無法生效,目前無解,已經在面版中儘量進行各區塊的安排與 CSS 調整,但是要開啟與關閉各區塊功能正常。

如果我要回復最簡潔原始的版面功能?
如果使用者不喜歡一些 Widget 的修改(例如不少人就不喜歡 Read More 的功能),只要在範本設定頁面,將所有 Widget 回復原始預設即可,但同時也會失去文章躲貓貓、read more、書籤按鈕、消息來源等所有附加的額外功能。

釋出後的廢話:
有些人或許覺得我釋出的樣版好像都沒有特別美觀或是缺少了一些視覺上的元素,像是有不少人就乾脆改套用從其他平台 port 過來的面版或布景主題(像 wordpress 等),但是看到許多部落格設計、長相、背景圖片都一樣的布景主題,難道不覺得很膩嗎?製作 Blogger 專用的範本,目的是希望使用者將心力放在「美化」或「設定個性化」之上,解決使用者遭遇一些版面配置與規劃上需要與 Blogger Code 奮戰的問題,讓使用者享受「個性化」的樂趣,而不要套用一些大家都在穿的制服後,連修改顏色的機會都沒有。

下載、上傳,開始打造自己的 Blog 吧。

最後,真的是最後啦:
我把網路上使用 Gadget 1.0 的網站收集在 Meta-Lounge 討論區中,如果有美化問題或是有設計興趣的話,可以前去看看其他使用者如何打造自己的 Blog,其中有不少弄得相當不錯。至於要回報問題或討論請多利用 Meta-Lounge 討論區

Claim:
1.如果你的 Blog 剛申請,且尚未手動增加任何的網頁元素(Page Elements),恭喜你,你可以直接套用這些面版無虞。
2.如果你已經開始使用你的 Blog 了,直接套用這些面版將會失去你所有手動新增的網頁元素(Page Elements),不過完全不會影響你所發佈的文章(Posts)、草稿(Drafts)。
3.如果你已經有手動新增的網頁元素(Page Elements)或是曾經修改過你的 Template,請先備份一份;當你上傳這邊的檔案並儲存時,系統會提示你將會有些網頁元素被刪除,要套用版型的話請「確認」。
4.網頁元素(Page Elements)要重新建置相當容易,就算全部刪除也無損你原本在 Blog 中創作的內容,是否要套用版型來重新設計你的 Blog ,請自行斟酌,恕不負責。
5.『救援或服務』:『沒有!!』改爛了就是重新上傳你的備份,或是重新挑一個新範本套用即可。
6.如果有任何此 Blogger 範本功能上的 Bug ,歡迎回覆留言以進行修正(只關於本範本 Blogger Code 的部份),不過這個範本已經在 Firefox、IE6、IE7 校正過,應該不至於會版型方面的問題,至於版面如何做進階的美化工作(字變大變小、加入圖片等等),就要麻煩使用者自行參考其他網站 CSS 的設定教學了。
7. Blogger 預設功能的限制,例如 title 背景圖片大小、排列、缺角等問題,請發函向 Blogger 詢問該功能的限制,我製作的範本是採用預設的功能。

這個網誌中的熱門文章

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

Google Doodle : Pacman 小精靈

玩玩軟路由系統