Blogger小技巧04－側欄選單分頁

參考資料來源：
WFU BLOG
讓 Blogger 側邊欄有個簡易安裝的分頁(TAB)功能

ACG&I   一切發生在二次元與網路上的事
在Blogger安裝側邊攔分頁功能


<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;
border-top-left-radius: 5px;
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;
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: #ddd;
}
</style>

<div style="margin-top: 5px; border-bottom: 2px solid #777;">
&#12288;<span class="Menubox_over" id='one1' onclick='setTab("one",1,3)'  title='顯示 1st 工具'>1st 工具</span>&nbsp;
<span class="Menubox_out" id='one2' onclick='setTab("one",2,3)' title='顯示 2nd 工具'>2nd 工具</span>&nbsp;
<span class="Menubox_out" id='one3' onclick='setTab("one",3,3)' title='顯示 3rd 工具'>3rd 工具</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'>
常用連結清單
<select style="width:220px" onchange="window.open(this.options[this.selectedIndex].value)">
<option value="" />

<optgroup selected="true" label="常用網頁">
 <option value="http://tw.yahoo.com" />yahoo網頁
 <option value="http://www.google.com" />google網頁
 <option value="https://sites.google.com/view/roats1000" />個人google Site
</optgroup>

<optgroup label="學校網頁">
 <option value="http://www.tljh.cyc.edu.tw/" />大林國中
 <option value="https://tljh-nature.blogspot.com/" />自然領域
</optgroup>

</select>

站內標題清單
<select style="width:220px" onchange="location.href=this.options[this.selectedIndex].value">
<option value="" />

 <optgroup label="部落格網頁">
 <option value="https://roats1000.blogspot.com/" />Home
 <option value="https://roats1000.blogspot.com/2020/02/blog-post.html" />About

<optgroup label="資訊科技">
 <option value="https://roats1000.blogspot.com/search/label/電腦常見問題" />電腦常見問題
 <option value="https://roats1000.blogspot.com/search/label/影片編輯" />影片編輯
 <option value="https://roats1000.blogspot.com/search/label/Blogger" />Blogger相關

</optgroup></optgroup></select>


</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";
  }
}
</script></p>