在水平連結導覽列高亮顯示當前頁面

某天突然心血來潮，想研究看看有沒有辦法讓blogger上的水平導航列可以在高亮顯示當前瀏覽頁面，讓讀者在瀏覽網頁時輕鬆得知目前所在位置。google了半天找不到相關文章，自行試試摸索了一段時間後終於研究出實現的方法，特此分享，希望能幫助到其他有需要的部落客。

在水平連結導覽列高亮顯示當前頁面

我針對的是使用「連結清單」做成的導覽列，如果你是用「網頁清單」小工具做成導覽列的話可以先跳過步驟1，直接看步驟2；我所使用的方法很簡單，僅需在CSS上定義blogger內建的標記值即可，沒有應用JavaScript或其他外掛，一點都不複雜(務必記得在實做以前儲存完整範本)。

• 步驟1>>

首先，勾選展開小裝置範本→利用ctrl+F找到<b:widget id='LinkList' locked='false' title='' type='LinkList'>(若找不到就掐頭去尾留中間id='LinkList'這樣找找看類似區段)，整段程式碼應該如下：

<b:widget id='LinkList' 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'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>


然後用下列程式碼取代

<b:widget id='LinkList' 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'>
<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/>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:if>
</b:loop>
</ul>

• 步驟2>>

在 Blogger 專用的 CSS 區段裡（<b:skin> 和 ]]></b:skin>之間）加上高亮當前頁面的CSS定義：

#LinkList .selected {
background-color: #fff;
border-bottom: none;
}


CSS樣式當然可以自行依照個人模板配色改變；如果是用「網頁清單」小工具做成導覽列，就把#LinkList換成#PageList或是符合你家部落格樣板該區段的widget id就可以囉!

有問題再問我吧:)。

部落格密技 blogger hack