Blogger 版面配置切割任意欄位的技巧﹍方便安裝小工具

Blogger 版面配置切割任意欄位的技巧﹍方便安裝小工具

A+
blogger-custom-layout-Blogger 版面配置切割任意欄位的技巧﹍方便安裝小工具最近進行 WFU BLOG 改版,需要在新版型上切出一些欄位,來安裝小工具。如果使用官方範本,那麼這是很簡單的事,後台就有各種的欄位樣式可以選擇,看要將區塊切成 2 等分或 3 等分都行。

如果熟悉 CSS 的話,自己切版也很容易,而缺點就是切出來的區塊無法安裝小工具,只能將所有程式碼塞在範本中,造成日後管理的麻煩。

那麼本篇就來紀錄如何 Hack 範本,達到以上的需求。



一、官方範本切割欄位


後台主題 → 自訂 → 版面配置,可看到下圖畫面:

blogger-custom-layout-1-Blogger 版面配置切割任意欄位的技巧﹍方便安裝小工具

這裡可以選擇版面的切割方式,例如選擇紅框處,就能將頁尾切割成等比例的三個欄位,各自都能新增小工具。



二、自己切版的缺點


使用 CSS 我們自己也可切割版面,例如要將某個區塊切成 3 等分的欄位,只要設定 width: 33.3%,然後看要不要加上 float:left。

但這樣的方式,日後想要調整內容、或是新增外掛時,都得進入範本中編輯,其實沒有那麼直覺、方便。

以 WFU BLOG 目前的頁尾為例,長得像這樣:

blogger-custom-layout-2-Blogger 版面配置切割任意欄位的技巧﹍方便安裝小工具

注意到紅框處的 "編輯圖示" 按鈕了嗎?這三個區塊是使用官方版面配置功能產生的,所以不用到後台,在頁面上就能直接編輯小工具,對於日後管理、調整清單內容非常的方便。


blogger-custom-layout-3-Blogger 版面配置切割任意欄位的技巧﹍方便安裝小工具

上面是這個頁尾 3 等份欄位,在後台版面配置的示意圖。

官方版面配置的功能是很方便沒錯,但問題來了:

  • 如果我想切成 3 等分的區塊,不是在頁尾,要怎麼做呢?
  • 我沒有要切成 3 等分,只想產生一個區塊能自行新增小工具,又要怎麼做呢?



三、製作滿版欄位


1. 提醒事項

本文接下來的操作都很危險,建議非常熟悉修改 Blogger 的讀者再進行。

在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。


2. 100% 寬度欄位

在網頁上切割出一個區塊,佔用 100% 寬度,且能增加官方小工具,這件事比較簡單一些。

在範本中自訂的位置,新增以下程式碼即可:

<b:section class='自訂字串' id='自訂字串' showaddelement='yes'/>

將 "自訂字串" 改成你想使用的英數組合字串即可。

儲存後,在後台的版面配置,就可看到這個新增的欄位了。


3. 範例

blogger-custom-layout-4-Blogger 版面配置切割任意欄位的技巧﹍方便安裝小工具

就像本站首頁,導覽列下方的輪播區塊,就是使用這個方法做出來的。



四、切割任意等分欄位


要等比例切割欄位,就非常複雜了,以下操作請非常小心,別把範本搞壞了。

1. 官方巨集程式碼

如果是官方範本,一定會有以下這一大段程式碼:

<macro:includable id='sections' var='col'>
.
.
.
</macro:includable>

如果你的範本沒有,請開個新網站,把官方範本這段程式碼複製過來,位置可貼在 </body> 的後面。


2. 新增區塊

接著在範本中,你想要新增等比例欄位的自訂位置,加入以下程式碼:

<macro:include id='test-sections' name='sections'>
<macro:param default='2' name='num' />
<macro:param default='test' name='idPrefix' />
<macro:param default='test' name='class' />
</macro:include>

  • 藍字 test 請改成自訂字串
  • 紅字 2 請改成你要切的欄位數

改完後先別儲存,否則你一定會後悔的,請繼續下個動作。


接著將以下程式碼,放在範本中 </html> 之前:

<b:section-contents id='test-1' />
<b:section-contents id='test-2-1' />
<b:section-contents id='test-2-2' />

  • 藍字 test 請改成自訂字串
  • 以上可看到數字只編到 2-2,代表切成 2 個欄位。如果要切成 4 個欄位,請複製同樣的一行內容,一直續編到 2-4 即可。

完成以上所有動作後,現在可以按儲存了


3. 版面配置效果

在後台切換到版面配置的畫面,看看欄位的變化。


blogger-custom-layout-5-Blogger 版面配置切割任意欄位的技巧﹍方便安裝小工具

如上圖,出現了我們創建的 test 區塊:

  • 第 1 排固定會出現滿幅的區塊
  • 第 2 排就會出現我們需要的等比例欄位區塊。如果當初設定成 3 等分,這裡就會出現 3 個欄位。

以上這些流程就是最困難的部分,完成之後,就可以開始新增工具,並調整 CSS 版面樣式了。


更多 Blogger 語法相關文章:

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。
◎ 非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP