在Blogger安裝側邊攔分頁功能
 | 隨著部落格使用，小工具越增越多，版面空間越來越少 有不少小工具並不常用，那怎麼不把那些小工具整合起來，要用的時候再點開，版面也可以看起來整齊多了~ |
教學來源於WFU Blog，第一次弄本來要整合官方小工具，結果發現我要整合官方小工具的不支援，結果最後全用HTML小工具整合去了╮(￣▽￣)╭，過了一陣子我想做官方小工具和HTML小工具整合，結果搞了半天才發現是個小問題orz
身為複製貼上的語法白癡，我覺得一定有很多人跟我一樣白癡，當初搞了這麼久，死活都出不來，不記下來怎麼對得起我自己(望天
PS. 其實是因為教學有4篇，扣掉隨機分頁功能，三篇我在那邊切來切去找問題，覺得太麻煩了，乾脆自己整理一份，下次自己看XD
Step 1. 請新增一個HTML小工具，貼上以下程式碼
※ 如果你有整合官方小工具一定要去版面配置，將官方小工具拖到新增的這個HTML小工具之上
<style type='text/css'>
.Menubox_over {
color: #333;
font: bold 14px arial;
border-top: 1px solid #777;
border-left: 1px solid #777;
border-right: 1px solid #777;
border-bottom: 3px solid #fffff5;
border-bottom: 2px solid #fffff5\9;
border-top-right-radius: 5px; //頁籤右上角顯示為圓角，0為方角
border-top-left-radius: 5px; //頁籤左上角顯示為圓角，0為方角
padding: 2px 5px 1px 5px;
cursor: pointer;
background-color: #fffff5;
}
.Menubox_out {
color: #333;
font: bold 14px arial;
border-top: 1px solid #777;
border-left: 1px solid #777;
border-right: 1px solid #777;
border-bottom: 1px solid #777;
border-bottom: 0px solid #777\9;
border-top-right-radius: 5px; //頁籤右上角顯示為圓角，0為方角
border-top-left-radius: 5px; //頁籤左上角顯示為圓角，0為方角
padding-top: 2px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 2px;
padding-bottom: 0px\9;
cursor: pointer;
background-color: #ddd;
}
</style>
<div style="margin-top: 5px; border-bottom: 2px solid #777;">
　<span class="Menubox_over" id='one1' onclick='setTab("one",1,3)' title='鼠標停留提示1'>分頁1名稱</span> <span class="Menubox_out" id='one2' onclick='setTab("one",2,3)' title='鼠標停留提示2'>分頁2名稱</span> <span class="Menubox_out" id='one3' onclick='setTab("one",3,3)' title='鼠標停留提示3'>分頁3名稱</span>
</div><p/>
<div id='con_one_1'>
第一個 HTML 小工具內容
</div>
<div id='con_one_2' style='display:none'>
第二個 HTML 小工具內容
</div>
<div id='con_one_3' style='display:none'>
第三個 HTML 小工具內容
</div>
<script>
function setTab(name,cursel,n){ //如果有一個以上的分頁小工具，之後的小工具不用加入橘色這部分
for(var i=1; i<=n; i++){
var menu = document.getElementById(name + i);
var con = document.getElementById("con_" + name + "_" + i);
menu.className = (i == cursel) ? "Menubox_over" : "Menubox_out";
con.style.display = (i == cursel) ? "block" : "none";
}
}
(function() { //如果有官方小工具，要加上紫色這部分
var a = document.getElementById("CustomSearch1"),
b = document.getElementById("Label1"),
c = document.getElementById("PopularPosts1"),
x = document.getElementById("con_one_1"),
y = document.getElementById("con_one_2"),
z = document.getElementById("con_one_3"); //最後一項必須是分號，原來問題在這裡orz
x.innerHTML = a.innerHTML;
y.innerHTML = b.innerHTML;
z.innerHTML = c.innerHTML;
a.parentNode.removeChild(a);
b.parentNode.removeChild(b);
c.parentNode.removeChild(c);
} )();
</script>
Step 2. 修改
- one表示你的第一個分頁小工具，如果有一個以上分頁小工具，第二個分頁小工具所有one請改成two，以此類推
- ("one",1,3)，3表示分頁數量(你整合的小工具數量)
- 　是分頁左邊右縮的空格，不想要空格可刪除
- 是分頁跟分頁間的間隔，不想要空格可刪除
- CustomSearch1、Label1、PopularPosts1是官方小工具HTML範本裡顯示的id，到HTML範本裡搜尋小工具的名稱，可以找到<b:widget id='OOOO' locked='false' title='小工具的名稱' type='XXXX'>，其中藍色部分就是官方小工具的id
PS. 不是所有官方小工具都可以整合 - 要整合的小工具如果是HTML小工具，可以直接把內容複製到"第X個 HTML 小工具內容"的位置，用這方法原來的小工具就可以刪除了
- 同上，也可以用官方小工具的方式，<b:widget id='HTML*'.....>，讓小工具看起來在一起而已，這方法設定完後，整合的小工具也不可刪(為什麼我知道呢，
因為我手賤刪掉過 - 隱藏整合的小工具名稱，如果小工具名稱不可空白，會顯示在整合的分頁小工具下，去後台找到該小工具約第三行：
<b:if cond='data:title'><h2><data:title/></h2></b:if> 改成
<!--<b:if cond='data:title'><h2><data:title/></h2></b:if>--> - 有用WFU的熱門文章，整合進去後格式會跑掉
在範本中搜尋「<div class='item-thumbnail'>」字串，應該會找到兩個，這兩個都改成以下的字串：「<div class='item-thumbnail' style='float: left; margin-right: 5px;'>」
是的，它真的會跑掉！
參考來源
WFO Blog 側邊欄分頁功能 安裝 HTML 小工具
WFO Blog 側邊欄分頁功能 安裝 Blogger 官方小工具
WFO Blog 側邊欄分頁功能 各種疑難雜症
您喜歡這篇文章嗎？
About the Author
0 意見