Blogger 側邊分頁功能 實作心得

如果覺得側邊欄的官方小工具以及自己安裝的HTML第三方工具太多怎麼辦？利用Tab分頁就可以解決這個問題。多項小工具都能裝進同一空間的至少四到五個分頁之中，非常簡潔方便！

此功能依舊是在 WFU Blog 中發現，算是比較複雜，參考的是以下的文章分享串，共有四篇，主要為前兩篇：
[教學]讓 Blogger 側邊欄有個簡易安裝的分頁(TAB)功能__(1) 安裝 HTML 小工具

讓 Blogger 側邊欄有個簡易安裝的分頁(TAB)功能__(2) 安裝 Blogger 官方小工具

簡單來說，若分頁中要塞進的是其他第三方HTML小工具，那就只要將小工具的程式碼貼進對應的分頁區塊中就好，如果是要混搭塞進官方小工具的話，也完全辦得到喔！Wayne Fu 想出了很棒的方法，只要你能夠找出想塞進去功能的HTML ID的話，就可以利用Javascript的方式，把原本你網誌HTML範本裡面的程式碼整個搬過來，非常非常方便！

然而可惜的是，目前發現並不是所有官方小工具，都能正確在分頁當中顯示，例如經過修改後的 "WFU Blog 樹狀標籤V2.1" 以及此網誌使用的 "瀏覽統計翻牌功能"，都在嘗試過後宣告失敗，但本來相容性在各個功能之間，就很難微調到非常完美，耗時也耗工。我的網誌完全是借用別人的心血結晶來美化的，除了感謝之餘，無法實現的部分也只能換個方式呈現了！

本網誌目前引入了兩個側邊分頁系統，其一擁有四個分頁：我同時將兩個官方小工具：包括 "網誌封存" 和 "訂閱"，以及兩個自設定的HTML小工具："進階版本網誌搜尋" 和 "最新回應" 包在第一個 (one) Tab分頁功能中。當然也因應了我的網誌色系，修改了分頁按鈕的框線，底色，文字顏色和按鈕特效等等，詳細修改內容就在這邊做個記錄：

點開取得備份程式碼

<style type='text/css'> /* 預設開啟分頁按鈕的CSS格式 */ 

.Menubox_over {

color: #D9D9D9;

font: bold 14px arial;

border-top: 1px solid #404040; 

border-left: 1px solid #404040;

border-right: 1px solid #404040;

border-bottom: 3px solid #636363;

border-bottom: 2px solid #fffff5\9;

border-top-right-radius: 5px;

border-top-left-radius: 5px;

padding: 2px 5px 1px 5px;

cursor: pointer;

background-color: #636363;

} 

 

.Menubox_out { /* 預設關閉分頁按鈕的CSS格式 */

color: #B0B0B0;

font: bold 14px arial;

border-top: 1px solid #404040; 

border-left: 1px solid #404040;

border-right: 1px solid #404040;

border-bottom: 1px solid #3B3B3B;

border-bottom: 0px solid #777\9;

border-top-right-radius: 5px;

border-top-left-radius: 5px;

padding-top: 2px;

padding-left: 5px;

padding-right: 5px;

padding-bottom: 2px;

padding-bottom: 0px\9;

cursor: pointer;

background-color: #3B3B3B;

} 

</style> 

 

<div style="margin-top: 5px; border-bottom: 2px solid #404040;"> /* 分頁按鈕設定目錄 */

&nbsp;<span class="Menubox_over" id='one1' onclick='setTab("one",1,4)'  title='顯示 1st 工具'>搜尋此網誌</span>&nbsp;

<span class="Menubox_out" id='one2' onclick='setTab("one",2,4)' title='顯示 2nd 工具'>網誌封存</span>&nbsp;

<span class="Menubox_out" id='one3' onclick='setTab("one",3,4)' title='顯示 3rd 工具'>訂閱</span>&nbsp;

<span class="Menubox_out" id='one4' onclick='setTab("one",4,4)' title='顯示 4th 工具'>最新回應</span> 

</div><p/>

 

<div id='con_one_1'> /* 貼入1st 第三方HTML小工具 搜尋此網誌 程式碼 */

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>

<!--搜尋框 HTML-->

<div>

<input id='search_input' placeholder='搜尋文章' type='text' />

<input id='search_btn' type='image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgea95XMmcHLiQII8j5bpoNefmmlmn91oezZmoxyvZwx8Aep_r3p5Ui5nTvJARRi48toH0SeaV4xB9a2RykPJEPrgi_qyLJZCtEJDfVDPbnqXHIQaedMhPYQ0mIGoEn1FEUM_0LJJ3MFH30/s1600/search-icon.png' />

</div>

<!--搜尋框 CSS-->

<style>

#search_input {

height: 20px;

width: calc(100% - 100px);

border: 1px solid #d9d9d9;

padding: 4px 10px;

background: #f0ede9;

color: #8B8B8B;

font-size: 15px;

vertical-align: middle;

}

#search_btn {

width: 13px;

height: 13px;

padding: 8px 25px;

background-color: #d9d9d9;

border: 1px solid #bbb;

border-radius: 2px;

vertical-align: middle;

}

</style>

<!--搜尋框 JS-->

<script>

(function($){var $search_input=$("#search_input"),init=function(){$("html, body").scrollTop(0);var query=$search_input.val().replace(/ /g,"%20"),queryUrl="/search?q="+query+" #Blog1";ajaxLoad(query,queryUrl)},ajaxLoad=function(query,queryUrl){var _0xed55=["\x33\x20\x36\x3D\x22\x3C\x69\x20\x32\x3D\x27\x31\x64\x3A\x20\x31\x63\x20\x4C\x3B\x37\x2D\x34\x3A\x20\x47\x3B\x27\x3E\x3C\x43\x20\x42\x3D\x27\x78\x3A\x2F\x2F\x31\x65\x2E\x59\x2E\x6A\x2F\x2D\x31\x34\x2F\x31\x6C\x2F\x31\x6E\x2F\x31\x70\x2F\x77\x2F\x51\x2D\x53\x2E\x36\x27\x20\x32\x3D\x27\x70\x2D\x34\x3A\x20\x6B\x3B\x27\x2F\x3E\x3C\x35\x20\x32\x3D\x27\x70\x2D\x34\x3A\x20\x6B\x3B\x27\x3E\x20\x31\x66\x20\x31\x69\x2E\x2E\x2E\x3C\x2F\x35\x3E\x3C\x2F\x69\x3E\x22\x3B\x24\x28\x22\x2E\x6C\x2D\x6D\x22\x29\x2E\x6E\x28\x30\x29\x2E\x68\x28\x36\x29\x3B\x24\x28\x22\x23\x79\x22\x29\x2E\x7A\x28\x41\x2C\x39\x28\x29\x7B\x33\x20\x63\x3D\x24\x28\x22\x2E\x44\x2D\x45\x2D\x46\x22\x29\x2C\x61\x3D\x48\x20\x49\x28\x22\x28\x22\x2B\x4A\x2B\x22\x29\x22\x2C\x22\x4B\x22\x29\x2C\x62\x3D\x22\x3C\x69\x20\x32\x3D\x27\x37\x2D\x34\x3A\x20\x4D\x3B\x20\x4E\x2D\x4F\x3A\x20\x50\x3B\x27\x3E\u6280\u8853\u63D0\u4F9B\uFF1A\x3C\x61\x20\x6F\x3D\x27\x52\x3A\x2F\x2F\x76\x2E\x54\x2E\x6A\x2F\x55\x2F\x56\x2F\x57\x2D\x58\x2D\x71\x2D\x5A\x2E\x68\x27\x20\x31\x30\x3D\x27\x31\x31\x27\x20\x32\x3D\x27\x37\x2D\x31\x32\x3A\x20\x31\x33\x3B\x27\x20\x72\x3D\x27\u7A0B\u5F0F\u8A2D\u8A08\uFF1A\x31\x35\x20\x31\x36\x27\x3E\u24E6\x20\x31\x37\x20\u52D5\u614B\u641C\u5C0B\u6846\x3C\x2F\x61\x3E\x22\x3B\x24\x28\x22\x2E\x6C\x2D\x6D\x22\x29\x2E\x6E\x28\x30\x29\x2E\x31\x38\x28\x62\x29\x3B\x24\x28\x22\x2E\x31\x39\x2D\x72\x20\x61\x2C\x20\x2E\x31\x61\x22\x29\x2E\x31\x62\x28\x39\x28\x29\x7B\x33\x20\x64\x3D\x38\x2E\x73\x3B\x64\x3D\x64\x2E\x74\x28\x61\x2C\x22\x3C\x35\x20\x32\x3D\x27\x31\x67\x3A\x20\x23\x31\x68\x27\x3E\x24\x31\x3C\x2F\x35\x3E\x22\x29\x3B\x38\x2E\x73\x3D\x64\x7D\x29\x3B\x63\x2E\x75\x28\x22\x61\x22\x29\x2E\x31\x6A\x28\x22\x31\x6B\x22\x2C\x39\x28\x29\x7B\x33\x20\x66\x3D\x63\x2E\x75\x28\x22\x62\x22\x29\x2E\x68\x28\x29\x2E\x74\x28\x22\x20\x22\x2C\x22\x25\x31\x6D\x22\x29\x2C\x64\x3D\x38\x2E\x6F\x2C\x67\x3D\x64\x2E\x31\x6F\x28\x22\x2F\x71\x22\x29\x2C\x65\x3D\x64\x2E\x31\x71\x28\x67\x29\x2B\x22\x20\x23\x31\x72\x22\x3B\x31\x73\x28\x66\x2C\x65\x29\x3B\x31\x74\x20\x31\x75\x7D\x29\x7D\x29\x3B","\x7C","\x73\x70\x6C\x69\x74","\x7C\x7C\x73\x74\x79\x6C\x65\x7C\x76\x61\x72\x7C\x61\x6C\x69\x67\x6E\x7C\x73\x70\x61\x6E\x7C\x67\x69\x66\x7C\x74\x65\x78\x74\x7C\x74\x68\x69\x73\x7C\x66\x75\x6E\x63\x74\x69\x6F\x6E\x7C\x7C\x7C\x7C\x7C\x7C\x7C\x7C\x68\x74\x6D\x6C\x7C\x64\x69\x76\x7C\x63\x6F\x6D\x7C\x6D\x69\x64\x64\x6C\x65\x7C\x64\x61\x74\x65\x7C\x6F\x75\x74\x65\x72\x7C\x65\x71\x7C\x68\x72\x65\x66\x7C\x76\x65\x72\x74\x69\x63\x61\x6C\x7C\x73\x65\x61\x72\x63\x68\x7C\x74\x69\x74\x6C\x65\x7C\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C\x7C\x72\x65\x70\x6C\x61\x63\x65\x7C\x66\x69\x6E\x64\x7C\x77\x77\x77\x7C\x73\x35\x31\x32\x7C\x68\x74\x74\x70\x73\x7C\x6D\x61\x69\x6E\x7C\x6C\x6F\x61\x64\x7C\x71\x75\x65\x72\x79\x55\x72\x6C\x7C\x73\x72\x63\x7C\x69\x6D\x67\x7C\x73\x74\x61\x74\x75\x73\x7C\x6D\x73\x67\x7C\x62\x6F\x64\x79\x7C\x63\x65\x6E\x74\x65\x72\x7C\x6E\x65\x77\x7C\x52\x65\x67\x45\x78\x70\x7C\x71\x75\x65\x72\x79\x7C\x69\x67\x7C\x61\x75\x74\x6F\x7C\x72\x69\x67\x68\x74\x7C\x66\x6F\x6E\x74\x7C\x73\x69\x7A\x65\x7C\x31\x32\x70\x78\x7C\x69\x6E\x64\x69\x63\x61\x74\x6F\x72\x7C\x68\x74\x74\x70\x7C\x6C\x69\x67\x68\x74\x7C\x77\x66\x75\x62\x6C\x6F\x67\x7C\x32\x30\x31\x36\x7C\x30\x31\x7C\x62\x6C\x6F\x67\x67\x65\x72\x7C\x61\x6A\x61\x78\x7C\x67\x6F\x6F\x67\x6C\x65\x75\x73\x65\x72\x63\x6F\x6E\x74\x65\x6E\x74\x7C\x62\x6F\x78\x7C\x74\x61\x72\x67\x65\x74\x7C\x5F\x62\x6C\x61\x6E\x6B\x7C\x64\x65\x63\x6F\x72\x61\x74\x69\x6F\x6E\x7C\x6E\x6F\x6E\x65\x7C\x45\x79\x56\x5A\x30\x66\x38\x4A\x30\x71\x51\x7C\x57\x46\x55\x7C\x42\x4C\x4F\x47\x7C\x41\x6A\x61\x78\x7C\x62\x65\x66\x6F\x72\x65\x7C\x70\x6F\x73\x74\x7C\x73\x65\x61\x72\x63\x68\x50\x61\x67\x65\x5F\x73\x6E\x69\x70\x70\x65\x74\x7C\x65\x61\x63\x68\x7C\x32\x30\x70\x78\x7C\x6D\x61\x72\x67\x69\x6E\x7C\x6C\x68\x35\x7C\x70\x6C\x65\x61\x73\x65\x7C\x63\x6F\x6C\x6F\x72\x7C\x39\x39\x30\x30\x30\x30\x7C\x77\x61\x69\x74\x7C\x6F\x6E\x7C\x63\x6C\x69\x63\x6B\x7C\x55\x43\x65\x45\x47\x37\x61\x61\x38\x6E\x49\x7C\x32\x30\x7C\x41\x41\x41\x41\x41\x41\x41\x41\x44\x74\x59\x7C\x69\x6E\x64\x65\x78\x4F\x66\x7C\x39\x73\x58\x77\x35\x33\x58\x6B\x59\x58\x4D\x7C\x73\x75\x62\x73\x74\x72\x7C\x42\x6C\x6F\x67\x31\x7C\x61\x6A\x61\x78\x4C\x6F\x61\x64\x7C\x72\x65\x74\x75\x72\x6E\x7C\x66\x61\x6C\x73\x65","","\x66\x72\x6F\x6D\x43\x68\x61\x72\x43\x6F\x64\x65","\x72\x65\x70\x6C\x61\x63\x65","\x5C\x77\x2B","\x5C\x62","\x67"];eval(function(_0x758ax1,_0x758ax2,_0x758ax3,_0x758ax4,_0x758ax5,_0x758ax6){_0x758ax5=function(_0x758ax3){return(_0x758ax3<_0x758ax2?_0xed55[4]:_0x758ax5(parseInt(_0x758ax3/_0x758ax2)))+((_0x758ax3=_0x758ax3%_0x758ax2)>35?String[_0xed55[5]](_0x758ax3+29):_0x758ax3.toString(36))};if(!_0xed55[4][_0xed55[6]](/^/,String)){while(_0x758ax3--){_0x758ax6[_0x758ax5(_0x758ax3)]=_0x758ax4[_0x758ax3]||_0x758ax5(_0x758ax3)}_0x758ax4=[function(_0x758ax5){return _0x758ax6[_0x758ax5]}];_0x758ax5=function(){return _0xed55[7]};_0x758ax3=1}while(_0x758ax3--){if(_0x758ax4[_0x758ax3]){_0x758ax1=_0x758ax1[_0xed55[6]](new RegExp(_0xed55[8]+_0x758ax5(_0x758ax3)+_0xed55[8],_0xed55[9]),_0x758ax4[_0x758ax3])}}return _0x758ax1}(_0xed55[0],62,93,_0xed55[3][_0xed55[2]](_0xed55[1]),0,{}))};$search_input.on("keyup",function(e){if(e.which==13){init()}});$("#search_btn").on("click",init)})(jQuery);

</script>

<!--Ajax 搜尋框, designed by WFU BLOG-->

</div> 

<div id='con_one_2' style='display:none'>  /* 留白給第二個官方HTML小工具 網誌封存 呼叫 */

第二個 HTML 小工具內容

</div> 

 

<div id='con_one_3' style='display:none'>  /* 留白給第三個官方HTML小工具 訂閱 呼叫 */

第三個 HTML 小工具內容

</div> 

<div id='con_one_4' style='display:none'>  /* 輸入第四個第三方HTML小工具 最新留言 程式碼 */

<div id="rc2_area"></div>

<div id="rc2_info"><a href="https://www.wfublog.com/2015/10/blogger-recent-comments-v2-avatar-post-title-https.html">ⓦ Recent Comments</a></div>

<script>

var brc2 = {

startIndex: 1,

showComment: 8, // 顯示幾則最新留言

summaryLength: 25, // 留言摘要字數

headWidth: 35, // 頭像寬度, 若不要顯示頭像請改為 0

blogger: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-MRMozc7D3j1ARBsjYjSB7XBGGWlWPnbtcmHBXTXq0hkxeCWxjfvaUxbeLhC_b1OKOxluB3i6Kov4i1YHX7eSbnEnf2WDKE0SCS5xCoK_jtubhXL2O-n25LpsEaMltaectwkfk8NZ3mV-/s70/blogger.png",

openID: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju42ebMMbnaD3NwJyHn8Yz_32hud-1fsWarhjq-e5YvUBUV5DjXeKwrQ8tMFSxnQ3bFW4FDSn_WfLPoMT0WSzRaIO18sIQCQdCPRfbnxXgsMiHL1_UFTQziWwT84bZWJP6sQALYtlZMqL2/s70/openid.png",

anonymous: "https://filedn.com/l2Kq0amwwMuLL5h7z4tHcXk/Blogger%20pictures/Banner/istockphoto-888259128-612x612.jpg",

showTitle: "Y", // 不需要顯示文章標題則改為 "N"

showDate: "Y", // 不需要顯示日期改為 "N"

showCommentAmount: "Y", // 不需要顯示網站總留言數改為 "N"

dateFormat: "Y-M-D", // 預設日期格式為 "年-月-日"; 若要改為 "月-日-年" 請將參數改為 "M-D-Y"

openLogo: "▾", // 展開留言圖示

closeLogo: "▴", // 收合留言圖示

nextLogo: "▸", // 下一頁圖示

prevLogo: "◂", // 上一頁圖示

serialText: "編號",

totalText: "總共:"

};

 

brc2.openLogo=$("<a>"+brc2.openLogo+"</a>").html();brc2.closeLogo=$("<a>"+brc2.closeLogo+"</a>").html();brc2.fetch=0;brc2.total=0;brc2.postUrl=[];brc2.postTitle=[];brc2.anonymousLink="https://www.wfublog.com/2015/10/blogger-recent-comments-v2-avatar-post-title-https.html";brc2.switchPage=function(b,a,g){var d=brc2.showComment,e=(b>d),f=$("#rc2_commentIndex"),c="";b=e?d:b;c+="<a href='javascript:' class='rc2_openAll' title='留言全部展開'>"+brc2.openLogo+"</a><a href='javascript:' class='rc2_closeAll' title='留言全部收起'>"+brc2.closeLogo+"</a>";if(a>brc2.startIndex){c+="<a class='rc2_prevPage' href='javascript:' title='上一頁'>"+brc2.prevLogo+"</a>"}else{c+="<span class='rc2_prevPage'>"+brc2.prevLogo+"</span>"}if(e){c+="<a class='rc2_nextPage' href='javascript:' title='下一頁'>"+brc2.nextLogo+"</a>"}else{c+="<span class='rc2_nextPage'>"+brc2.nextLogo+"</a>"}$("#rc2_switchPage").html(c);$(".rc2_openAll").click(function(){$(".rc2_summary").hide();$(".rc2_content").show();$(".rc2_toggleLogo").html(brc2.closeLogo)});$(".rc2_closeAll").click(function(){$(".rc2_content").hide();$(".rc2_summary").show();$(".rc2_toggleLogo").html(brc2.openLogo)});$("a.rc2_prevPage").click(function(){brc2.init(a-d)});$("a.rc2_nextPage").click(function(){brc2.init(a+d)});if(f.length){f.html(brc2.serialText+" "+a+"-"+(a+b-1)+", "+brc2.totalText+" "+g)}};brc2.main=function(json){var feed=json.feed;if(!feed.entry){$("#rc2_area").html("<div style='text-align: center;'>目前尚無留言</div>");return}var nFetch=feed.entry.length,nIndex=parseInt(feed.openSearch$startIndex.$t),nTotalComment=parseInt(feed.openSearch$totalResults.$t),total=(brc2.showComment>nFetch)?nFetch:brc2.showComment,width=brc2.headWidth,summaryLength=brc2.summaryLength,anonymousLink=brc2.anonymousLink,openLogo=brc2.openLogo,closeLogo=brc2.closeLogo,dateFormat=brc2.dateFormat.split("-"),size="/s"+width*2+"-c/",reg1=/<.*?>/g,reg2=/\/s\d{2}.*?\//ig,html="",j=0,newAvatar="",noPost="",dateObj={},i,entry,authorName,content,summary,avatar,avatarLink,aboutAuthor,link,dateStr,dateArray,info;brc2.fetch=nFetch;brc2.total=total;html+="<ul>";for(i=0;i<total;i++){entry=feed.entry[i];authorName=entry.author[0].name.$t;content=entry.content.$t.replace(reg1,"");summary=(content.length>summaryLength)?content.substr(0,summaryLength):content;dateArray=entry.published.$t.substr(0,10).split("-");dateObj.Y=dateArray[0];dateObj.M=dateArray[1];dateObj.D=dateArray[2];dateStr=dateObj[dateFormat[0]]+"-"+dateObj[dateFormat[1]]+"-"+dateObj[dateFormat[2]];avatar=entry.author[0].gd$image.src;avatarLink=(entry.author[0].uri)?entry.author[0].uri.$t:"";aboutAuthor="關於"+authorName;if(entry.title.$t){while(j<entry.link.length&&entry.link[j].rel!="alternate"){j++}link=entry.link[j].href}else{link=(entry["thr$in-reply-to"])?entry["thr$in-reply-to"].href:anonymousLink}if(!entry["thr$in-reply-to"]){noPost="文章已刪除"}if(avatar.search("blank.gif")>0){if(avatarLink){avatar=brc2.openID}else{avatar=brc2.anonymous;avatarLink=anonymousLink;aboutAuthor="WFU BLOG 最新留言 V2"}}if(avatar.search("openid16-rounded.gif")>0){avatar=brc2.openID}if(avatar.search("b16-rounded.gif")>0){avatar=brc2.blogger}newAvatar=avatar.replace(reg2,size);html+="<li>";if(brc2.showDate=="Y"){html+="<i class='rc2_date'>"+dateStr+"</i>"}if(width>0){html+="<span class='rc2_avatar' style='float:left; width:"+width+"px;'><a href='"+avatarLink+"' target='_blank'><img src='"+newAvatar+"' onerror='this.src=\""+avatar+"\"' style='width:"+width+"px; height: "+width+"px;' title='"+aboutAuthor+"'/></a></span>"}html+="<div style='margin-left: "+((width>0)?(width+10):0)+"px; word-wrap: break-word;'><b class='rc2_author'>"+authorName+"：</b>";if(summary!=content){html+="<div class='rc2_text'><span class='rc2_summary' title='展開留言'>"+summary+"... </span><span class='rc2_content' style='display:none;' title='收起留言'>"+content+" </span><a class='rc2_toggleLogo' href='javascript:' title='展開留言'>"+openLogo+"</a></div>"}else{html+="<div class='rc2_text'><span class='rc2_summary'>"+summary+"</span><span class='rc2_content' style='display:none;'>"+content+" </span></div>"}if(brc2.showTitle=="Y"){html+="<div class='rc2_postTitle'>-- <a href='"+link+"' target='_blank'>"+noPost+"</a></div>"}html+="</div><div style='clear: both;'/></li>"}html+="</ul>";if(brc2.showCommentAmount=="Y"){html+="<div id='rc2_commentIndex'></div>"}html+="<div id='rc2_switchPage'></div>";var _0xbc1b=["\x24\x28\x22\x23\x33\x22\x29\x2E\x31\x28\x31\x29\x3B\x37\x2E\x38\x28\x39\x2C\x62\x2C\x63\x29\x3B\x32\x3D\x22\x3C\x61\x20\x64\x3D\x27\x34\x3A\x2F\x2F\x65\x2E\x66\x2E\x67\x2F\x68\x2F\x69\x2F\x6A\x2D\x6B\x2D\x6C\x2D\x6D\x2D\x6F\x2D\x70\x2D\x35\x2D\x34\x2E\x31\x27\x20\x71\x3D\x27\x72\x27\x20\x35\x3D\x27\u6700\u65B0\u56DE\u61C9\uFF0B\u7559\u8A00\u8005\u982D\u50CF\uFF0B\u6587\u7AE0\u6A19\u984C\x5C\x6E\u7A0B\u5F0F\u8A2D\u8A08\uFF1A\x73\x20\x74\x27\x3E\u24E6\x20\x75\x20\x76\x3C\x2F\x61\x3E\x22\x3B\x77\x20\x24\x30\x3D\x24\x28\x22\x23\x30\x22\x29\x3B\x78\x28\x24\x30\x2E\x79\x29\x7B\x24\x30\x2E\x31\x28\x32\x29\x7D\x7A\x7B\x24\x28\x22\x23\x33\x22\x29\x2E\x41\x28\x22\x3C\x36\x20\x42\x3D\x27\x30\x27\x3E\x22\x2B\x32\x2B\x22\x3C\x2F\x36\x3E\x22\x29\x7D\x3B","\x7C","\x73\x70\x6C\x69\x74","\x72\x63\x32\x5F\x69\x6E\x66\x6F\x7C\x68\x74\x6D\x6C\x7C\x69\x6E\x66\x6F\x7C\x72\x63\x32\x5F\x61\x72\x65\x61\x7C\x68\x74\x74\x70\x73\x7C\x74\x69\x74\x6C\x65\x7C\x64\x69\x76\x7C\x62\x72\x63\x32\x7C\x73\x77\x69\x74\x63\x68\x50\x61\x67\x65\x7C\x6E\x46\x65\x74\x63\x68\x7C\x7C\x6E\x49\x6E\x64\x65\x78\x7C\x6E\x54\x6F\x74\x61\x6C\x43\x6F\x6D\x6D\x65\x6E\x74\x7C\x68\x72\x65\x66\x7C\x77\x77\x77\x7C\x77\x66\x75\x62\x6C\x6F\x67\x7C\x63\x6F\x6D\x7C\x32\x30\x31\x35\x7C\x31\x30\x7C\x62\x6C\x6F\x67\x67\x65\x72\x7C\x72\x65\x63\x65\x6E\x74\x7C\x63\x6F\x6D\x6D\x65\x6E\x74\x73\x7C\x76\x32\x7C\x7C\x61\x76\x61\x74\x61\x72\x7C\x70\x6F\x73\x74\x7C\x74\x61\x72\x67\x65\x74\x7C\x5F\x62\x6C\x61\x6E\x6B\x7C\x57\x46\x55\x7C\x42\x4C\x4F\x47\x7C\x52\x65\x63\x65\x6E\x74\x7C\x43\x6F\x6D\x6D\x65\x6E\x74\x73\x7C\x76\x61\x72\x7C\x69\x66\x7C\x6C\x65\x6E\x67\x74\x68\x7C\x65\x6C\x73\x65\x7C\x61\x66\x74\x65\x72\x7C\x69\x64","","\x66\x72\x6F\x6D\x43\x68\x61\x72\x43\x6F\x64\x65","\x72\x65\x70\x6C\x61\x63\x65","\x5C\x77\x2B","\x5C\x62","\x67"];eval(function(_0x57c2x1,_0x57c2x2,_0x57c2x3,_0x57c2x4,_0x57c2x5,_0x57c2x6){_0x57c2x5=function(_0x57c2x3){return(_0x57c2x3<_0x57c2x2?_0xbc1b[4]:_0x57c2x5(parseInt(_0x57c2x3/_0x57c2x2)))+((_0x57c2x3=_0x57c2x3%_0x57c2x2)>35?String[_0xbc1b[5]](_0x57c2x3+29):_0x57c2x3.toString(36))};if(!_0xbc1b[4][_0xbc1b[6]](/^/,String)){while(_0x57c2x3--){_0x57c2x6[_0x57c2x5(_0x57c2x3)]=_0x57c2x4[_0x57c2x3]||_0x57c2x5(_0x57c2x3)}_0x57c2x4=[function(_0x57c2x5){return _0x57c2x6[_0x57c2x5]}];_0x57c2x5=function(){return _0xbc1b[7]};_0x57c2x3=1}while(_0x57c2x3--){if(_0x57c2x4[_0x57c2x3]){_0x57c2x1=_0x57c2x1[_0xbc1b[6]](new RegExp(_0xbc1b[8]+_0x57c2x5(_0x57c2x3)+_0xbc1b[8],_0xbc1b[9]),_0x57c2x4[_0x57c2x3])}}return _0x57c2x1}(_0xbc1b[0],38,38,_0xbc1b[3][_0xbc1b[2]](_0xbc1b[1]),0,{}));$(".rc2_text").click(function(){var $this=$(this);$this.children(".rc2_summary, .rc2_content").toggle();$this.children(".rc2_toggleLogo").html(function(){return $(this).html()==openLogo?closeLogo:openLogo})});$(".rc2_postTitle a").each(function(){var postLink=this.href.split("?")[0].replace(/http:\/\/|https:\/\//,""),path=postLink.substr(postLink.indexOf("/")),postFeed="/feeds/posts/summary?alt=json-in-script&callback=?&path="+path,index=brc2.postUrl.indexOf(path),$this=$(this),title;if(index<0){if(path.indexOf("/p/")>-1){$this.html("非文章頁面");return}$.getJSON(postFeed,function(json){var title=json.feed.entry[0].title.$t;$this.html(title).attr("title",title);if(brc2.postUrl.indexOf(path)<0){brc2.postUrl.push(path);index=brc2.postUrl.indexOf(path);brc2.postTitle[index]=title}})}else{title=brc2.postTitle[index];$this.html(title).attr("title",title)}})};brc2.init=function(a){a=a||brc2.startIndex;var b="/feeds/comments/default?orderby=published&start-index="+a+"&max-results="+(brc2.showComment+1)+"&alt=json-in-script&callback=brc2.main";$("#rc2_area").html("<div style='text-align: center; margin: 20px auto;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7MqO6tZYbuqLHS7_WjSWYc14h7H_NHKKWnpVjlc-x34FPlpARG-PJUbiRnho2ejLTbKJJXUnrMKWVY6Rn15r1SsK1OdQ_fHLqlA_si2l3v4WkfcKY-k3_39ipuv55nlIqhrN7nCTBxqsX/s512/indicator-light.gif'/></div>");$.getScript(b)};brc2.init();

</script>

 

<style>

#rc2_area ul,

#rc2_area li {

list-style: none; margin: 0;

}

#rc2_area li {

padding: 5px 0;

border-bottom: 1px solid #404040;

text-indent: 0;

font-size: 14px;

}

#rc2_area a,

#rc2_info a {

text-decoration: none;

}

#rc2_info {

float: right;

font-size: 11px;

font-family: helvetica, arial, sans-serif

}

#rc2_info a {

color: #ccc;

}

.rc2_date {

color: #aaaaaa;

font-size: 80%;

float: right;

}

.rc2_avatar img {

padding: 0px;

border: 2px solid #404040;

box-shadow: 0px 1px 9px #3B3B3B;

border-radius: 7px;

opacity: 0.9;

}

.rc2_avatar img:hover {

opacity: 1;

}

.rc2_author {

font-size: 110%;

}

.rc2_text {

cursor: pointer;

margin: 5px 0px;

opacity: 0.8;

}

.rc2_text:hover {

opacity: 1;

}

.rc2_toggleLogo {

display: none;

}

#rc2_area li:hover .rc2_toggleLogo {

display: inline;

}

.rc2_postTitle {

font-size: 85%;

font-weight: bold;

line-height: 110%;

width: 100%;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

}

#rc2_commentIndex {

margin: 5px 0;

text-align: center;

}

#rc2_switchPage {

background-color: #3B3B3B;

border-color: #404040;

margin: 5px 0;

padding: 3px;

font-size: 20px;

line-height: 16px;

}

#rc2_switchPage a,

#rc2_switchPage span {

box-sizing: border-box;

display: inline-block;

width: 25%;

padding: 0;

background-color: #3B3B3B;

border-left: 1px dashed #404040;

border-color: #404040;

text-align: center;

}

#rc2_switchPage a:hover {

}

#rc2_switchPage a:first-child {

border-left: 0;

}

</style>

</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() { /* 此為第二篇文章教學的程式碼，第2與3個官方HTML小工具 的Javascript程式 */

  var a = document.getElementById("BlogArchive1"), /* 輸入第2個官方小工具於HTML範本中之ID */

      b = document.getElementById("Subscribe1"), /* 輸入第3個官方小工具於HTML範本中之ID */

      x = document.getElementById("con_one_2"),

      y = document.getElementById("con_one_3");

 

  x.innerHTML = a.innerHTML;

  y.innerHTML = b.innerHTML;

 

  a.parentNode.removeChild(a);

  b.parentNode.removeChild(b);

} )();

</script></p>

本網誌目前引入的第兩個側邊分頁系統，只有兩個分頁：我同時將一個官方小工具： "網誌熱門文章" ，以及一個自設定的HTML小工具："網誌精華文章" 包在第二個 (two) Tab分頁功能中。這邊要特別注意的是，因為每個分頁系統給予分頁的HTML標籤 (例如: con_one_1) 都是獨一無二的，如果要安裝第二個側邊分頁系統的話，必須將分頁標籤整個更改 (例如: con_two_1)，根據 WFU blog 系列文章第四篇的說明進行修改：
讓 Blogger 側邊欄有個簡易安裝的分頁(TAB)功能__(4) 各種疑難雜症

點開取得備份程式碼

<style type='text/css'> 

.Menubox_over {  /* 預設開啟分頁按鈕的CSS格式 */

color: #D9D9D9;

font: bold 14px arial;

border-top: 1px solid #404040; 

border-left: 1px solid #404040;

border-right: 1px solid #404040;

border-bottom: 3px solid #636363;

border-bottom: 2px solid #fffff5\9;

border-top-right-radius: 5px;

border-top-left-radius: 5px;

padding: 2px 5px 1px 5px;

cursor: pointer;

background-color: #636363;

} 

 

.Menubox_out {  /* 預設關閉分頁按鈕的CSS格式 */

color: #B0B0B0;

font: bold 14px arial;

border-top: 1px solid #404040; 

border-left: 1px solid #404040;

border-right: 1px solid #404040;

border-bottom: 1px solid #3B3B3B;

border-bottom: 0px solid #777\9;

border-top-right-radius: 5px;

border-top-left-radius: 5px;

padding-top: 2px;

padding-left: 5px;

padding-right: 5px;

padding-bottom: 2px;

padding-bottom: 0px\9;

cursor: pointer;

background-color: #3B3B3B;

} 

</style> 

 

<div style="margin-top: 5px; border-bottom: 2px solid #404040;">  /* 分頁按鈕設定目錄 */

&nbsp;<span class="Menubox_over" id='two1' onclick='setTab("two",1,2)'  title='顯示 1st 工具'>網誌熱門文章</span>&nbsp;

<span class="Menubox_out" id='two2' onclick='setTab("two",2,2)' title='顯示 2nd 工具'>網誌精選文章</span>

</div><p/>

 

<div id='con_two_1'> /* 留白給第一個官方HTML小工具 熱門文章 呼叫 */

</div> 

<div id='con_two_2' style='display:none'>  /* 貼入2nd 第三方HTML小工具 精選文章 程式碼 */

<div id="collection_img"></div>

<div id="collection_img_info"><a href="https://www.wfublog.com/2018/07/blogger-collection-image-version.html">ⓦ Blogger Collection</a></div>

<script>

(function() {

var label = "精選文章", // 填入精選文章使用的標籤名稱

total = 3, // 顯示最新的幾篇文章

noImage = "https://filedn.com/l2Kq0amwwMuLL5h7z4tHcXk/Blogger%20pictures/Banner/Blogger-Banner.jpg", // 無縮圖的預設圖片

width = 200, // 圖片寬度

ratio = 0.6, // 縮圖長寬比例

feedUrl = "/feeds/posts/summary/-/" + label + "?max-results=" + total + "&alt=json-in-script&callback=?";

 

$.getJSON(feedUrl,function(a){showPost(a)});function showPost(json){var entries=json.feed.entry,html="",i,j,l,entry,title,link,url,img;var _0xef5b=["\x64\x28\x69\x20\x79\x20\x65\x29\x7B\x32\x3D\x65\x5B\x69\x5D\x3B\x36\x3D\x32\x2E\x36\x2E\x24\x74\x3B\x34\x3D\x32\x2E\x66\x24\x67\x3F\x32\x2E\x66\x24\x67\x2E\x37\x3A\x7A\x3B\x34\x3D\x34\x2E\x6B\x28\x2F\x41\x2D\x63\x2F\x2C\x22\x77\x22\x2B\x6D\x2B\x22\x2D\x68\x22\x2B\x42\x28\x6D\x2A\x43\x29\x2B\x22\x2D\x6E\x22\x29\x2E\x6B\x28\x22\x44\x3A\x22\x2C\x22\x6F\x3A\x22\x29\x3B\x35\x3D\x32\x2E\x35\x3B\x6C\x3D\x32\x2E\x35\x2E\x70\x3B\x64\x28\x6A\x3D\x30\x3B\x6A\x3C\x6C\x3B\x6A\x2B\x2B\x29\x7B\x71\x28\x35\x5B\x6A\x5D\x2E\x45\x3D\x3D\x22\x46\x22\x29\x7B\x37\x3D\x35\x5B\x6A\x5D\x2E\x38\x3B\x47\x7D\x7D\x31\x2B\x3D\x22\x3C\x33\x20\x72\x3D\x27\x48\x27\x3E\x22\x3B\x31\x2B\x3D\x22\x3C\x61\x20\x38\x3D\x27\x22\x2B\x37\x2B\x22\x27\x3E\x22\x3B\x31\x2B\x3D\x22\x3C\x34\x20\x49\x3D\x27\x22\x2B\x34\x2B\x22\x27\x2F\x3E\x22\x3B\x31\x2B\x3D\x22\x3C\x2F\x61\x3E\x22\x3B\x31\x2B\x3D\x22\x3C\x33\x20\x72\x3D\x27\x4A\x27\x3E\x22\x3B\x31\x2B\x3D\x22\x3C\x61\x20\x38\x3D\x27\x22\x2B\x37\x2B\x22\x27\x3E\x22\x2B\x36\x2B\x22\x3C\x2F\x61\x3E\x3C\x2F\x33\x3E\x22\x3B\x31\x2B\x3D\x22\x3C\x2F\x33\x3E\x22\x7D\x24\x28\x22\x23\x73\x22\x29\x2E\x31\x28\x31\x29\x3B\x4B\x20\x39\x3D\x22\x3C\x61\x20\x38\x3D\x27\x6F\x3A\x2F\x2F\x4C\x2E\x4D\x2E\x4E\x2F\x4F\x2F\x50\x2F\x51\x2D\x52\x2D\x53\x2D\x54\x2E\x31\x27\x20\x55\x3D\x27\x56\x27\x20\x57\x3D\x27\x58\x2D\x59\x3A\x20\x5A\x3B\x20\x31\x30\x3A\x20\x23\x31\x31\x3B\x20\x75\x2D\x31\x32\x3A\x20\x31\x33\x2C\x20\x31\x34\x2C\x20\x31\x35\x2D\x31\x36\x3B\x20\x75\x2D\x31\x37\x3A\x20\x31\x38\x3B\x27\x20\x36\x3D\x27\x76\x20\u7CBE\u9078\u6587\u7AE0\x5C\x6E\u7A0B\u5F0F\u8A2D\u8A08\uFF1A\x31\x39\x20\x31\x61\x27\x3E\u24E6\x20\x76\x20\x31\x62\x3C\x2F\x61\x3E\x22\x2C\x24\x62\x3D\x24\x28\x22\x23\x78\x22\x29\x3B\x71\x28\x24\x62\x2E\x70\x29\x7B\x24\x62\x2E\x31\x28\x39\x29\x7D\x31\x63\x7B\x24\x28\x22\x23\x73\x22\x29\x2E\x31\x64\x28\x22\x3C\x33\x20\x31\x65\x3D\x27\x78\x27\x3E\x22\x2B\x39\x2B\x22\x3C\x2F\x33\x3E\x22\x29\x7D\x3B","\x7C","\x73\x70\x6C\x69\x74","\x7C\x68\x74\x6D\x6C\x7C\x65\x6E\x74\x72\x79\x7C\x64\x69\x76\x7C\x69\x6D\x67\x7C\x6C\x69\x6E\x6B\x7C\x74\x69\x74\x6C\x65\x7C\x75\x72\x6C\x7C\x68\x72\x65\x66\x7C\x69\x6E\x66\x6F\x7C\x7C\x63\x6F\x6C\x6C\x65\x63\x74\x69\x6F\x6E\x5F\x69\x6E\x66\x6F\x7C\x7C\x66\x6F\x72\x7C\x65\x6E\x74\x72\x69\x65\x73\x7C\x6D\x65\x64\x69\x61\x7C\x74\x68\x75\x6D\x62\x6E\x61\x69\x6C\x7C\x7C\x7C\x7C\x72\x65\x70\x6C\x61\x63\x65\x7C\x7C\x77\x69\x64\x74\x68\x7C\x7C\x68\x74\x74\x70\x73\x7C\x6C\x65\x6E\x67\x74\x68\x7C\x69\x66\x7C\x63\x6C\x61\x73\x73\x7C\x63\x6F\x6C\x6C\x65\x63\x74\x69\x6F\x6E\x5F\x69\x6D\x67\x7C\x7C\x66\x6F\x6E\x74\x7C\x42\x6C\x6F\x67\x67\x65\x72\x7C\x7C\x63\x6F\x6C\x6C\x65\x63\x74\x69\x6F\x6E\x5F\x69\x6D\x67\x5F\x69\x6E\x66\x6F\x7C\x69\x6E\x7C\x6E\x6F\x49\x6D\x61\x67\x65\x7C\x73\x37\x32\x7C\x70\x61\x72\x73\x65\x49\x6E\x74\x7C\x72\x61\x74\x69\x6F\x7C\x68\x74\x74\x70\x7C\x72\x65\x6C\x7C\x61\x6C\x74\x65\x72\x6E\x61\x74\x65\x7C\x62\x72\x65\x61\x6B\x7C\x69\x74\x65\x6D\x7C\x73\x72\x63\x7C\x70\x6F\x73\x74\x5F\x74\x69\x74\x6C\x65\x7C\x76\x61\x72\x7C\x77\x77\x77\x7C\x77\x66\x75\x62\x6C\x6F\x67\x7C\x63\x6F\x6D\x7C\x32\x30\x31\x38\x7C\x30\x37\x7C\x62\x6C\x6F\x67\x67\x65\x72\x7C\x63\x6F\x6C\x6C\x65\x63\x74\x69\x6F\x6E\x7C\x69\x6D\x61\x67\x65\x7C\x76\x65\x72\x73\x69\x6F\x6E\x7C\x74\x61\x72\x67\x65\x74\x7C\x5F\x62\x6C\x61\x6E\x6B\x7C\x73\x74\x79\x6C\x65\x7C\x74\x65\x78\x74\x7C\x64\x65\x63\x6F\x72\x61\x74\x69\x6F\x6E\x7C\x6E\x6F\x6E\x65\x7C\x63\x6F\x6C\x6F\x72\x7C\x63\x63\x63\x7C\x66\x61\x6D\x69\x6C\x79\x7C\x68\x65\x6C\x76\x65\x74\x69\x63\x61\x7C\x61\x72\x69\x61\x6C\x7C\x73\x61\x6E\x73\x7C\x73\x65\x72\x69\x66\x7C\x73\x69\x7A\x65\x7C\x31\x31\x70\x78\x7C\x57\x46\x55\x7C\x42\x4C\x4F\x47\x7C\x43\x6F\x6C\x6C\x65\x63\x74\x69\x6F\x6E\x7C\x65\x6C\x73\x65\x7C\x61\x66\x74\x65\x72\x7C\x69\x64","","\x66\x72\x6F\x6D\x43\x68\x61\x72\x43\x6F\x64\x65","\x72\x65\x70\x6C\x61\x63\x65","\x5C\x77\x2B","\x5C\x62","\x67"];eval(function(_0xe1cax1,_0xe1cax2,_0xe1cax3,_0xe1cax4,_0xe1cax5,_0xe1cax6){_0xe1cax5=function(_0xe1cax3){return(_0xe1cax3<_0xe1cax2?_0xef5b[4]:_0xe1cax5(parseInt(_0xe1cax3/_0xe1cax2)))+((_0xe1cax3=_0xe1cax3%_0xe1cax2)>35?String[_0xef5b[5]](_0xe1cax3+29):_0xe1cax3.toString(36))};if(!_0xef5b[4][_0xef5b[6]](/^/,String)){while(_0xe1cax3--){_0xe1cax6[_0xe1cax5(_0xe1cax3)]=_0xe1cax4[_0xe1cax3]||_0xe1cax5(_0xe1cax3)}_0xe1cax4=[function(_0xe1cax5){return _0xe1cax6[_0xe1cax5]}];_0xe1cax5=function(){return _0xef5b[7]};_0xe1cax3=1}while(_0xe1cax3--){if(_0xe1cax4[_0xe1cax3]){_0xe1cax1=_0xe1cax1[_0xef5b[6]](new RegExp(_0xef5b[8]+_0xe1cax5(_0xe1cax3)+_0xef5b[8],_0xef5b[9]),_0xe1cax4[_0xe1cax3])}}return _0xe1cax1}(_0xef5b[0],62,77,_0xef5b[3][_0xef5b[2]](_0xef5b[1]),0,{}))};

})();

</script>

 

<style>

#collection_img .item { margin-bottom: 15px; }

#collection_img img { width: 30%; height: auto; object-fit: cover; }

#collection_img .post_title a { text-decoration: none; font-size: 14px; }

#collection_img_info { margin-top: 5px; text-align: right; }

</style>  

</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() {  /* 此為第二篇文章教學的程式碼，第1個官方HTML小工具 的Javascript程式 */

  var a = document.getElementById("PopularPosts1"), /* 輸入第1個官方小工具於HTML範本中之ID */

        x = document.getElementById("con_two_1");

 

  x.innerHTML = a.innerHTML;

 

  a.parentNode.removeChild(a);

} )();

</script></p>