Blogger - 啟動「加入網頁元素」功能的語法
會寫這篇文章，主要是「羊男三欄式Gadget1.1樣版」用到最後，卡在不能新增 icon 圖示，我試的結果，都會有問題，偏偏我不會寫程式，但是不懂得讀資料的語法也沒辦法改…
只好再上網找其它漂亮的三欄式樣版，後來找到了
geckoandfly：http://www.geckoandfly.com
它老兄的尊容應該很多人都不陌生，在 blogger 的可供選擇樣版裡都會發現它的蹤跡，嗯，有 google 的保證，就拿它的來改吧…
當我把準備替換的樣版改得差不多時，結果發現，它只有寥寥兩、三個新增網頁元素功能（驚！）這哪夠啊～我的姑奶奶，你可別叫我再重找樣版呀，趕緊上網找補救方法，還好有找到。
瞭解之後，發現這個步驟並不會太難，底下就是實做方式
首先呢，你是否對你的樣版基本構造有初步瞭解？沒有的話，先眯一下底下這個：
在 blogger 樣版中，用來啟動「加入網頁元素」功能的語法叫<b:section>
<b:section class='xxxxx' id='xxxxx' preferred='yes'>
</b:section>
註：xxxxx 的命名基本上沒限制，但建議與所插入的位置區塊名稱有關聯
<b:section>屬性說明：
<b:section> 標記可以包含下列屬性：
* id: (必要) 獨一無二的名稱，只包含字母和數字。
* class - (選用) 意見類別名稱為 navbar、header、main、sidebar 和footer。 如果您在稍後切換範本，這些名稱可協助 Blogger 判別如何以最好的方式來轉移您的內容。 不過，您也可以使用不同的名稱。
* maxwidgets: (選用) 此區段中允許的小裝置數量上限。 如果未指定，表示沒有限制。
* showaddelement: (選用) 可以是 yes 或 no，yes 為預設值。 此屬性可判別 [網頁元素] 標籤是否要在此區段中顯示 [新增網頁元素] 連結。
* growth: (選用) 可以是 horizontal 或 vertical，vertical 為預設值。 此屬性可判別此區段中的小裝置是並排還是堆疊。
註：找不到 preferred 這個屬性 @_@ 怪怪…
現在語法知道了，接下來你可以做下一步，瞭解如何找位置新增語法。
找 wrapper：
而在 blogger 樣版中，可用來新增『啟動"加入網頁元素"功能的語法』的區塊，它通常是被命名為 #xxx-wrapper ，所以你可以用 Ctrl+F 下去找 wrapper，如果找不到的話，那可能是設計者使用了別種命名方式，省略了wrapper這個字，像我的就是…
找 <b:section>：
或者直接找 <b:section> ，應該都會找到一、兩個，接著再與底下的動作做對照，即可有所理解，如果都沒有……
…你確定你找的 blogger 的樣版？
從<b:skin>看語法，再找<div id='xxx' ：
你也可以從 <b:skin> 開始慢慢看語法，找前面有個# 井字號的項目，#xxxx的命名通常是有意義的，像是：#header、#entry、#right、#left、#rightsub1…等等，至於有些項目是 #header title 兩個字連在一起的，那個不用去管它，那個與本文無關，接著你再找<div id='xxx' 試試，互相對照一下，大致瞭解一下 #xxxxx 有哪些之後，就可以準備新增語法了。
不過，想要新增網頁元素，由好到壞，通常會有三種情況：
- 原本有<b:section>語法，只是被禁止
- 原本沒有<b:section>語法，要重新新增
- 連放語法的地方都沒有，要重新定義div區塊以供新增語法
第一個情形：原本有<b:section>語法，只是被禁止
以我使用的樣版為例，一開始在 header 是沒有可新增網頁元素的
但是我在尋找 <div id='header' 之後發現到
<div id='header'>
<div id='sitetitle'>
<b:section class='header' id='header' preferred='yes' showaddelement='no'>
<b:widget id='Header1' locked='true' title='自定義範本用 (標頭)' type='Header'/>
…底下省略…
已經有 <b:section> 語法了，只是被 showaddelement='no' 禁止了，所以我們只要將 showaddelement='no' 改為 showaddelement='yes' 即可。
第二種情況：原本沒有<b:section>語法，要重新新增
同樣以我使用的樣版為例，在網頁底部是沒有「加入網頁元素」這個功能的
也找不到<b:section>語法，這時候就要自己找位置新增啦，我找到了<div id='footer'>與 </div>這段語法，並在其中</div> 之前，新增了<b:section>的語法，如下圖所示(點圖放大)，這樣就能成功新增了。
第三種情形：連放語法的地方都沒有，要重新定義div區塊以供新增語法
…其實我是想說：你要不要直接個樣版啊？(喂喂喂，說好不打臉的啊…)
如果你仍然想自己動手做的話，也是可以，不過我只講簡單做法，因為那要看你的樣版決定怎麼做，實在沒有什麼一定的做法。
以普通的樣版來說好了，通常上面有 header ，左、右兩邊是Posts及Sidebar，footer就不一定有，所以以重新定義 footer 來講的話，
在<b:skin>與 </b:skin>之間新增底下語法
#footer{
clear:both;
color:#888;
text-align: center;
font-size:80%;
}
註：上述是定義 <div> 區塊的屬性
接著是在HTML裡用<div>語法裡新增一個 footer 區塊，借用上面那張圖來說（藍色箭頭），可以看出來它把 <div id='footer'> 與</div>添加在 content-wrapper 的 </div>之後，在 outer-wrapper 的</div> 之前，至於為什麼…
請自行查詢 HTML的基本使用，即可明白大包中，中包小，兩兩一對，頭尾各一個的意思
接著再照第二種方法來做即可。
以上！講完。
Technorati 的標籤：blogger hack,widget tags,section tags,Page Elements Tags
Recent Comments