2010/6/15

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


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



blogger高亮顯示當前頁面

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



我針對的是使用「連結清單」做成的導覽列,如果你是用「網頁清單」小工具做成導覽列的話可以先跳過步驟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就可以囉!

有問題再問我吧:)。

10 則留言:

  1. 有空也來玩一玩好了,感覺不錯用也

    回覆刪除
  2. Good job, though I don't know much about coding.

    回覆刪除
  3. Good job, though I don't know much about coding.

    回覆刪除
  4. 凱特打結妳好:

    我在網路上找了很久關於導覽列的製作方法,看到妳的文章的時候真的好開心喔!

    請問如果是使用「網頁清單」的方式製作導覽列,要怎麼製作出連結到外部的網頁?

    "如果是用「網頁清單」小工具做成導覽列,就把#LinkList換成#PageList或是符合你家部落格樣板該區段的widget id就可以囉!"......這一段我看了很久還是無法完全了解,懇請解惑,謝謝!

    回覆刪除
  5. @Kuan-Ying 「網頁清單」是指內部的網頁,
    所 以沒辦法連到外部,
    要用連結清單才可以喔,
    這是這兩個名稱的分別:)

    回覆刪除
  6. 原來也可以這樣作啊!
    謝謝分享!

    回覆刪除
  7. 請問一下水平是選單可以有辦法改成下拉式的嗎?

    回覆刪除
  8. 下拉式的話我來研究看看

    回覆刪除