(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，請問它們的原始碼要怎麼找呢？
回覆刪除<8810030510274454250>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除1.熱門文章的找法本文有
2.最新文章請在範本裡搜尋你最新文章的標題.
如果還是找不到，請提供你的網址來看看在哪。
<8441847603502897208>(以上內容請勿刪除,從括號之後開始留言)我的網址http://bedfordth.blogspot.tw/
回覆刪除有勞你了，謝謝!!
另外想再請問一下，你在本文裡提到head與/head之間要插入那三行程式碼，那麼head與/head是在那個段落呢?不好意思，我是初學者，要麻煩你多指導一下了！
回覆刪除您好，我後來自己試了一下，有發現幾個問題，想勞煩您幫我釋疑。
回覆刪除第一個問題是，我弄了二個tab區，我發現在menubox的顏色、框線的設定上，好像下面那個會影響上面那一個，那這樣是不是只要寫下面那個就好？還是有什麼方式可以把它們分開來指定？
第二個問題是，我下面那個tab區要做最新文章與熱門文章，請問這二個小工具的html原始碼要把範本裡面的那一段copy過來呢？
<1401682031391339603>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除我看你應該知道如何貼到 head 區間了，所以這個應該不用回覆。
1. 發現你裝了兩個 tab 區，那麼要請先參考系列文第四篇「各種疑難雜症」-->「二、安裝兩個以上的分頁群組」. id 與 class 都是獨一無二的，所以 menubox 的各種設定請維持一種。如果要用多種設定，那麼就得設定不同的 class，且要設定、呼叫正確的 class 才能生效。
2. 我看你最新文章與熱門文章的 id 都找正確了，所以只要按照本文的步驟操作就可以了，不必 copy 範本任何一段內容。
建議你先刪除賣場的那個 tab，先安裝最新文章與熱門文章的 tab；成功了再來研究安裝第二組的操作方法。
<8423741110488433729>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除嗯嗯，謝謝你的指導，我再試一下。另外我想知道的是，第一個html小工具 和 第二個html小工具這二段不是要改成小工具的程式碼嗎？可是我不曉得要放那一段進去耶？可否請你說明一下。是要放你在第一段寫的那些嗎？
<3258369193159426635>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除這個tab小工具有兩種安裝方式，一種是填入html碼，第二種是如本文，利用執行js，會自動產生內容。當你使用本文的方法時，就不必填入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不能動了，內容也沒出現，可否請您幫我看一下，是不是有那邊沒改到的呢?謝謝!!
回覆刪除<5370712249388800267>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除y = document.getElementById("con_one_2"),
這一行的結尾不能是逗號, 要改成分號; 你再試試看, 因為
var 的最後一個變數要是分號.
這個tab小工具我覺得有必要改版, 目前的程式碼寫法要懂 js 才有辦法自己修改...
嗯嗯，謝謝你的協助，原來就差在那麼一個符號，這樣就可以了。感謝你!!
回覆刪除哈囉
回覆刪除想請教一個問題
我把 PopularPosts 用這個方法套入 tab 時
格式會跑掉
文章標題連結會跑到縮圖的底下去
請問格主要怎麼設定才能像您的維持在縮圖的右邊呢？
<7291979152678336035>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除請提供一下版面錯誤的網頁效果，給我網址，來看看是哪裡出了問題。
<3057977637488999868>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除還沒把原來的藏起來
http://juliuszh.blogspot.com/
<6053469178117334510>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除感謝回報，「熱門文章」在使用這個 TAB 之後，原本 <div class='item-thumbnail'> 這個區塊的 class 'item-thumbnail' 裡面有 float: left 的屬性, 不知為何消失了。
解決方法如下：在範本中搜尋「<div class='item-thumbnail'>」字串，應該會找到兩個，這兩個都改成以下的字串：「<div class='item-thumbnail' style='float: left; margin-right: 5px;'>」，這樣可以強制區塊浮動在左側。我也要來補充一下本文的內容。
<7503960240377352961>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除終於解決這個問題了
多謝格主幫忙 debug
hi～您好，第n問...
回覆刪除應該在這裡發問比較洽當...（問到不知道怎麼開頭語了）
當切換到熱門文章的分頁時，顯示的框架內的上面會出現一個礙眼的「熱門文章」文字，這該如何處理？謝謝～謝謝～謝謝～（淡出...）
HI~我找到了 ^^
回覆刪除一直想...在哪裡看過您有說可以隱藏起來，原來在「讓 Blogger 側邊欄有個簡易安裝的分頁（TAB）功能__（一）安裝 HTML 小工具」這篇有提到。
把下列那行用註解包起來，呵～
＜!--＜h2 class='title'＞＜data:title/＞＜/h2>--＞
哈囉~版大我又來哩~昨天做好樹枝狀分類後，開始在用tab~~
回覆刪除第一個tab有做成功，後來第二個(旅遊牆-美食牆-友站連結)不知道為什麼，無法點選另外兩個欄位~可以再請版大幫我看一下嗎？謝謝囉！^^
http://alisha0110.blogspot.tw/
<5399150334879177777>(以上內容請勿刪除,從括號之後開始留言)請參考 #4 的回覆，第一點，安裝兩個以上的分頁群組要有不同的處理方式。
回覆刪除請問 那如果要安裝官方跟非官方有辦法合在同一條側邊攔嗎?
回覆刪除<1408879180829488484>(以上內容請勿刪除,從括號之後開始留言)用本篇的方法試試看
回覆刪除版大 holp me !!!
回覆刪除是不是我的語法有哪出問題
http://zsbakingdiary.blogspot.tw/
<3594451077423632718>(以上內容請勿刪除,從括號之後開始留言)你要詳細描述是怎麼樣有問題喔，不能丟個網頁，然後叫我全部的程式碼從頭看到尾嗎?
回覆刪除哈 抱歉 抱歉 是關於分頁的第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>
<116536104082657281>(以上內容請勿刪除,從括號之後開始留言)程式碼看起來應該沒問題，我用你的程式碼來測試，前兩個分頁複製你的工具、第三個分頁能夠成功顯示 BlogList1 這個小工具，所以看不出在你網站失效的原因。
回覆刪除也許請你重新安裝嘗試了，一個分頁一個分頁慢慢加，這樣也許比較能找出原因來。既然你前兩個分頁都沒問題了就先不用測試，先想辦法讓 BlogList1 能夠顯示出來。
謝謝啊 我成功了
回覆刪除也多虧有你們 讓我們這些不通語法的網路人可以讓自己的部落格多采多姿
<7848449309885756008>(以上內容請勿刪除,從括號之後開始留言)不客氣～您謙虛了，看得出是有 CSS 語法的基礎，分頁效果改得不錯～
回覆刪除再來請益 分頁是否有辦法自動輪播?
回覆刪除<248377964368227257>(以上內容請勿刪除,從括號之後開始留言)你指的大概是系列文第三篇吧，請自行研究看看了，這功能基本上我已經沒在用了。
回覆刪除呃...不太一樣
回覆刪除是像這個購物網站http://www.ruten.com.tw/
每隔幾秒就會跳下一頁的這種
<3519867305273635390>(以上內容請勿刪除,從括號之後開始留言)瞭解你的意思，大致像自動輪播的功能，不過不好意思，目前新文章沒有寫這個功能的計畫。
回覆刪除如果真的一定要這個功能的話，請參考「諮詢服務」→「4. 客製功能」
不好意思，我不是很瞭解，第一篇我試裝沒問題
回覆刪除但我單純想把Translate和Follow By Email這兩個官方小工具放在一起
按照步驟將兩個小工具移到最上方，隱藏他們，新增的HTML/Javascript小工具在他們下方
另我把AK~BA刪除，新增加的程式碼藍色部分也有修改成Translate1和FollowByEmail1，("con_one_2")結尾改成分號，再移除D,G,K,O，但是什麼都沒有出現......
總覺得是個笨問題，但我文字理解好脆弱，真的不明白(掩面
<1536829253521091576>(以上內容請勿刪除,從括號之後開始留言)hi~jean, 你描述的滿詳細的，是很好的留言發問範本 ^^ 不過以後記得附上出狀況的網址，才方便檢視。
回覆刪除1.「翻譯」小工具是用動態產生的，不適合使用本文的分頁工具。「Follow By Email」應該可以使用。
2.「把AK~BA刪除」→ 這步驟哪裡看來的啊，請完整依照文章步驟執行喔。
3.建議參考我在「留言#16」的回覆，一個分頁一個分頁來，才容易找到出問題的原因。
<7596005173586155358>(以上內容請勿刪除,從括號之後開始留言)抱歉我忘了留網址呢，不過我之後自己試出來了XD
回覆刪除而可能是因為翻譯沒辦法整合進去，在AK~BA都在的情況下也什麼東西都沒有出現，當初以為那部分是屬於自訂小工具用的，而我只是要綜合官方小工具所就刪除掉了~
謝謝Wayne的教學，很受用呢^^
<6304566126069134980>(以上內容請勿刪除,從括號之後開始留言)不客氣，很高興你的狀況解決了～
回覆刪除發現你的應用能力很強啊，把我的「簡繁切換」功能都放到分頁上了 ^^b
<3659682313440599960>(以上內容請勿刪除,從括號之後開始留言)山不轉路轉呀XD
回覆刪除既然官方翻譯小工具無法整合進去，那就抽出比較常用的吧~￣▽￣y
順便再把一鍵訂閱的教學學了，結果最後我一個官方小工具也沒整合進去XDDDD
<1827804475584188734>(以上內容請勿刪除,從括號之後開始留言)對了，看到你最後一個分頁用翻譯成英文的功能，用了很長一串的 js。可以參考我這篇「讓 Google 網頁翻譯工具以(國旗)超連結執行」→「一、Google 翻譯的超連結結構」，使用一個超連結就行了。
回覆刪除Wayne您好:不好意思又要,想請教一下我使用分頁功能用了五個分頁,也將其運用在行動版上,不過我發現在我額外加上去的第四及第五分頁,在點擊後分頁標籤會放大(一至三正常)可以麻煩您協助解惑嗎??
回覆刪除我的網址http://www.hairblog.tw/?m=1(分頁在最下面)謝謝您
<114335152877590976>(以上內容請勿刪除,從括號之後開始留言)我用我的手機看沒什麼問題啊~另外，我想如果是手機的顯示效果不一，這方面我應該不會去特別 debug 了，因為網頁版光是要測試各種不同瀏覽器的相容性已經是很頭大的問題，手機的型號更是數不清。
回覆刪除也許網頁的文字內容在手機能正確呈現，就已經達到主要目的了。
<1540651140462304655>(以上內容請勿刪除,從括號之後開始留言)瞭解了,謝謝您!
回覆刪除您好,
回覆刪除我沒學過程式
依據您這篇文章想在邊框加上小工具分頁
結果分頁沒出現不打緊
搜尋的小工具顯示不出來了...="=
可以請您幫我看一下嗎?
http://buxguo.blogspot.tw/
感謝您~
<9023826326525967340>(以上內容請勿刪除,從括號之後開始留言)你好，從你的網頁原始碼，並沒看到有安裝這個工具的程式碼呢。
回覆刪除本篇是系列文的第二篇，建議從第一篇開始安裝，等環境、語法都熟悉之後，再來進行第二篇比較妥當。
如果要修改範本，建議先閱讀「備份範本」系列文章。
對 Blogger 平台還不熟悉時，建議先參考導覽列上的「網站導覽」相關文章。
<2361764364692524930>(以上內容請勿刪除,從括號之後開始留言)但是我的版面配置裏有顯示搜尋的小工具..
回覆刪除也有過移除小工具-->儲存排列方式-->新增小工具
結果還是沒有出現...
哀 慘
<2402162924696063868>(以上內容請勿刪除,從括號之後開始留言)既然問題與分頁工具無關，你可以研究這篇「Google 自訂搜尋」
回覆刪除如您所說:
回覆刪除I～K：這三行分別把三個 Blogger 官方小工具的 HTML 內容，複製到三個分頁裡面。
分頁裡面是??
x.innerHTML = a.innerHTML;
(程式碼)
還是
x.innerHTML = a.innerHTML
(程式碼);
<7063457043334879099>(以上內容請勿刪除,從括號之後開始留言)"I～K：這三行分別把三個 Blogger 官方小工具的 HTML 內容，複製到三個分頁裡面。" → 這段話是在說明 I~K 的作用，你不必做多餘動作，也不必安插其他程式碼。
回覆刪除THX
回覆刪除為什麼
回覆刪除網誌存檔放在tab裡,會有"載入中…"
▼ 2016 (21)
▼ 四月 (5)
Bass Booster Pro破解
2016/7/16更新
Google Drive 檔案外連功能將於 2016 年 8 月關閉 完....了....
白話&文言
恩~BGM 很重要
▼ 三月 (6)
載入中…
最新文章和熱門文章也沒有更新動態..
麻煩了您....
網址:http://fkxs.blogspot.tw/
<1691466870149661254>(以上內容請勿刪除,從括號之後開始留言)看了你網頁的 tab:
回覆刪除1. 你第二個分頁工具的安裝方法是對的，分頁工具要拉到其他工具的下方；而第一個分頁工具就沒拉到其他工具下方，所以就無法顯示了
2. 不一定每個官方工具都能放到分頁之中，剛好 "網誌存檔" 就是其中一個，我補充一下到本文之中。
你好，有些問題又要來麻煩你了。因為之前最新文章的小工具好像失效了，所以我就上網找了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
麻煩你指點一二。謝謝!!
<3566829614202586314>(以上內容請勿刪除,從括號之後開始留言)感覺上你的問題是關於「版面調整」，屬於 CSS 的範疇，請參考下面的張貼留言注意事項：
回覆刪除詢問 CSS 、非官方範本問題、或貴站為商業網站 ，請參考「本站諮詢頁面」→「1. 諮詢服務」
你好，我把最新文章放進了HTML6，再把HTML6放進TAB，但最後最新文章操作時，不斷載入中，但我已經按照所有指示去做，請問如果解決？感謝
回覆刪除我的blogger
http://dse00.blogspot.hk/
我看可以正常顯示呢
刪除您好我使用的是V2.1的樹狀標籤，但將這個官方小工具用此篇的作法放進側邊分頁後，整個樹狀標籤的功能就消失了，不知道是我那裡做錯了，還是說V2.1的版本是不適用的呢？
回覆刪除樹狀標籤的設計沒有考慮跟其他工具的相容性
刪除如果不相容則建議不使用
好的非常感謝
刪除