v 試用Blogger 新版範本設計工具改版心得 >> 0 與 1 謎詭世界
★★★請勿任意轉載本站的文章及圖片但歡迎網摘及連結並註明網站名稱與網址,勿全文轉載,彼此尊重,
是網路的基本禮儀。


>
2013 曬書節 - 萬種商品49元起!

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搜尋功能

Related Posts Plugin for WordPress, Blogger...