Gadget 3.0.1

Blogger Template Gadget 3.0

上圖,是在 IE 8 裡面的情況,如果改用 Firefox / Google Chrome / Safari 開啟的話,將會得到下面這樣的結果:
Blogger Template Gadget 3 in Google Chrome
有導角,還不錯,順便把 Gadget 2 中沒有處理好得間距問題給弄了一下,並且套用了 Yahoo Lab 的 CSS Reset ,整體看起來似乎一致性比較好了。

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

首先,這是一般的網頁頁首情況:
header-1

接著新增一個連結小工具:
header-2

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

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

儲存後回頭重新整理網頁:
header-6
連結元件會變成標籤選單,在滑鼠選擇時候也有變色的效果,這是用最基本的連結變色來作,並沒有用到 JavaScript 之類的東西,所以應該沒有相容性或跟其他外掛相衝的問題;這個 TAB 標籤頁的背景色、滑鼠選擇變色、文字顏色、連結顏色都可以在版面配置當中字型與顏色內自行設定;

同樣的在 Firefox / Google Chrome / Safari 中會看到左上跟右上都有導角的效果;如果不想使用而取消、刪除、搬移 Links 元件也不會影響到整個版面,目前測試上並沒有什麼問題,不過新增這些標籤式連結請量力而為,如果數量多到超過 TITLE 的寬度就會炸開。

使用 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 特化的網頁出現了...

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

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

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

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

關於範本中 Title 圖片的問題請看 About Title Pitures
Gadget 範本目前是合的圖片寬度為 910px 大小的圖片;
測試圖片可用底下兩張圖片 title.jpg 與 title-2.jpg。
ċ
gadget-3-0-0-pure.xml
(33k)
Muser M,
Jul 24, 2009, 3:11 PM
ċ
gadget-3-0-1-pure.xml
(37k)
Muser M,
Sep 29, 2009, 1:52 AM
ą
Muser M,
Aug 4, 2009, 9:47 AM
ą
title.jpg
(99k)
Muser M,
Aug 4, 2009, 8:40 AM
Comments