【Blog】展開/隱藏文章目錄的小工具
今天在Beautiful Beta: BlogToC Widget Released看到一個蠻不錯的功能
呈現效果請看我的部落格右上方
方法如下：
步驟1:
找到
將它換成
步驟 2:
新增下列語法到<head>之前
存檔。
步驟 3:
回到網頁元素，新增一個HTML/JavaScript在文章上方，
Title留白，內容部份貼上：
步驟 4:
新增一個HTML/JavaScript在Sidebar，
Title任你填，目錄、ToC、Table of contents等都可以，
內容貼上：
紅色的YOURID請改成自己的帳號，
粉紫色的Show Table of Contents也可以改成喜歡的字樣，
然後存檔，OK！
呈現效果請看我的部落格右上方
方法如下：
步驟1:
找到
<b:section class='main' id='main' showaddelement='no'>將它換成
<b:section class='main' id='main' showaddelement='yes'>步驟 2:
新增下列語法到<head>之前
<style type='text/css'>
#toc {
border: 0px solid #000000;
background: #ffffff;
padding: 5px;
width:500px;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #ffd595;
color: #000000;
padding-left: 5px;
width:250px;
}
.toc-header-col2 {
width:75px;
}
.toc-header-col3 {
width:125px;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:underline;
}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
}
</style>存檔。
步驟 3:
回到網頁元素，新增一個HTML/JavaScript在文章上方，
Title留白，內容部份貼上：
<div id="toc"></div>步驟 4:
新增一個HTML/JavaScript在Sidebar，
Title任你填，目錄、ToC、Table of contents等都可以，
內容貼上：
<div id="toclink"><a href="javascript:showToc();">Show Table of Contents</a><br/><br/></div>
<script style="text/javascript" src="http://home.planet.nl/~hansoosting/downloads/blogtoc.js"></script>
<script src="http://YOURID.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>
<script src="http://YOURID.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=101&max-results=100&callback=loadtoc"></script>紅色的YOURID請改成自己的帳號，
粉紫色的Show Table of Contents也可以改成喜歡的字樣，
然後存檔，OK！
延伸閱讀：
不知為何都不成功
回覆刪除