Blogger 可摺合的選單工具 🤍 灰鴿 ⭐ Google Blogger 建置研習工作室

多款可摺疊收合的下拉式選單小工具，
適用於新的 Blogger RWD 範本

在HTML5裡有一個標籤元素 <details> 可以用來收合包容任何物件。
這個可以打開和關閉的 <details> 交互式小部件，預設情況下，小部件是關閉的，打開時，它會展開並顯示其中的內容。

語法如下

<details>
<summary>提示標題</summary>
書寫內容處 ...
</details>

現在、我們就用 <details> 這個標籤元素，來把連結清單、網頁清單，包裹起來。

在每種樣式裡連結清單、網頁清單小工具，各有一款

Demo 範例 ~ 在 Blogger 主題工作室左側欄

首先選擇複製一款清單 XML 碼。

接下來，>> 點選編輯HTML >> 進入 XML編輯器

在你想置放的地方，插入貼上XML碼，即使貼錯地方也沒關係，可以回到版面配置窗框裡再移動。

編輯連結清單或網頁清單

轉到 [版面配置]窗格 ~ 打開連結清單或網頁清單小工具，在設置中填寫網址和網站名稱。

折合式選單 ( 樣式一 )

點按下面的 Code 複製 連結清單 XML碼：

<b:widget id='LinkList11' locked='false' title='連結清單' type='LinkList' version='2' visible='true'>
    <b:includable id='main'>
    <b:include name='content'/>
</b:includable>
    <b:includable id='content'>
   <details class='collapsible extendable'>
     <summary><data:title/></summary>
<div class='widget-content'>
    <ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
   </ul>
</div>
</details>
<style>
#<data:widget.instanceId/> summary{display: list-item; cursor: pointer; font-size: 20px; font-weight: bold;}
#<data:widget.instanceId/> summary::marker{ color:red;}
#<data:widget.instanceId/> ul{
   list-style: none;
   background: linear-gradient(#ddd,white,#ccc);
   padding:6px 0;
   box-shadow:1px 2px 5px rgba(50,50,50,0.3);
   margin:10px 3px 0;
    }
#<data:widget.instanceId/> li{color:#555; border:3px solid transparent; padding:5px 12px; margin:2px 6px;}
#<data:widget.instanceId/> li:hover{
background:rgba(250,250,250,0.7);
border-left-color:red; box-shadow:1px 2px 3px rgba(30,30,30,0.6);}
</style>
</b:includable>
</b:widget>

點按下面的 Code 複製 網頁清單 XML碼：

<b:widget id='PageList11' locked='false' title='網頁清單' type='PageList' version='2' visible='true'>
<b:includable id='main'>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<details>
<summary> <data:title/> </summary>
<div class='widget-content'>
<b:include cond='data:widget.sectionId == "page_list_top"' name='overflowablePageList'/>
<b:include cond='data:widget.sectionId != "page_list_top"' name='pageList'/>
</div>
</details>
<style>
#<data:widget.instanceId/> summary{display: list-item; cursor: pointer; font-size: 20px; font-weight: bold;}
#<data:widget.instanceId/> summary::marker{ color:red;}
#<data:widget.instanceId/> ul{
   list-style: none;
   background: linear-gradient(#ddd,white,#ccc);
   padding:6px 0;
   box-shadow:1px 2px 5px rgba(50,50,50,0.3);
   margin:10px 3px 0;
    }
#<data:widget.instanceId/> li{color:#555; border:3px solid transparent; padding:5px 12px; margin:2px 6px;}
#<data:widget.instanceId/> li:hover{
background:rgba(250,250,250,0.7);
border-left-color:red; box-shadow:1px 2px 3px rgba(30,30,30,0.6);}
</style>
    </b:includable>
    <b:includable id='overflowButton'>
<a><data:messages.moreEllipsis/></a>
</b:includable>
    <b:includable id='overflowablePageList'>
<div class='overflowable-container'>
<div class='overflowable-contents'>
<div class='container'>
<b:with value='true' var='overflow'>
<b:with value='"tabs"' var='pageListClass'>
<b:include name='pageList'/>
</b:with>
</b:with>
</div>
</div>
<div class='overflow-button hidden'>
<b:include name='overflowButton'/>
</div>
</div>
</b:includable>
    <b:includable id='pageLink'>
<li>
<b:class cond='data:overflow' name='overflowable-item'/>
<b:class cond='data:link.isCurrentPage' name='selected'/> <a expr:href='data:link.href'><data:link.title/></a>
</li>
</b:includable>
    <b:includable id='pageList'>
<ul>
<b:class cond='data:pageListClass' expr:name='data:pageListClass'/>
<b:loop values='data:links' var='link'>
<b:include name='pageLink'/>
</b:loop>
</ul>
</b:includable>
</b:widget>

折合式選單 ( 樣式二 ) More ▽ △

點按下面的 Code 複製 連結清單 XML碼：

<b:widget id='LinkList12' locked='false' title='連結清單' type='LinkList' version='2' visible='true'>
    <b:includable id='main'>
    <b:include name='content'/>
</b:includable>
<b:includable id='content'>
   <details class='collapsible extendable'>
<summary>
<div class='collapsible-title'>
<h5 class='title'><data:title/></h5>
<svg class='svg-icon-24 chevron-down'>
<use xlink:href='/responsive/sprite_v1_6.css.svg#ic_expand_more_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'/>
</svg>
<svg class='svg-icon-24 chevron-up'>
<use xlink:href='/responsive/sprite_v1_6.css.svg#ic_expand_less_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'/>
</svg>
</div>
</summary>
<div class='widget-content'>
    <ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
   </ul>
</div>
</details>
<style>
#<data:widget.instanceId/> ul{
   list-style: none;
  background: linear-gradient(#caccc7,#fff,#b1b8be);
  padding:6px 0;
   box-shadow:1px 2px 5px rgba(50,50,50,0.3);
   margin:10px 3px 0;
    }
#<data:widget.instanceId/> li{
    color:#fff;
   margin:6px;
  border-radius: 6px;
   border:3px solid transparent;
   background:rgba(80,80,80,0.3);
  padding:5px 12px;
   transition: 0.3s;}
#<data:widget.instanceId/> li:hover{
background:rgb(250,250,250);
border-left-color:red; box-shadow:1px 2px 3px rgba(30,30,30,0.6);
   color:#666}
</style>
</b:includable>
</b:widget>

點按下面的 Code 複製 網頁清單 XML碼：

<b:widget id='PageList12' locked='false' title='網頁清單' type='PageList' version='2' visible='true'>
    <b:includable id='main'>
<b:include name='content'/>
</b:includable>
   <b:includable id='content'>
<details class='collapsible extendable'>
    <summary>
<div class='collapsible-title'>
<h5 class='title'><data:title/></h5>
<svg class='svg-icon-24 chevron-down'>
<use xlink:href='/responsive/sprite_v1_6.css.svg#ic_expand_more_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'/>
</svg>
<svg class='svg-icon-24 chevron-up'>
<use xlink:href='/responsive/sprite_v1_6.css.svg#ic_expand_less_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'/>
</svg>
</div>
</summary>
<div class='widget-content'>
<b:include cond='data:widget.sectionId == "page_list_top"' name='overflowablePageList'/>
<b:include cond='data:widget.sectionId != "page_list_top"' name='pageList'/>
</div>
</details>
<style>
#<data:widget.instanceId/> ul{
   list-style: none;
   background: linear-gradient(#caccc7,#fff,#b1b8be);
   padding:6px 0;
   box-shadow:1px 2px 5px rgba(50,50,50,0.3);
   margin:10px 3px 0;
    }
#<data:widget.instanceId/> li{
    color:#fff;
   margin:6px;
   border-radius: 6px;
   border:3px solid transparent;
   background:rgba(80,80,80,0.3);
padding:5px 12px;
   transition: 0.3s;}
#<data:widget.instanceId/> li:hover{
background:rgb(250,250,250);
   border-left-color:red; box-shadow:1px 2px 3px rgba(30,30,30,0.6);
   color:#666}
</style>
</b:includable>
    <b:includable id='overflowButton'>
<a><data:messages.moreEllipsis/></a>
</b:includable>
<b:includable id='overflowablePageList'>
<div class='overflowable-container'>
<div class='overflowable-contents'>
<div class='container'>
<b:with value='true' var='overflow'>
<b:with value='"tabs"' var='pageListClass'>
<b:include name='pageList'/>
</b:with>
</b:with>
</div>
</div>
<div class='overflow-button hidden'>
<b:include name='overflowButton'/>
</div>
</div>
</b:includable>
    <b:includable id='pageLink'>
<li>
<b:class cond='data:overflow' name='overflowable-item'/>
<b:class cond='data:link.isCurrentPage' name='selected'/> <a expr:href='data:link.href'><data:link.title/></a>
</li>
</b:includable>
<b:includable id='pageList'>
<ul>
<b:class cond='data:pageListClass' expr:name='data:pageListClass'/>
<b:loop values='data:links' var='link'>
<b:include name='pageLink'/>
</b:loop>
</ul>
</b:includable>
</b:widget>

折合式選單 ( 樣式三 )

點按下面的 Code 複製 連結清單 XML碼：

點按下面的 Code 複製 網頁清單 XML碼：

<b:widget id='PageList11' locked='false' title='網頁清單' type='PageList' version='2' visible='true'>
<b:includable id='main'>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<details>
<summary> <data:title/> </summary>
<div class='widget-content'>
<b:include cond='data:widget.sectionId == "page_list_top"' name='overflowablePageList'/>
<b:include cond='data:widget.sectionId != "page_list_top"' name='pageList'/>
</div>
</details>
<style>
#<data:widget.instanceId/> summary{display: list-item; cursor: pointer; font-size: 20px; font-weight: bold;}
#<data:widget.instanceId/> li{padding:12px 5px 3px}
#<data:widget.instanceId/> li+li{border-top:2px dotted #bbb}
</style>
</b:includable>
<b:includable id='overflowButton'>
<a><data:messages.moreEllipsis/></a>
</b:includable>
<b:includable id='overflowablePageList'>
<div class='overflowable-container'>
<div class='overflowable-contents'>
<div class='container'>
<b:with value='true' var='overflow'>
<b:with value='"tabs"' var='pageListClass'>
<b:include name='pageList'/>
</b:with>
</b:with>
</div>
</div>
<div class='overflow-button hidden'>
<b:include name='overflowButton'/>
</div>
</div>
</b:includable>
<b:includable id='pageLink'>
<li>
<b:class cond='data:overflow' name='overflowable-item'/>
<b:class cond='data:link.isCurrentPage' name='selected'/> <a expr:href='data:link.href'><data:link.title/></a>
</li>
</b:includable>
<b:includable id='pageList'>
<ul>
<b:class cond='data:pageListClass' expr:name='data:pageListClass'/>
<b:loop values='data:links' var='link'>
<b:include name='pageLink'/>
</b:loop>
</ul>
</b:includable>
</b:widget>

Demo 範例 ~ 在 Blogger 主題工作室左側欄