2013年3月18日

[教學]Blogger 範本﹍(2) 標頭、導覽列、側邊欄、頁尾區塊的程式碼

A+
本篇的內容為 Blogger 範本各個區塊的程式碼整理,包含除了文章區塊外的所有區塊(標頭、導覽列、側邊欄、頁尾區塊),並附帶簡單說明。建議參考系列文「第一篇」,在範本中加上註解,如此日後搜尋、修改都很方便。

以下大標題依照範本中出現的順序排列──


一、官方導覽列

<b:widget id='Navbar1' locked='true' title='導覽列' type='Navbar'>
<b:includable id='main'>
.
. 官方導覽列程式碼
.
</b:includable>
</b:widget>

1. 這個區塊可參考這個「Blogger中文社群討論串」將其隱藏起來。

2. 建議不要刪除「官方導覽列」這個小工具,因為裡面的程式碼綁定了一些重要功能,例如 "小工具的快速編輯圖示";如果把「官方導覽列」刪了,會導致這些圖示消失而無法快速編輯。因此如果不想看到「官方導覽列」,建議隱藏就好。



二、標頭區塊(HEADER)

1. 整個區塊的範圍

<b:widget id='Header1' locked='true' title='WFU BLOG (標頭)' type='Header'>
.
.
</b:widget>

以上為整個區塊程式碼的範圍;title 後面的藍色字串是自己部落格的名稱。

可參考「第一篇」,將 locked 的參數由 "true" 改為 "false",便可將「標頭」區塊拉到別的位置。

實際的應用可參考「將 Blogger "標籤" 小工具放在導覽列實作」,讓「標頭」區塊的位置跑到「網頁」小工具的下方。

2015.3.3 補充:可參考「BLOGGER 標頭區塊判斷標記資料」有更詳細的整理。


2. 網站名稱

<b:includable id='title'>...</b:includable>
在標頭區塊中,以上區間為顯示 "網站名稱" 的程式碼;其中代表網站名稱的字串為 <data:title/>


3. 網站敘述

<b:includable id='description'>...</b:includable>
在標頭區塊中,以上區間為顯示 "網站敘述" 的程式碼;其中代表網站敘述的字串為 <data:description/>



三、水平功能導覽列("網頁"小工具)

<b:widget id='PageList1' locked='false' title='網頁' type='PageList'>
.
.
</b:widget>

1. 這個區塊是指官方的「網頁」小工具,以上為整個區塊程式碼的範圍。

「網頁」小工具最好不要移除,否則將來要裝回去可能困難重重。因此,如果不想顯示官方「網頁」小工具的話,可以在後台選擇將其隱藏起來,如下圖:




2. 如何將「網頁」小工具改成下拉選單,是詢問度很高的功能,可參考這篇文章:



四、側邊欄

側邊欄小工具的程式碼結構都差不多,請按以下範例程式碼舉一反三即可。


以上 A~M 為一般小工具的程式碼結構。

A:紅色字串為小工具的標題字串,通常在範本裡搜尋標題字串就能找到目標小工具區塊。

B:如果這個小工具只有一個程式區段,那麼結構就會是 B~L 行這樣,B 行的 id 名稱會是 'main';如果有多個程式區段,那麼就會有多個類似 B~L 行的結構,但是起始的 id 名稱會不同。

C~E:顯示小工具標題的程式碼;如果不想顯示小工具標題,將 D 行註釋起來即可,就像這樣:<!--<h2><data:title/></h2>-->

F~K:這個區間為小工具真正執行的程式碼;如果是「HTML / Javascript」小工具的話,G~I 只會顯示 <data:content>,這個字串代表輸入到「HTML / Javascript」小工具的所有程式碼。

J:這一行代表「快速編輯的小圖示」,不過不一定總是在這個位置。

「側邊欄小工具」必須小心的是,儲存在小工具的內容,似乎沒有辦法備份,萬一不小心刪除了小工具,裡面的資料就再也無法恢復!例如我曾誤刪了「網誌清單」小工具,結果裡面的所有網址連結再也無法恢復,只能憑印象一個個手動增加回去,但結果就是一些好網站的網址還是忘了...

因此填入側邊欄小工具的內容,例如各種網址連結資料、「HTML / Javascript」小工具的程式碼,都得自己另外備份才保險。



五、頁尾版權宣告

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
<b:includable id='main'>
.
.
</b:includable>
</b:widget>

這個小工具如果刪除的話,倒是沒什麼危險性。刪除的方法及替換方式請直接參考「第一篇」→「三、修改小工具的設定」即可。



接下來,下一篇要介紹的是範本裡最重要的「文章及留言區塊」程式碼。


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

➢➢ 快速選單:

15 則留言:

  1. 版大 我想問下 我有把導覽列設置移到下面去了
    那現在我想把網頁標頭設置在原來導覽列的位置
    可是下方的"網頁"會跑上來覆蓋掉標頭的圖片
    http://zsbakingdiary.blogspot.com/
    麻煩幫我看一下 這要怎麼處理

    回覆刪除
  2. <8164736626207177422>(以上內容請勿刪除,從括號之後開始留言)請提供你後台版面配置的分佈圖,看看是什麼情形。

    回覆刪除
  3. <6122764599338969826>(以上內容請勿刪除,從括號之後開始留言)
    https://lh3.googleusercontent.com/-3ZYRZjny2Mw/U1pFdCTSnAI/AAAAAAAAF1w/GwZXfHqzXrY/w958-h766-no/24.jpg

    回覆刪除
  4. <7174990746855860357>(以上內容請勿刪除,從括號之後開始留言)你的 "網頁" 下方有兩個 "新增小工具" 的欄位,把 "網頁" 拉到這兩個欄位的下方試試看。

    回覆刪除
  5. <1191788370809955437>(以上內容請勿刪除,從括號之後開始留言)
    嗯...還是不行耶...

    回覆刪除
  6. <402626473097743151>(以上內容請勿刪除,從括號之後開始留言)那我只好建議你想辦法把所有小工具拉回原本位置,恢復正常後,再一個一個慢慢嘗試變動,畢竟你現在做的,可能是超乎blogger預期的事情。我無法進入你後台,所以也沒什麼法子了。若你非常需要讓某些想法實現、又試不出來,需要私人諮詢時,再用表單與我聯繫了。

    回覆刪除
  7. 複製過來了!

    想問一下,如果想要在網誌標題旁邊加上搜尋的話,該怎麼找呢?(想安裝顯示的位置就是WFU大的「本站Hack及工具」這三個網頁的位置。目前已經知道導航列的位置如何安裝了,倒是不太清楚怎麼可以做到出現在頭部,也嘗試過轉導航列的ID轉換成HEADER1這個ID,可是仍然不成功

    回覆刪除
  8. <8150747322225497096>(以上內容請勿刪除,從括號之後開始留言)可以將程式碼插入「二、標頭區塊(HEADER)」→「3. 網站敘述」的區塊,然後替你的搜尋框區塊設定 CSS,例如 float, margin 等參數再來細調位置。

    回覆刪除
  9. 你好, 有關隱藏"側邊欄"求助
    我用的是標準Blogspot範本, 右側邊欄 id是 'sidebar-right-1',
    可以一開首用 style 把它隱藏 #sidebar-right-1 {display:none;}
    我希望用 cookie 讀入即時控制 display 是 none / block,
    但是用 Javasprict 不能用 sidebar-right-1.style.display=none; 這種語法, 只可以用 getElementById("sidebar-right-1") 這一個.
    問題是, sidebar-right-1 是最後寫入網頁, 如果用讀入 cookie 後由 getElementById 處理, "側邊欄 "會出現一段短時間, 之後才會隱藏, 而不能未寫入之前, 已經準備好 display=none 馬上隱藏.
    請問有沒有更好的方式處理這個問題呢 ?
    言身寸 言身寸 亻尔

    回覆刪除
  10. <7309622170786699546>(以上內容請勿刪除,從括號之後開始留言)雖然沒有十分了解你的描述,不過大概知道你的問題出在哪,getElementById 執行時必须這個 id 有存在,如果在 head 執行,dom 還沒建立,自然抓不到id, 所以這部份的 js 最好在 body 底部執行

    回覆刪除
  11. <4966199577301220660>(以上內容請勿刪除,從括號之後開始留言)
    先謝謝你的回覆,
    我希望的情況是由cookie先讀入"隱藏"這個資訊, 馬上設定了 display:none.
    那麼便不用等待 sidebar-right-1 在網頁成立後再由 getElementById 讀取處理.
    "側邊欄"便不會出現一段短時間才隱藏.
    現時我的網誌已經是用 getElementById 方式, 效果還是差了一點點.
    http://freetongdiy.blogspot.hk/

    回覆刪除
  12. <8871689431795168874>(以上內容請勿刪除,從括號之後開始留言)我瞭解你的意思了,想要在 head 就根據 cookie 設定 css 的狀態。js 做得到這件事, 動態把一個 style 標籤含 css 的內容插入 head 之中即可.

    但一樣建議不要把這段 js 放在 head 之間, 可放在 body 的第一行執行,這樣存取 head 標籤比較能跨瀏覽器支援.

    回覆刪除
  13. <1736132332332666347>(以上內容請勿刪除,從括號之後開始留言)
    "js 做得到這件事, 動態把一個 style 標籤含 css 的內容插入 head 之中即可."
    可不可以提供一個例子嗎 ?
    我用 JS 處理 sidebar-right-1.style.display="none"
    可惜系統不受理.

    回覆刪除
  14. <6231379291211762536>(以上內容請勿刪除,從括號之後開始留言)實作方式可以有很多種,用 jquery 會比較簡單, js 的話程式碼比較冗長, 可 google 關鍵字 insert style in head js

    回覆刪除
  15. <3222903779595355016>(以上內容請勿刪除,從括號之後開始留言)
    試用了 insert style in head 這個方法, 可惜相關 JS 代碼比較複雜, 需要時間執行, 結果跟之前的差不多, sidebar-right-1 還是會閃現一下才隱藏.

    回覆刪除

張貼留言注意事項:

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