【Blog】展開/隱藏文章目錄的小工具

今天在Beautiful Beta: BlogToC Widget Released看到一個蠻不錯的功能

呈現效果請看我的部落格右上方

方法如下:
步驟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!

延伸閱讀:

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s