July 25, 2009

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 它。
By Muser Meta at 6:37:00 AM Filed under : ,

48 comments:

  1. 感謝，真的是好棒的大升級呀。（套用中）
    ReplyDelete
  2. 終於找到一個不會跑版的template了，叩謝 Muser。(跪)
    ReplyDelete
  3. 有誰用了這個 template 記得回來丟個 LINK 說一下...
    ReplyDelete
  4. 不好意思
    這個版本似乎無法直接套用Title背景圖片
    圖不會對齊
    請問是要在哪裡調參數呢？
    ReplyDelete
  5. This comment has been removed by the author.
    ReplyDelete
  6. 謝謝Muser提供的好樣板，我後來套用成功了，回來回報一下XD
    ReplyDelete
  7. 那之前的Black-Cat有打算作新的嗎？我超愛這個樣板的！
    Black-Cat只有一個地方很奇怪，就是首頁如果放太多文章（五個以上），文章開頭的日期背景就會開始消失...以我的部落格為例
    http://kuanshome.blogspot.com/

    只要首頁文章太多，有些文章的「2009年X月X日 星期X」的長條淺藍背景會莫名消失...所以我的Blog沒有弄繼續閱讀功能，而是首頁只放兩篇文章這樣。
    ReplyDelete
  9. 感謝Muser大簡單大方的版型。

    轉了3小時之後，屬於我的首頁也終於完成啦！

    http://kaizend.blogspot.com

    :)再次感謝
    ReplyDelete
  10. 補充一點…像樓上說得那樣，這版本title圖片被強縮至768pix
    可以自行在參數那裡修改嘛？
    ReplyDelete
  11. 終於可以升級升級了! 感動~
    Muser的模版真的很實用, 繼續支持!
    ReplyDelete
  12. 感謝Muser兄的Blogger Template Gadget 3.0.1，非常的好看且實用，也為我的BLOG帶來新樣式。
    為了表示敬意，特此follow，再次感謝！
    ReplyDelete
  13. Muser兄 您好..
    請問 :我套入 Blogger Template Gadget 3.0.1 樣版後,再加入Twitter html widget...但是每篇留言前的小黑點不見了 ? 然後我新增一個blog 套入樣版 測試還是一樣, 是否哪邊出錯了 ? 還是需要再改什麼地方呢 ?
    謝謝^^
    ReplyDelete
  14. 請自行新增 CSS 設定 #sidebar ui, #sidebar li。
    ReplyDelete
  15. 感謝Muser提點... 已經完成了^^
    ReplyDelete
  16. 引用文字(blockquote)功能無效果！
    ReplyDelete
  17. 範例網站中是看得出 Blockquote 的，不知道你要什麼效果？
    ReplyDelete
  18. 板大謝謝您的模板,很實用!
    想請問一下,我套用之後,文章兩邊留白很寬.
    請問這是我IE版本問題嗎?但我IE是8.0版.
    我的部落閣如下:
    http://sunglorylighting.blogspot.com/
    ReplyDelete
  19. Blockquote 無法顯示看來是我改繼續閱讀時產生的問題！原來有範例網站可看，沒發現，囧～先謝了
    ReplyDelete
  20. 感謝模板，已經愉快套用～（拜謝）
    ReplyDelete
  21. 我成功套用了！
    也把我常用的Hack都成功套用上去了！
    真是感謝！

    只是有個小問題，
    就是很奇怪，我的側邊元素的名稱顯示都變成粗體了
    也不知道問題點在哪邊呢...

    http://notfound.twgogo.org/
    ReplyDelete
  22. 套用沒多久(還沒做更動)
    主標題跟副標題間隔變大
    圖跟最上面導覽列分離了@@
    時間字體突然變大
    http://yentz.bboy.tw
    可以幫我看看怎麼回事嗎?
    從"字型與顏色"那邊預覽卻是正常
    ReplyDelete
  23. 我改用coffee 1.5了 :)
    比較順利
    ReplyDelete
  24. 我也套用囉!
    不過還在陸續建置中...
    ReplyDelete
  26. 謝謝你的blogger template，十分實用！從gadget2.0昇級到了3.0.1，真不錯！再次謝謝
    ReplyDelete
  27. 您好，使用這個模板的時候，假如用Google新開放的Read more功能，會把sidebar擠到下面去，不知道是什麼問題呢？
    ReplyDelete
  28. 你可以前往範例網站看看示範的文章，我試用 Google 新開放的功能一切正常，基本不可能是 Read More 的問題，用這個範本的使用者不少，我看到都是正常的。

    我看了你的 blog ，你早就把範本修改過了，那早已不是原始的，千萬不要修改了範本、自己造成問題後還回來回報問題，除非你真的知道問題發生在哪裡，ok？

    你有修改的部份可能要請你自己先回復到最原始的，最好的方法就是重新套用最原始、你下載的範本、然後 Revert widget template to default 一次，如果發現是「原始的範本」有問題，再來回報，這是確認問題的最基本態度與方法。如果你已經修改過了，沒人幫得了你。
    ReplyDelete
  29. 敝人回報之前已經嘗試過「將迷你組件範本回復為預設值」、「重新上載下載好的範本」，當然還是擠下去了。

    剛剛又實驗了一次，結果還是一樣，我把Blog的狀態留下來給您檢查，敝人對這個問題也很困擾。為了顯示出結果，敝人加了「網誌存檔」這個小工具。

    順便問一下，難道把網頁元素全部刪除、重新上傳原始範本、又將迷你組件範本回復為預設值之後，還有什麼東西要刪除的嗎？
    ReplyDelete
  30. 剛剛發現只有首頁有問題，點進去內文之後就不會被擠下去了，真的是好奇怪...orz
    ReplyDelete
  31. 你把 Magic School Poster 那張過大的圖片刪除試試看？
    ReplyDelete
  32. 果然是圖片的關係，不過因為我設立這個blog的目的就是放設計作品上去（老師也有指定要多寬，所以後來我才改的，看來可能還要改一些地方），所以敝人暫時放棄"readmore"功能好了，反正我也打算先用老方法，只是我搞不懂為何會這樣呢（汗）
    ReplyDelete
  33. 如果你老師有指定要多寬，你可以改成縮圖點擊另開視窗呈現原長寬吧？不然就用別人的範本吧。
    ReplyDelete
  34. 你好，我多次嘗試把標題加上圖片，也使用了你提供圖片來測試，但一直會出現"請修正此表單中的錯誤"的結果，請問要如何解決呢？
    我只有增加小工具以及複製了一段相關文章的語法進去而已，其他都是原本的範本內容沒有改動，此外，我也有重新下載一次原本沒更動的範本來嘗試看看能不能改標題圖案，但依舊出現"請修正此表單中的錯誤"
    先感謝你的回答！
    ReplyDelete
  35. 成功的套用了。我調整了欄寬，顏色，並且加上新的title圖片，原來的小工具也都加上去了。改版過程順利，運作一切正常，非常謝謝您提供的版模。
    ReplyDelete
  36. http://tracy-study.blogspot.com
    這位就改得很好。
    ReplyDelete
  37. 我跟Kaxo有同樣的問題, 不過已經找到解決方法啦, 希望其他人可以成功, 請不要把jump break放在[div][/div]之內, 不然的話sidebar就會擠下去了.
    ReplyDelete
  38. 為什麼 jump break 會在 [div][/div] 之間？？？？
    會用到 jump break 不是在寫文章時於 Compose Mode 當中插入的嗎？你們是改成 HTML 編輯文章後自行加入 [!-- more --]？？
    ReplyDelete
  39. http://jacrozeng.twbbs.org/
    我這邊引用了這個模版囉 感謝!!
    不過我在posts跟comments的地方似乎有點位置會跑掉
    這邊該如何修正呢?!
    ReplyDelete
  40. 報告，成功套用了。
    重新下載了更新後的版本
    修改了了一下
    不過把大大的claim去掉了>m<
    如果需要加上，請告知。

    http://sweetmikaaa.blogspot.com/
    ReplyDelete
  41. 我也套用了
    不過有個問題，
    就是如果main-wrapper 跟 sidebar不齊高要看麼改？

    謝謝
    ReplyDelete
  42. 我想請教一下
    我套用之後，導覽列就消失不見了@@"
    請問要怎樣才能弄回來呢
    ReplyDelete
  43. 注意到一件事
    如果DNS改成blogger以外的時候（通常都是twbbs.org的服務）
    那種字型突然變大的情況就會出現
    但是如果在預覽介面裡面，因為網址不是twbbs開頭
    而是blogger或google開頭，字型就會正常

    試著把
    ＜link href='http://place.metamuse.net/css/reset-min.css' rel='stylesheet' type='text/css'/＞
    ＜link href='http://place.metamuse.net/css/fonts-min.css' rel='stylesheet' type='text/css'/＞

    這段移除，就會發現字型不管在主控台還是正常首頁都會調不動

    會不會是Google Site的檔案本身就會有連外限制了呢？
    我試著把reset-min.css跟fonts-min.css這兩個檔案下載下來，傳到我自己的Google Site空間並改寫那兩行HTML碼，結果是除了Google Chrome以外的瀏覽器都看到字型跑掉（我測試時用IE8跟Firefox 3.6）

    一點想法，說不定對上面網友的困擾有幫助。
    ReplyDelete
  44. This comment has been removed by the author.
    ReplyDelete
  45. 請教一下，在opera 10.5上導角會不見，請問語法上要怎樣修正呢?謝謝。
    ReplyDelete
  46. 那些導角是用css針對 firefox 與 Webkit 設定的，沒有針對 opera 加工，請自行加入囉～
    相關 css 教學請上網搜尋捏～
    ReplyDelete
  47. 首先要感謝你，你的 template 真的太太太棒了，我都不想用別的說：http://timvivian.blogspot.com/

    我想請問一下，posts 裡，顯示分享按鈕沒有出來…請問怎麼讓它出來呢？謝謝你的分享！

    你真的太棒了！
    ReplyDelete
  48. 您好,我想請問一下您現在的版型,最上面的
    aptureTMMBar,是如何用的可以教我或是有相關資料可以查看嗎?謝謝!
    ReplyDelete

Subscribe to: Post Comments (Atom)