Blogspot讓「連結清單」建立的「水平導覽列選單」也有反白效果

https://blogger-script-study.blogspot.com/2010/09/blogspot-active-menu-reverse.html?m=0

這個方法僅適用Blogspot的新模板。提醒你修改模板前最好先下載完整範本備份，以備不時之需。

注意事項：

1. 記得要把【展開小裝置範本】前面的框框打勾。
2. 下面的程式碼先按照【用Blogger的「連結清單」建立「水平導覽列選單」】一文把水平選單建立後才可執行。

先找到 【id=’LinkList】的這段語法，如果你的部落格中有超過一個以上的「連結清單」，那麼LinkList後面的數字可能就不一定是【1】，可能就要請你留意一下，基本上它會隨著你增加的「連結清單」小工具次數而遞增，也就是說如果你的水平導覽列的「連結清單」是第二個，那其數字就有可能是【2】，總之你可以在瀏覽器下按【Ctrl+F】先搜尋看看有幾個。找到了之後把下面的桃紅色的程式碼加進去就可以了。

<b:widget id='LinkList1' locked='false' title='' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
<!-- 水平導覽選單高亮度 start I -->
       <b:if cond='data:blog.url==data:link.target'>
       <li class='selected'>
       <a expr:href='data:link.target'><data:link.name/></a>
       </li>
       <b:else/>
<!-- 水平導覽選單高亮度 end I -->
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
       </b:if> <!-- 水平導覽選單高亮度 II -->
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
</div>

完成後記得要按【儲存範本】，否則不會生效。先檢視網誌看看是否已經有反白高亮度的效果出現了，一般來說只要把上面的程式碼設定好就可以了。

如果上面的程式碼加好後還是有問題，就必須再加下面的「連結清單」反白定義CSS的語法。請將這段程式碼放放在 【/* Content ---】區塊的最底下，【/* header ---】區塊的前面。

眼尖的你不知道有沒有看到 LinkList 後面有個數字【1】，這個數字要跟上面的第一段程式碼一致喔！

LinkList1 .selected {
background-color: #ffffff;
border-bottom: none;
}

文章參考【凱特打結該該叫】的在水平連結導覽列高亮顯示當前頁面一文

---

延伸閱讀：
回到》Blogger 部落格技巧總整理

擁抱Blogspot的新範本板型
試用Blogger提供的新模板範本修改工具
用Blogger的「網頁」清單建立「導覽列」