2010年3月28日 星期日

試用Blogger 新版範本設計工具改版心得


Google Blogger推出了新的範本設計工具,綸太郎一定要來試看看,雖說有15個模版,百種照片可利用,真的想利用時,仍舊希望有更多的選擇,試用過程來跟大家分享,套版後發現後台Html設計的真的是有夠複雜,原先熟悉的元素定義大都改名稱了,要一項一項去測試,所以目前先以自己套用的模板,跟大家說明。

套用的模板:Awesome Inc.系列的第四種模版,為什麼選擇這個模版,


1、單篇文章背景有圓角的設計,在Picture Window系列也有,但是他是透明底圖,對於資訊類的文章,太過搶眼,不適用,不過這個圓角在IE瀏覽器是沒有效果的。
2、單張圖片有背景修飾功能,這在Watermark系列也有,不過他少了文章背景圓角功能,套用過後感覺圖片較有質感。
3、替換背景圖案相當方便,因為Awesome Inc.系列,它的底色是透明的,在四種系列當中,只有Simple系列底圖非透明,要換底圖還要修改一些東西,有點麻煩,而文章及元件的部份是設定類似白色,換背景圖不用考慮文字的色彩變更。

修改新的範本設計工具,要有一個概念就是$的用法,這代表這個元素是可變動的,會跟著你後台進階設定而有不同,例如color: $(link.visited.color);在進階裡要修改就是連結→已點閱的連結顏色。


如果你已經決定你的配色或是字體,你也可以直接修改,
例如, font: $(body.font);
改成 font: 14px;
這樣一來後台進階的設定就不會套用了,不過修改過後自己要記得,不然使用進階設定時,你會覺得怎麼改來改去還是一樣的大小,囧。

請注意:要修改前請儲存原有的模板,改壞了還可以換回來歐。

綸太郎分四大部分來說明,這是以目前我套用的模板為主,敘述或許有些瑣碎,但儘量以大家能看得懂為主。

【整體寬度】
想修改版本寬度,原本是930px,邊欄是360px,最大在後台可以拉到1000px,



整個部落格個寬度定義,是用以下這兩個語法,包裹住的,位在]]></b:skin>下方
<b:template-skin>
</b:template-skin>

所以你想讓顯示介面更大的話,就必須到後台的Html修改,找到
]]></b:skin>
<b:template-skin>
<b:variable default='930px' name='content.width' type='length' value='1000px'/>
<b:variable default='0' name='main.column.left.width' type='length'/>
<b:variable default='360px' name='main.column.right.width' type='length' value='370px'/>

這段就是控制整個版面的寬度的語法,在]]></b:skin>下面,這裡可以看到default='930px'就是最佳或是最原始的設定是930px,如果要修改就是在後面的value='1000px'你可以改成value='1280px'等等。

content.width 整體部落格的寬度
main.column.left.width 左邊欄的寬度
main.column.right.width 右邊欄的寬度

所以文章區的寬度,就是整體寬度扣掉左右邊欄的寬度自動產生的,如果你沒有左邊欄,就像上面的語法原始的寬度為0。

基本上只要修改上面的語法,這個區塊其他語法最好是不要去動他。

【分頁欄設定】
另外就是blogger最近新增的工具,頁面欄,如果想新增頁面欄,如下圖這樣,就到


版面設定→新增小工具→網頁,設定網頁清單
如果對分頁不清楚的,請參考這篇
Blogger Pages分頁功能讓您輕鬆有個導覽列
目前這個分頁欄的背景是用圖片,如果想修改背景圖案,找到後台語法
<Variable name="tabs.background.gradient" description="Tabs Background Gradient" type="url"
default="none" value="url(http://www.blogblog.com/1kt/awesomeinc/tabs_gradient_light.png)"/>

將圖片網址改成你的亦可,圖檔20*200px的圖片。

但如果你想要的是用色彩代替,像我的部落格這樣,找到
.tabs-outer {
overflow: hidden;
position: relative;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
}

直接把上面的綠色定義,換成直接下面以色彩數字的定義即可。
background: #008800;

如果想調整分頁欄裡每個項目的底色,則是以下這個定義,
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
color: $(tabs.selected.text.color);
}

跟上方是一樣的作法。

【頁尾區】
原先整個版面的背景是用 background: $(body.background);這個語法來控制,但在頁尾區卻是一片類似白色的底色,


如果想套用和你部落格一樣的背景,求一致性的話,找到
.footer-fauxborder-left {
border-top: 1px solid $(widget.border.color);
background-color: $(widget.background.color);
將紅色部分改成
background: $(body.background);
就會套用你的背景圖,如果你想用其他顏色代替亦可,就改成background: #0000FF;甚至你自己的圖片網址都可以。

但由於原先的文字顏色是灰黑色,以我選擇這個背景是深藍的,所以改了之後文字會看不清楚,所以需要再調整,因為頁尾區部份是套用全部widget的顏色設計,你可以自己調整顏色,相關的語法如下

在.footer-fauxborder-left { 這個敘述,新增
color:color: #FEFDFA;
的語法,表示文字顏色是淺灰色的

以下三個是要新增的定義
/*頁尾標題欄的顏色*/
.footer-fauxborder-left h2 {
color: #FEFDFA;
}
/*頁尾區超連結的顏色*/
.footer-fauxborder-left a {
color:#BCD8FF;
}
/*頁尾區滑鼠滑過及拜訪過的顏色*/
.footer-fauxborder-left a:visited, a:hover {
color:#FF7E28;
}


但如果你整個頁尾區都不想要,想讓他消失不見,只要在
.footer-outer {這個敘述加上
height: 0;
即可,讓他的高度變成0,就會隱藏起來,這是我目前的作法,給大家參考。

【Blogger Hacks區】
至於blogger Hacks的套用,目前綸太郎使用的有
繼續閱讀
作者和一般留言者不同
回應編號
元件縮短
發現如何利用捲軸讓邊欄(Sidebar)元件縮短裡面,在後台html加上scrolling2的語法會失敗,但是套用在小工具的部分還是可以利用的,所以目前"我在看的網誌"因為無法後台套用這個Hacks,所以只好選擇顯示5篇來減少所佔的位置,其他Hacks都能正常套用。

其實綸太郎試用過後,發現這個利用變數來設定模版的多種變化是很棒的構想,但是從後台一些語法的設計,例如以上提到的頁尾部分,我覺得原先的設計者應該還沒有設計完成,應該還有更完美的空間,但是已經很棒了,只是一下子從陽春的blogger變成彈性很大的blogger,其實真的有點難度去修改後台的東西,所以以上分享的是這次改版的經驗,至於看不懂的部份就先跳過,慢慢學習吧,畢竟三年前自己也是從完全不懂一直摸索到現在,發現有時後硬學是學不起來的,融會貫通後或是熟悉介面後才有那種原來如此的感覺,這是最近自己的發現。

2010.5.15更新,
鑒於瀏覽速度有點緩慢,所以停用新版範本設計工具的版本,回歸以前的版本。

延伸閱讀:
驚為天人的Blogger templates官方模版終於測試推出

39 則留言:

  1. 你好上進唷, 我是完全沒動力去看新的範本.
    我上個月決定要重弄模組, 結果這個月都快過完了, 我側邊欄還有一半還沒弄, 有夠懶惰...

    回覆刪除
  2. 這篇已經難產一個禮拜了,一直覺得有很多地方還是不明白,尤其是結構部份,但是簡單的改版應該還是可以的,一起努力吧。

    回覆刪除
  3. 我也開始在用了,感覺還不錯!
    我用的background image 好像沒有repeat
    上半部有下半部就都是白色的background了

    還有這個要怎麼隱藏啊?
    Template by Josh Peterson. Images by sandsun. Powered by Blogger.
    謝謝!

    回覆刪除
  4. 非常感謝,我本來也很想改,但發現與發有點陌生……我是只能看高手範例依樣畫葫蘆的人,有這篇真是太好了。

    回覆刪除
  5. To hskj127,那個在後台小工具就可以移除了,目前你的版面底色是灰色的,沒看到白的。

    回覆刪除
  6. To 毛毛牙,其實看到你一直沒有更新模版,我想新版還是修改有困難度的,所以才寫了這篇,應該很多人有類似的問題,我也還在慢慢摸索中。

    回覆刪除
  7. 用firefox看沒問題,用ie8看才會有。。
    等個幾秒上半部是灰色下半部就都是白色的咯。。

    回覆刪除
  8. 整個blog的背景是body.background,我文章有提到,如果你修改別的語法,我就不知道了。

    回覆刪除
  9. 我用的是simple所以代碼都不同我也沒修改其他的代碼...不論你是用background+顏色或是background image都只顯示上半部,下半部就都是白色的..還有關於Template by Josh Peterson. Images by hdoddema. Powered by Blogger.
    你說後台小工具就可以移除了?怎麼沒看到那邊可以移除啊?謝謝!

    回覆刪除
  10. To hskk127,小工具目前無法移除,不過我弄得時候他有選擇性的,跟現在介面不同,可能後台還在調整吧。

    回覆刪除
  11. 使用這個工具後那CSS變得很複雜
    而且之所以會有部分效果IE看不了,是因為IE不是很支援CSS3(即便是IE8)……
    這工具只有一點讓我想抱怨……會自動把一些原始小工具(e.g.文章內容)設定初始化(e.g.原本把較舊的文章、首頁設成圖片會變回文字)

    回覆刪除
  12. 應該在舊版就會這樣,每次改版都要重新裝上html,不是新版才會,不過我想是適應問題,一起慢慢學習吧。

    回覆刪除
  13. 終於利用範本設計工具完成了新模板,加上喜歡的模板背景和配色,成果還不錯。

    謝謝綸太郎分享了這篇文章,以及其他許多Blogger hack,讓我的部落格改版工作順利很多。Thanks!!!

    回覆刪除
  14. To Mulberry,你的版面看起來很舒服,很棒的改版,借分享到我的Facebook上,謝謝。

    回覆刪除
  15. 我總覺得換了新的樣式後讀取速度變慢了Q_Q 有點沮喪。

    回覆刪除
  16. 版大您好 ,

    想請問一下,文章以標籤分類後,能否以側邊攔小工具將同一標籤的文章抓出顯示?

    類似"最新文章"那樣呈現的方式

    因為這問題不知該如何查資料,只好到板大這邊問一下,造成不便敬請見諒。

    感謝

    回覆刪除
  17. To海鵬,你如果要秀某一個label的文章,就新增資訊提供,輸入網址http://yourblog.blogspot.com/feeds/posts/default/-/標籤名稱
    這樣即可,你可看看這篇http://01mistery.blogspot.com/2007/08/rss.html。

    回覆刪除
  18. 可以了 ~ 感謝板大的協助

    回覆刪除
  19. 我要怎麼做才能讓圖變大
    左,右邊界為0,成為全版面?
    照你的方法,我找不到語法
    謝謝

    回覆刪除
  20. 你是說背景圖嗎??可參考http://01mistery.blogspot.com/2010/07/background_31.html 這篇,如果是說整個寬度,因為你用的不是我說的模板,所以程式碼會有些不同,但是還是可以找到930px,這個關鍵字,你的應該是<b:variable default='930px' name='content.width' type='length'/> 把數字改成你要的大小,邊欄也是照樣修改,如果真要自己修改,建議可能做點語法的功課,會比較上手。

    回覆刪除
  21. 請問一下
    我是用google的部落格
    想說把 好站連結的網站分類一下
    請問這要去後台哪設定?

    回覆刪除
  22. 綸太郎版主你好
    我設定了.footer-outer {height: 0;}

    但是還是有顯示頁尾區耶!可以幫忙一下嗎?謝謝。(j-xiangxiang.blogspot.com)

    回覆刪除
  23. 設定 .footer-outer {display:none;} 看看
    其他的都刪除

    回覆刪除
  24. display:none這樣可以,謝謝

    回覆刪除
  25. 綸太郎~我要如何讓文章區更靠近左邊、讓右邊小工具的地方更靠近右邊,讓藍色的背景變少一點呢?
    https://lh5.googleusercontent.com/-QnY4pAJVpgk/Th1DjtShM-I/AAAAAAAAACE/WyE5zVgVjz8/s288/%25E9%259B%259C%25E8%25A8%2598_1310540625165.jpeg

    回覆刪除
  26. 我看目前你的部落格,已經調好了吧。

    回覆刪除
  27. 阿!?真的耶!我自己也搞不清楚是調哪裡...0.0

    回覆刪除
  28. 綸太郎你好,雖然我的部落格已經很久沒更新了,但最近還是試著更改模板,也是第一次使用 Blogger 範本設計工具,我是先套用「頂尖企業」中有圓角的那個模板,然後參考了別的網站的樣式加以設計,現在已經初步完成。

    有個頗弔詭的情況,分明 IE8 是不支援圓角的,但載入時會先出現直角再變圓角,這樣本來也沒什麼不好,但卻讓文章標題列的背景顏色破了功(右邊沒填滿),反而是剛載入時的直角是填滿的,所以想取消 IE 的圓角功能,但百思不得其解,希望在這裡能得到一些回應。

    另外還有一個問題讓我煎熬了好多天,就是在 IE8 觀看時頁尾(footer)底下會出現空白,不是每次都出現(時有時無才讓人困擾),網路上的方法試過很多都無效,而且有些是不適合套用在 Blogger 上的,很是困擾,我恨 IE!

    不好意思打擾你,在此恭祝你新年快樂,平安順心!

    回覆刪除
    回覆
    1. 圓角的語法是radius,把相關的語法去掉或是修正,應該是可行的。
      至於空白,我想頂尖企業第一個模版是沒有這個問題,比較麻煩的作法是比較兩者之間語法在Footer方面的差異,找出問題點在哪裡,可能多了IE不適用的語法造成的。
      我目前大都是用Firefox瀏覽器,IE很少用,因為很多時候不支援。

      刪除
    2. 我試過把 radius 設為 0,結果 firefox 的圓角是沒了,但 IE8 仍然先呈現方角後載入圓角,可見得對 IE 圓角的處理另有方式,只是在 CSS 裡我看不出來,或者是用 Javascript 方式,那我就更不懂了。

      我是想要保留圓角,只是 Blogger 對 IE 設計的圓角不理想,單單想取消 IE 的部分而已。

      刪除
    3. IE跟FF的語法支援這部分我也不太清楚,沒法幫上你。

      刪除
    4. 是 Blogger 範本的問題,已經解決。
      可參照以下文章:
      http://xox520.blogspot.com/2012/07/problems-with-ie9-and-blogger.html

      刪除
  29. http://letspause.blogspot.tw/

    綸太郎你好,上面是小弟我正試著在建構的部落格,有幾個問題想請教:
    1. 該如何修改才能讓"Posted by jerry Hsiao at 7:48 AM" 消失或不顯示 (作註解?)
    2. 該如何修改才能讓 " Recommend this on Google"與前面的各個圖示 消失或不顯示?
    3. 該如何修改才能讓 "Subscribe to: Posts (Atom)" 消失或不顯示?
    4. 如何隱藏 "Powered by Blogger"字樣 我把他刪掉後 還會自己跑出來ㄟ .... ><

    抱歉 我是個大外行 在此先多謝您的幫忙 感謝

    回覆刪除
    回覆
    1. 3跟4可用CSS修改~
      .blog-feeds, .post-feeds, .Attribution {
      display: none;
      }

      刪除
  30. 1跟2到版面配置裡的編輯文章的區塊就可選擇
    3.4現在已經都是最新版本,目前沒有研究。

    回覆刪除

設有留言驗證及核准,版主閱覽後,留言才會顯示,發問前請善用網站目錄Google搜尋功能