Blogger Template Gadget 3.0.1 特化版(2009-08-05 更新)

Blogger Template Gadget 3.0
弄了幾天, Blogger Template Gadget 3 似乎已經有了一個樣子,應該可以丟出來了。

之前的 Gadget 2.0 其實有點惡搞,因為當時 Blogger 多了不少新功能,所以很匆忙的情況下弄了一個有 Hack 又符合原本 Blogger 附加功能的版本,但是內部很多原始碼與設定的部份並沒有真的很認真去處理,就是眼睛上看到覺得可以了,就輕輕蔡蔡丟出來了,後來自己在套別站的時候,覺得一些沒沒角角問題還不少,但是通常就眼睛一閉、兩手握拳,也就讓它過去了...

之前想到關於模板兩三事之後,就覺得應該要在弄個版本出來,而 Blogger 功能大多都已經很成熟了,也不用在搞一些有的沒的 Hack ,所以這幾天就很認真的把 Gadget 這個模板整理了一下,終於有了個樣子。

仔細看看上圖,是在 IE 8 裡面的情況,看起來好像很普通,也好像跟 Gadget 2 差不多,好像跟 Gadget 1 也一樣?(連續三個好像...(汗)),但是,似乎又有點不同吧?

如果改用 Firefox / Google Chrome / Safari 開啟套用這個範本的 Blog ,會得到下面這樣的效果:
Blogger Template Gadget 3 in Google Chrome
ㄟ~有導角耶... 既然 Webkit 跟 Mozilla 核心都提供了這些方便的 CSS 設定,不用白不用,況且連背景圖片之類的都省了,還不錯,順便把 Gadget 2 中沒有處理好得間距問題給弄了一下,並且套用了 Yahoo Lab 的 CSS Reset ,整體看起來似乎一致性比較好了吧??

跟以往一樣,各區塊、文字、顏色等等設定都是可以在版面配置當中自行設定的:
Blogger Template Gadget 3 Setting
其中說明文字跟參數對應的部份花了不少時間...希望使用者能夠更容易理解一些;

既然說是特化版,當然是要有隱藏功能才算是特化版...首先呢...看一下平淡無奇的網頁開頭部份:
header-1

接著呢,來去新增一個連結小工具,就新增自己想要增加的網址:
header-2

一般這種連結元件都是放在 Sidebar 內居多:
header-3

把這個連結元件拖到 Page Title 的上方去:
header-5

儲存後回頭重新整理網頁,看看網頁的頁首部份:
header-6
嗯,有標籤選單了...好像沒有很特殊吼?而這個 TAB 標籤頁的背景色、滑鼠選擇變色、文字顏色、連結顏色都可以在版面配置當中字型與顏色內自行設定,這樣有沒有算特殊?? :P

這樣應該可以在使用上更方便一些吧?滑鼠選擇的變色效果是用最基本的連結變色來作,並沒有用到 JavaScript 之類的東西,所以應該沒有相容性或跟其他外掛相衝的問題;同樣的在 Firefox / Google Chrome / Safari 中會看到左上跟右上都有導角的效果;如果不想使用而取消、刪除、搬移 Links 元件也不會影響到整個版面,目前測試上並沒有什麼問題,不過新增這些標籤式連結請量力而為,如果數量多到超過 TITLE 的寬度就會炸開。

and ... one more thing...

使用 Gadget 3 模板的 Blog 將會在 iPod Touch / iPhone 中的 Mobile Safari 獲得某種程度以上的相容性:
Blogger Template Gadget 3 in Mobile Safari 1 Blogger Template Gadget 3 in Mobile Safari 2
Blogger Template Gadget 3 in Mobile Safari 3 Blogger Template Gadget 3 in Mobile Safari 4
雖然沒有設定得很盡善盡美,但是至少先丟個東西出來了;或許有人會認為「 iPod Touch / iPhone 上不是可以直接瀏覽完整的網頁嗎?幹嘛脫褲子放屁多搞這個相容模式啊??」如果在那麼小的螢幕看寬度超過 800px 的網頁是很好的體驗,網路上就不會有針對 iPod Touch / iPhone 特化的網頁出現了...

而花最多的時間大概就在這個相容模式上,因為這都必須上傳檔案、轉用 Mobile Safari 開網頁、速度又很慢、看到一個小錯誤又回頭改、又重新上傳檔案、、、還要避免相容模式中的設定去覆蓋或改變了原始模板的設定,搞得很煩!不過總算是弄完了。(想到如果 metamuse 也要有這種相容模式就要再搞一次,就很想翻桌...)

如果真的覺得這個東西很脫褲子放屁,也可以把相關設定拿掉,將底下的原始碼刪除即可:
setting

另外要提醒的是, Gadget 3.0 並沒有加入任何的 Hack (像是 Read More 或是 Archive 頁面只顯示標題這類的東西),如果想要使用這類功能,請直接參考以前寫的步驟自行新增,或是建議直接使用 CJH 開發的「繼續閱讀懶人加強版」,而我在測試過後覺得套用的速度非常快速。

最後是,這個 Template 只有在當今最新版的主要瀏覽器當中測試過,如果 IE7.x 、 IE6.x 、 Firefox 2.x 等版本看會有問題的話,就請升級瀏覽器吧!(不升級就別怪沒人理你啊...)

Gadget 3 的範例網站請看此
下載、上傳,開始打造自己的 Blog 吧。下載前請記得閱讀注意事項。

update:
緊急更新 3.0.1 版,主要是因為在 CSS 設定當中忘記顧及圖片上傳後的區塊設定,造成文字位置不恰當或圖片四周有 20px 色框的問題,這個問題已經在這個版本解決,如果已經安裝套用範本的人請重新下載與安裝,或是直接 COPY 新版 CSS 區段覆蓋舊版相同區域及可;
至於 Title 圖片上傳後遭到裁剪成 768px 的問題請看此說明
提供兩張可以測試 TITLE 背景圖片設定的圖:
title.jpg : 1024*130 會爆框
title-2.jpg : 910*500 在關閉 Shrink to fit 的情況下應該要很正常;
你有一個更好的辦法回報你正在或曾經使用 Gadget 這個範本,就是 Follow 它。

這個網誌中的熱門文章

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

Google Doodle : Pacman 小精靈

自架 Android BT / NAS 機:超靜音超省錢超低功耗