(Pic from: jQuery TOOLS)上一篇的「留言 #02」Frank Liu 詢問「能否把 Blogger 官方小工具裝進這個分頁功能」。我的回答是，由於這個分頁功能是適用於安裝「HTML / Javascript」小工具，若要把 Blogger 官方小工具裝進去，受限於 Blogger 語法的關係，最多只能擺放一個；而且要修改 Blogger 語法的部分，說明起來得再整理一些 Blogger 語法知識。因此，原本認為這是個需要花點時間的任務。
沒想到睡前靈光一閃，突然想到一個「偷天換日」的點子，利用 javascript 來操作轉移 DOM 物件內容，把 Blogger 官方小工具的內容搬到我們的分頁功能裡，就達到了移花接木的效果，既輕鬆又簡單，完全不需要動到 Blogger 語法的部分，而且要擺放幾個 Blogger 官方小工具都行。只是現在要感嘆的是，如果老早就想到這個點子，我的側邊欄滿滿的分頁效果，當初就不用 hack 得那麼累了...好的，以下就來看看如何實做。
一、找出 Blogger 官方小工具的 ID
假設我們要將三個 Blogger 官方小工具加入分頁：「搜尋」、「標籤」、「熱門文章」。首先到 Blogger 後台打開範本文件：修改 HTML → 接著搜尋以上三個小工具的區塊。搜尋的技巧很簡單，只要搜尋小工具的標題字串，馬上就能找到了，類似以下這三段程式碼：
<b:widget id='CustomSearch1' locked='false' title='搜尋' type='CustomSearch'><b:widget id='Label1' locked='false' title='標籤' type='Label'><b:widget id='PopularPosts1' locked='false' title='熱門文章' type='PopularPosts'>以上三段程式碼藍字的部分就是該區塊的 ID，請記下自己範本裡面的 ID，因為如果你的範本裏同樣的小工具裝了兩個以上，ID 就可能跟我的藍字部分不一樣。
二、把 Blogger 官方小工具的位置擺在最上方
到後台 → 版面配置，把要加入分頁功能的三個 Blogger 官方小工具，用滑鼠把位置拖曳到最上方的位置，如同下圖一般──
拖曳到最上方的重點在於，這三個小工具的位置，絕對要比之後安裝分頁功能的「HTML/Javascript」小工具要高。
三、把 Blogger 官方小工具隱藏起來
記下 ID 後，一樣待在範本的畫面，請在 <head> 與 </head> 之間插入以下程式碼：
<style type='text/css'>
#CustomSearch1 {display: none;}
#Label1 {display: none;}
#PopularPosts1 {display: none;}
</style>以上藍字的部分請改為自己的 ID 字串。
四、安裝程式碼
安裝步驟請參考「上一篇」 來執行，但最重要的一點，新增加的這個「HTML/Javascript」小工具，在版面配置裏的位置，絕對要用滑鼠拖曳到那三個 Blogger 官方小工具之下，否則以下的程式碼就無法成功複製官方小工具的內容了！
接著請在 BK 與 BL 這兩行之間插入以下程式碼：
B～D：藍字請改為自己的 ID 字串
E～G：如果側邊欄只裝一個分頁功能的話，綠字的 ID 就不用變動；但若側邊欄像我的部落格裝了許多分頁功能的話，不但這裡綠字的 ID 要變換，原始程式碼相對應的 ID 也要變換。
I～K：這三行分別把三個 Blogger 官方小工具的 HTML 內容，複製到三個分頁裡面。
M～O：複製完之後，Blogger 官方小工具就沒有利用價值了，這三行的程式碼分別把三個官方小工具給刪除。「狡兔死、走狗烹」，雖然有點殘忍，但不整個刪除的話，隱藏起來的小工具仍會各佔一行的高度，使得側邊欄不美觀，所以砍掉是正確的抉擇。
感謝 +Julius Zhang 於【留言 #08】回報「"熱門文章" 用這個方法套入 tab 時格式會跑掉 文章標題連結會跑到縮圖的底下去」。經過測試，「熱門文章」放在這個 TAB 之後，原本 <div class='item-thumbnail'> 這個區塊的 class 'item-thumbnail' 裡面有 float: left 的屬性, 不知為何消失了。
解決方法如下：在範本中搜尋「<div class='item-thumbnail'>」字串，應該會找到兩個，這兩個都改成以下的字串：「<div class='item-thumbnail' style='float: left; margin-right: 5px;'>」，這樣就能強制圖片區塊浮動在左側。
五、常見 FAQ
日後若有常見問題，會持續補充在此。
Q1: 為什麼網誌存檔放在tab裡,會有"載入中…"
Ans: 不是每個官方工具都能在這個分頁工具正常執行，例如「網誌存檔」就是一個。日後若有其他官方工具不相容，會在此補充。
一、安裝 HTML 小工具
二、安裝 Blogger 官方小工具
三、隨機分頁功能
四、各種疑難雜症
➢➢ 快速選單： １ ２ ３ ４
請問一下，如果我要像您一樣安裝熱門文章和最新文章的tab，請問它們的原始碼要怎麼找呢？
回覆刪除<8441847603502897208>(以上內容請勿刪除,從括號之後開始留言)我的網址http://bedfordth.blogspot.tw/
回覆刪除有勞你了，謝謝!!
另外想再請問一下，你在本文裡提到head與/head之間要插入那三行程式碼，那麼head與/head是在那個段落呢?不好意思，我是初學者，要麻煩你多指導一下了！
回覆刪除您好，我後來自己試了一下，有發現幾個問題，想勞煩您幫我釋疑。
回覆刪除第一個問題是，我弄了二個tab區，我發現在menubox的顏色、框線的設定上，好像下面那個會影響上面那一個，那這樣是不是只要寫下面那個就好？還是有什麼方式可以把它們分開來指定？
第二個問題是，我下面那個tab區要做最新文章與熱門文章，請問這二個小工具的html原始碼要把範本裡面的那一段copy過來呢？
<8423741110488433729>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除嗯嗯，謝謝你的指導，我再試一下。另外我想知道的是，第一個html小工具 和 第二個html小工具這二段不是要改成小工具的程式碼嗎？可是我不曉得要放那一段進去耶？可否請你說明一下。是要放你在第一段寫的那些嗎？
您好，謝謝您的回覆，我依照本文的方式，把這篇文章中的程式碼插入第一篇文章中的程式碼的BK與BL二行之間，另外因為我只要二個tab，所以我把DGKO這四行拿掉，然後把第一個程式碼裡的顯示1st工具與1st工具改成最新文章，顯示2nd工具與2nd工具改成熱門文章，也拿掉了AN那一行，並且把setTab("one",1,3)setTab("one",2,3)改成setTab("one",1,2)setTab("one",2,2)，在完成這些修改後，我把所有程式碼放上去，執行後，TAB不能動了，內容也沒出現，可否請您幫我看一下，是不是有那邊沒改到的呢?謝謝!!
回覆刪除嗯嗯，謝謝你的協助，原來就差在那麼一個符號，這樣就可以了。感謝你!!
回覆刪除哈囉
回覆刪除想請教一個問題
我把 PopularPosts 用這個方法套入 tab 時
格式會跑掉
文章標題連結會跑到縮圖的底下去
請問格主要怎麼設定才能像您的維持在縮圖的右邊呢？
<3057977637488999868>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除還沒把原來的藏起來
http://juliuszh.blogspot.com/
<7503960240377352961>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除終於解決這個問題了
多謝格主幫忙 debug
hi～您好，第n問...
回覆刪除應該在這裡發問比較洽當...（問到不知道怎麼開頭語了）
當切換到熱門文章的分頁時，顯示的框架內的上面會出現一個礙眼的「熱門文章」文字，這該如何處理？謝謝～謝謝～謝謝～（淡出...）
HI~我找到了 ^^
回覆刪除一直想...在哪裡看過您有說可以隱藏起來，原來在「讓 Blogger 側邊欄有個簡易安裝的分頁（TAB）功能__（一）安裝 HTML 小工具」這篇有提到。
把下列那行用註解包起來，呵～
＜!--＜h2 class='title'＞＜data:title/＞＜/h2>--＞
哈囉~版大我又來哩~昨天做好樹枝狀分類後，開始在用tab~~
回覆刪除第一個tab有做成功，後來第二個(旅遊牆-美食牆-友站連結)不知道為什麼，無法點選另外兩個欄位~可以再請版大幫我看一下嗎？謝謝囉！^^
http://alisha0110.blogspot.tw/
請問 那如果要安裝官方跟非官方有辦法合在同一條側邊攔嗎?
回覆刪除版大 holp me !!!
回覆刪除是不是我的語法有哪出問題
http://zsbakingdiary.blogspot.tw/
哈 抱歉 抱歉 是關於分頁的第3頁 我是想用個友站連結
回覆刪除<div style="margin-top: 5px; border-bottom: 2px solid #669933;">
<span class="Menubox_over" id='one1' onclick='setTab("one",1,3)' title='Facebook'>Facebook</span>
<span class="Menubox_out" id='one2' onclick='setTab("one",2,3)' title='PINSURS
'>PINSURS
</span>
<span class="Menubox_out" id='one3' onclick='setTab("one",3,3)' title='NEW HOT BLOG'>NEW HOT BLOG</span>
</div><p/>
<div id='con_one_1'>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FRyansbakingdiary&width=220&height=350&colorscheme=light&show_faces=true&header=true&stream=false&show_border=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:280px; height:350px;" allowtransparency="true"></iframe>
</div>
<div id='con_one_2' style='display:none'>
<script type="text/javascript"><!--
bo_id = "12204";
bo_width = 280;
bo_height = 320;
//-->
</script>
<script src="http://www.blog-orbit.com/BOWidget.js" type="text/javascript"></script>
<div id='con_one_3' style='display:none'>
z.innerHTML = c.innerHTML;
</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 c = document.getElementById("BlogList1"),
z = document.getElementById("con_one_3");
z.innerHTML = c.innerHTML;
c.parentNode.removeChild(c);
} )();
</script></div></p>
謝謝啊 我成功了
回覆刪除也多虧有你們 讓我們這些不通語法的網路人可以讓自己的部落格多采多姿
再來請益 分頁是否有辦法自動輪播?
回覆刪除呃...不太一樣
回覆刪除是像這個購物網站http://www.ruten.com.tw/
每隔幾秒就會跳下一頁的這種
不好意思，我不是很瞭解，第一篇我試裝沒問題
回覆刪除但我單純想把Translate和Follow By Email這兩個官方小工具放在一起
按照步驟將兩個小工具移到最上方，隱藏他們，新增的HTML/Javascript小工具在他們下方
另我把AK~BA刪除，新增加的程式碼藍色部分也有修改成Translate1和FollowByEmail1，("con_one_2")結尾改成分號，再移除D,G,K,O，但是什麼都沒有出現......
總覺得是個笨問題，但我文字理解好脆弱，真的不明白(掩面
<7596005173586155358>(以上內容請勿刪除,從括號之後開始留言)抱歉我忘了留網址呢，不過我之後自己試出來了XD
回覆刪除而可能是因為翻譯沒辦法整合進去，在AK~BA都在的情況下也什麼東西都沒有出現，當初以為那部分是屬於自訂小工具用的，而我只是要綜合官方小工具所就刪除掉了~
謝謝Wayne的教學，很受用呢^^
<3659682313440599960>(以上內容請勿刪除,從括號之後開始留言)山不轉路轉呀XD
回覆刪除既然官方翻譯小工具無法整合進去，那就抽出比較常用的吧~￣▽￣y
順便再把一鍵訂閱的教學學了，結果最後我一個官方小工具也沒整合進去XDDDD
Wayne您好:不好意思又要,想請教一下我使用分頁功能用了五個分頁,也將其運用在行動版上,不過我發現在我額外加上去的第四及第五分頁,在點擊後分頁標籤會放大(一至三正常)可以麻煩您協助解惑嗎??
回覆刪除我的網址http://www.hairblog.tw/?m=1(分頁在最下面)謝謝您
<1540651140462304655>(以上內容請勿刪除,從括號之後開始留言)瞭解了,謝謝您!
回覆刪除您好,
回覆刪除我沒學過程式
依據您這篇文章想在邊框加上小工具分頁
結果分頁沒出現不打緊
搜尋的小工具顯示不出來了...="=
可以請您幫我看一下嗎?
http://buxguo.blogspot.tw/
感謝您~
<2361764364692524930>(以上內容請勿刪除,從括號之後開始留言)但是我的版面配置裏有顯示搜尋的小工具..
回覆刪除也有過移除小工具-->儲存排列方式-->新增小工具
結果還是沒有出現...
哀 慘
如您所說:
回覆刪除I～K：這三行分別把三個 Blogger 官方小工具的 HTML 內容，複製到三個分頁裡面。
分頁裡面是??
x.innerHTML = a.innerHTML;
(程式碼)
還是
x.innerHTML = a.innerHTML
(程式碼);
THX
回覆刪除為什麼
回覆刪除網誌存檔放在tab裡,會有"載入中…"
▼ 2016 (21)
▼ 四月 (5)
Bass Booster Pro破解
2016/7/16更新
Google Drive 檔案外連功能將於 2016 年 8 月關閉 完....了....
白話&文言
恩~BGM 很重要
▼ 三月 (6)
載入中…
最新文章和熱門文章也沒有更新動態..
麻煩了您....
網址:http://fkxs.blogspot.tw/
你好，有些問題又要來麻煩你了。因為之前最新文章的小工具好像失效了，所以我就上網找了HTML的語法，然後發現最新文章的語法有很多可以變換格式的，比如我現在用的就是五個色彩的，所以我就想到熱門文章也想依樣畫葫蘆，但後來才發現，依照網路上提供的HTML或CSS，並無法實現它的樣貌，原因在於用了TAB，如果把TAB語法拿掉就OK了，但我又想保留TAB，所以想請問你，該如何安排這些HTML編碼，讓它可以呈現出不同的樣貌呢？
回覆刪除我的網站是 bedfordth.blogspot.tw
我參考的語法來自於 http://www.itsatblogger.com/2015/11/add-multi-colored-popular-posts-widget.html
還有 http://www.netoopsblog.com/2013/08/awesome-multi-colored-popularposts-widget-blogger-css3-trick.html
麻煩你指點一二。謝謝!!
你好，我把最新文章放進了HTML6，再把HTML6放進TAB，但最後最新文章操作時，不斷載入中，但我已經按照所有指示去做，請問如果解決？感謝
回覆刪除我的blogger
http://dse00.blogspot.hk/
您好我使用的是V2.1的樹狀標籤，但將這個官方小工具用此篇的作法放進側邊分頁後，整個樹狀標籤的功能就消失了，不知道是我那裡做錯了，還是說V2.1的版本是不適用的呢？
回覆刪除好的非常感謝
刪除