2013年2月22日

[教學]Blogger 範本﹍(1) 各種註解方式及區塊的修改

A+
這個系列的文章共有三篇,目的是為了方便修改 Blogger 範本時,可快速找到正確的修改區塊。先前發表的「讓Blogger能顯示 "單篇文章瀏覽數"」,由於這個小工具每個人想擺放的位置不一定都一樣,如此要說明擺放位置變的異常困難。

於是將範本的各個重要區塊的程式碼整理了一下,並附帶簡單說明,這樣以後除了說明方便,有篇文章可以隨時參照,自己也可將範本中的每個區塊加上註解,搜尋起來就非常迅速了。


一、範本註解方式

如果常常修改範本的話,建議在自己範本的每個區塊都加上中文註解,這樣以後只要搜尋中文註解的字串,就能很快找到對應的程式碼。

並且,範本的官方原始碼最好不要真的刪除改用註解的方式讓原始碼沒有作用即可。若將原始碼覆蓋掉,而當新裝的程式碼有問題時,除非有備份檔,否則就很難恢復原狀了。

以下內容節錄自發表在「Blogger中文社群的討論串」:

1. HTML 的註解語法:

<!-- 註解內容 -->
以上的註解內容將不會被執行。例如小工具標題的程式碼為 <h2><data:title/></h2>,若要讓標題不顯示,當然可以把這段程式碼刪除,不過建議用這樣的方式:

<!--<h2><data:title/></h2>-->

2. CSS 的註解語法:

/* 註解內容 */
例如範本中 CSS 區塊可能會看到

body {
color: $(body.text.color);
}

想要改文字顏色的色碼時,記得把原來的預設值寫到註解裡面──

body {
color: #aaaaaa ; /*預設值為 $(body.text.color)*/
}

這不是一個很好的舉例,只是為了說明概念,因為Blogger後台有更好用的改顏色工具。


3. Javascript 的註解語法:

◎ 單行註解方式:

// 註解內容

◎ 多行註解方式:

/*
註解內容
*/



二、Blogger 各區塊的語法格式

1. 配置圖:先來張 Blogger 版面配置的簡圖──



在上圖中,導覽列、網誌文章、側邊欄等等,都是一個完整的區塊,而每個區塊則分別可以塞進許多小工具,例如側邊欄的「網誌存檔」、「關於我自己」都是小工具。


2. 語法結構:每個區塊的 Blogger 語法結構都一樣,類似下面這樣:

<b:section.....>  // 這是區塊的開始
<b:widget.....>  // 第一個小工具的開始
<b:includable.....>  // 小工具的第一段程式開始
.
. 程式碼只能擺在這個區間
.
</b:includable>  // 小工具的第一段程式結束
<b:includable.....>  // 小工具的第二段程式開始
.
. 程式碼只能擺在這個區間
.
</b:includable>  // 小工具的第二段程式結束
.
. (更多程式段落)
.
</b:widget>  // 第一個小工具的結束
<b:widget.....>  // 第二個小工具的開始
<b:includable.....>
.
. 程式碼只能擺在這個區間
.
</b:includable>
.
. (更多程式段落)
.
</b:widget>  // 第二個小工具的結束
.
. (更多小工具)
.
</b:section>  // 這是區塊的結束


3. 註解程式碼:任何的 HTML、JS、CSS 程式碼,在 Blogger 語法所建構的區塊之中,只能擺放在以上「程式碼只能擺在這個區間」的位置,說的更精確一些,也就是擺放在 <b:includable.....> 與 </b:includable> 的區間。

因此要註解程式碼的話,也是得遵循這個規則,依照「一、範本註解方式」的方法,例如 "樹狀標籤程式碼" 要註釋頭尾位置,註釋擺放的位置及方法可參考以下──

<b:includable.....>
.
<!-- 樹狀標籤開始 -->
樹狀標籤程式碼
<!-- 樹狀標籤結束 -->
.
</b:includable>



三、修改小工具的設定

再參考一次版面配置的簡圖──



如上圖紅圈之處,我們會發現小工具的左邊,若有藍色活頁孔洞的話,那麼這個小工具就能 "任意拖拉、移動位置",而且編輯該小工具時有 "移除" 的選項。

對於 Blogger 預設不讓我們移動、移除的小工具,只要在範本裡更改了參數,就能達到這個目的。以頁尾的「內容出處」為例,找到這個小工具的程式碼:

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
把小工具裏 "locked" 這個參數的值 'true' 改成 'false' 即可,效果如下圖:



上面可看到,「內容出處」這個小工具的藍色活頁孔洞出現了,這樣就可以從編輯畫面將它移除了。我的作法是另外用一個「HTML/JAVASCRIPT」小工具取代,這樣才能塞得下我所有要擺的提示文字、版權宣告、圖案等等。不過吃果子要拜樹頭,Google 免費提供我們部落格平台,該給的 Credit 還是留給人家,「Powered by Blogger」這樣的文字我還是會留著。

只是,Blogger 預設不讓我們移除的小工具,先不要看了本篇就急著移除,請看完下面一篇之後再決定哪些是否移除,之後會一個個說明。


Blogger 範本」系列標題:
一、各種註解方式及區塊的修改
二、標頭、導覽列、側邊欄、頁尾區塊的程式碼
三、文章及留言區塊的程式碼

➢➢ 快速選單:

26 則留言:

  1. 大大 你的方法不太行耶 因為修改後移除工具時,儲存會顯示錯誤。後來我用以下方法隱藏起來,但隱藏的地方好像就會空一塊區域,目前就將就這樣。


    Go to template>>> customize template>>> advance>>> Add css

    #Attribution1 {display: none;}



    回覆刪除
  2. <2527423804376372240>(以上內容請勿刪除,從括號之後開始留言)
    究竟整篇文章的哪一點不太行呢?描述清楚一點才知道你在說什麼喔!

    回覆刪除
  3. 非常感謝你的分享 對我這種電腦白癡來說 真的很有用 關於最後一點 能不能請問如何完全刪掉 "Ethereal範本. 由 Blogger 技術提供." 這個頁尾宣告勒 我把它移除後 "由Blogger技術提供"還是會自動跑出來ㄟ 困擾阿...

    回覆刪除
  4. 抱歉,我還有個問題,我在建構的網頁是http://letspause.blogspot.tw/

    請問我該如何刪掉(或隱藏) 網頁中間的"訂閱: 文章 (Atom)" 跟 "在 Google 上推薦這個網址"字樣 還有前面的facebook google+等圖示? 再次感謝大大的分享

    回覆刪除
  5. <8083244174709576219>(以上內容請勿刪除,從括號之後開始留言)
    我看了你的網頁,很明顯頁尾宣告並沒有移除,請再讀一下本文的步驟吧。

    回覆刪除
  6. <197259849353977852>(以上內容請勿刪除,從括號之後開始留言)不客氣~

    1.「訂閱: 文章 (Atom)」可參考第三篇的內容

    2. 第二個問題,可以到「Blogger中文社群」詢問

    回覆刪除
  7. <5737422196135254850>(以上內容請勿刪除,從括號之後開始留言)謝謝大大 用註解方式把這些工具disable掉了 感激阿

    回覆刪除
  8. <1533833589353660467>(以上內容請勿刪除,從括號之後開始留言)不客氣,找到解決方法就好。

    回覆刪除
  9. 感謝您的清楚解釋。
    想請問,如果我想把標題的字移到右邊該怎麼做呢?
    爬了網路上的文章似乎都沒有說明到這點,實在是很苦惱啊...
    還有網誌說明的字如果太長想換行該怎麼做?
    <(_ _)>

    回覆刪除
  10. <4639808988715637288>(以上內容請勿刪除,從括號之後開始留言)想要做到一些特殊的版面調整,不曉得你有沒有 HTML / CSS 方面相關的基礎知識?假設你有的話:

    1.使用 CSS 的 float:right 可達到這個效果

    2.換行的 HTML 為 <br/>

    如果沒有的話,建議得先看一下這方面的書比較能瞭解喔。

    回覆刪除
  11. <8911415665301303594>(以上內容請勿刪除,從括號之後開始留言)^^ 看到這個留言後,我馬上有靈感把網誌標題置中,做到啦 XD

    回覆刪除
  12. <4419816525977195311>(以上內容請勿刪除,從括號之後開始留言)呵呵~舉一反三!

    回覆刪除
  13. 版主你好,請問如何刪除Simple template. 只留下 Powered by Blogger.

    回覆刪除
  14. 先將官方預定的內容出處 delete (參考這篇文章的 三、修改小工具的設定),然後自己新增小工具,並貼上 Powered by Blogger.

    回覆刪除
  15. <9102740781101810445>(以上內容請勿刪除,從括號之後開始留言)【留言 #08】ken lo 已經幫忙回答了(感謝 ken),請試試看吧!

    回覆刪除
  16. 博主你好!

    我在網上搜索,幸運地找到這裡來了。
    小弟blogspot用的是Blogger Templates網站的模版,內有一些小工具,其一是個search box,固定在敝網誌左上角,但在「版面配置」頁裡,並沒有相關小工具的方塊圖示,我進入HTML頁內,發現它的語碼不是寫在widgets區內,而是在前,語碼是這樣的:< div…(內容)…/ div >,我將它移到widgets區後(或刪掉),問題就來了。

    現在在「版面配置」頁裡,左欄所有的方塊圖示,都向上移動了,而「新增小工具」的功能就給「網站小圖示」遮蔽了,無法啟用。

    見圖:http://goo.gl/XGpbfD

    請問:
    (1) 怎樣將「網站小圖示」方塊變成可移動的?
    (2) 怎樣可自添「新增小工具」方塊圖示在其他位置?例如左側和中間的寬欄?

    期望博主援助,先謝。

    P.S. 我對HTML/CSS並不在行,看書只學了認得幾個符碼。

    回覆刪除
  17. <6135356198006126409>(以上內容請勿刪除,從括號之後開始留言)你好,看起來你的情形挺嚴重的,如本文開頭所提,不曉得你改範本之前有沒有備份?

    問題1:不可行
    問題2:你可試著到後台→範本→自訂→版面配置→改變小工具欄位的位置,看看可不可行。

    我猜測你刪了不該刪的範本重要程式碼,最好是有備份檔能還原;不然的話建議在範本→將迷你組件範本回覆為預設值。只不過這樣的話,你安裝過的 hack 就得重新來了。

    總之,以後記得養成備份的習慣吧!

    回覆刪除
  18. 感謝博主回覆。

    關於問題(1),那麼可否將「網站小圖示」的功能方塊刪掉呢?請問博主知否它在blogspot HTML裡是哪堆語碼?

    關於問題(2),小工具欄位,無論個別怎樣上下移動,它們還是整體緊貼直排的,而「新增小工具」方塊圖示,就必是置頂,恰好跟「網站小圖示」的位置重疊,所以給遮蓋了。
    圖一:http://goo.gl/4u35sr

    我有template備份,所以才不怕改動HTML。
    其實模版的searchbox語碼,撇除中間幾條的〈ul〉〈li〉…(廣告連結)…〈/li〉〈/ul〉,它基本上是這樣的:
    〈div class='searchbox'〉
    〈form expr:action='data:blog.homepageUrl + "search/"' id='searchform' method='get'〉
    〈label class='assistive-text' for='s'〉Search〈/label〉
    〈input class='field' id='s' name='q' placeholder='Search' type='text' value=''/〉
    〈input class='submit' id='searchsubmit' name='submit' type='submit' value=''/〉
    〈/ form〉
    〈/ div〉

    實在不明白它有多重要。
    我將searchbox語碼抄回原位,「新增小工具」方塊圖示即自動下移,露出按鈕,讓我啟動。
    圖二:http://goo.gl/F14xcK

    實在不明白。
    再謝過博主。

    回覆刪除
  19. <2345057218492201840>(以上內容請勿刪除,從括號之後開始留言)既然有備份,那就可以放心了~回到你的問題,如果最終目的是讓搜尋框消失的話,那麼利用CSS語法將其隱藏即可,例如你列的第一行程式碼改成以下:

    〈div class='searchbox' style='display: none;'〉

    這樣應該就可以了。

    回覆刪除
  20. 按博主指示,成功了。(讚)
    感激!^^

    回覆刪除
  21. <6658392739307065975>(以上內容請勿刪除,從括號之後開始留言)不客氣 :)

    回覆刪除
  22. 版主您好,想請問說網誌
    有辦法恢復成按"迷你組件範本回復為預設值"前的狀態嗎?

    因為按了回復為預設值後,很多小工具都不能使用,按鈕不見,
    請問也方法改回來嗎?謝謝!

    回覆刪除
  23. <3073758906451237548>(以上內容請勿刪除,從括號之後開始留言)[quote]有辦法恢復成按"迷你組件範本回覆為預設值"前的狀態嗎?[/quote]
    唯一的方法是事先備份範本。

    修改之前最好先讀過「修改 Blogger 範本的觀念 (1)備份範本的訣竅」這系列的文章:http://www.wfublog.com/2014/09/blogger-backup-skill.html

    另外這個標籤「Blogger 範本」之下的所有文章也建議閱讀:http://www.wfublog.com/search/label/%E9%9B%BB%E8%85%A6-%20Blogger-%20Hack-Blogger%20%E7%AF%84%E6%9C%AC

    回覆刪除
  24. 不好意思,我在做完新的搜尋引擎安裝後發現我的"標頭"變得無法更改大小和顏色,就連行動版預設的版本也和原網址差很多,看找了一下程式碼,但完全不知問題出在哪,我並沒有動header1啊,我讓她回復也沒效果,我現在該怎麼辦?
    old-yang.blogspot.com

    回覆刪除
  25. 我用復原的方式暫時回復了,我想問一下,這有可能是我改h1最佳化的關係嗎?我回復後最佳化就沒了,但其他的小工具都正常運作。而且我發現平常看時,標頭的文字設定和旁邊的文章標籤一樣(但沒超連結),點進文章後,顏色超連結回復正常,但大小不正常。目前已改回,但有保留舊碼,可以幫我看嗎?

    回覆刪除
  26. <7389932374023769300>(以上內容請勿刪除,從括號之後開始留言)[quote]這有可能是我改h1最佳化的關係嗎?[/quote]你是指 h1/h2 互換嗎?如果你互換了,css 沒一起改的話,自然原本的 css 效果不會套用過來

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。