水平排列 選單

適合裝在新範本佈景主題
 網頁連結清單可出現在 ~ 置頂橫幅裡 

 

要如何讓選單 出現在置頂橫幅裡 ??
 其實你只要將選單小工具放在，標頭區段空間裡，這樣就 OK 了


首先轉到 版面配置 窗格，在你的( 標頭 ) 區段，網頁標題小工具下，新增一個網頁小工具。

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

點按、在XML編輯器 右上角的跳到小工具

找到剛剛新增的網頁清單小工具 PageList1，之後、複製下面的 HTML碼 ，直接換掉 pageList1 小工具。

點按下面的 Code 複製 HTML碼：

 <b:widget id='PageList222' locked='false' title='水平排列網頁清單' type='PageList' version='2' visible='true'>
                 <b:includable id='main'>
<b:include name='content'/>
</b:includable>
                      <b:includable id='content'>
<div class='menu-widget'>
<b:include name='pageList'/>
</div>
<style type='text/css'>
.sticky .centered-top {padding:0}  
.sticky #Header1 {margin-right:12px}
.sticky #header{display:flex; flex-flow:wrap;}
.sticky #<data:widget.instanceId/>{margin:auto 0}  
#<data:widget.instanceId/> ul{ padding:0; margin:0;}
#<data:widget.instanceId/> li a{ color:#666}  
#<data:widget.instanceId/> li{
margin:0 2px;  
position: relative;
overflow: hidden;
list-style: none;
box-sizing: border-box;
border: 1px solid #888;
line-height: 1.3;
float:left;
padding:4px 6px;
background: white; /*--底色--*/   
}
#<data:widget.instanceId/> ul li:hover:before { left: 0; right: 0;}
#<data:widget.instanceId/> ul li:before {
content: &quot;&quot;;
position: absolute;
left: 50%;
right: 50%;
bottom: 0;
background: #ee3098;
height: 4px;
-webkit-transition: 0.3s ease-out;
transition: 0.3s ease-out;
}
</style>
</b:includable>
                      <b:includable id='overflowButton'/>
                      <b:includable id='overflowablePageList'/>
                      <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'>
<b:attr cond='data:link.href contains &quot;#&quot;' name='target' value='_blank'/>
<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>

編輯網頁清單

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

收工 ....

※ 在 URL 網址後面加上井字 ( # ) 符號，該連結將會以新頁框開啟 

 https://e-717.blogspot.com/#
https://你的部落名稱.blogspot.com/search/label/標籤#


選單出場 的判斷條件 : 設定

<b:widget cond='data:view.isMultipleItems' id='PageList222' locked='false' title='水平排列網頁清單' type='PageList' version='2' visible='true'>

不在單篇文章閱覽模式顯現 👀

插入小部件 的小撇步

找到小部件(小工具)後，在左邊的行號後有一個3角型符號，按下後會收合

收合成一行時，你就可以在上一行或下一行，貼上小工具HTML碼了!!

也可以反白刪除、替代。