這個方法僅適用Blogspot的新模板。提醒你修改模板前最好先下載完整範本備份,以備不時之需。
注意事項:
- 記得要把【展開小裝置範本】前面的框框打勾。
- 下面的程式碼先按照【用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的「網頁」清單建立「導覽列」
8 則留言:
你好請問如果我用清單小工具建立的話 語法該怎麼改??我怎麼試都沒成功ˊˋ 謝謝分享喔!
Shane Lee;
你的「連結清單」小工具一定要放在「標頭」的正下方才可以,不可以放在側邊欄。
謝謝你的回覆:) 不過我要問的是 我是用"清單"小工具(TextList)做我的導覽列 所以我搞不太懂語法要怎麼改才行?
Shen Lee;
使用「清單」小工具並不需要什麼語法,但你必須要手動加入聯結的網址,一樣要將「清單」小工具拉到【標頭】的下方才可以作用,如果還是不行,今天晚上我有空的時後再來做一篇教學吧!
噢!抱歉我沒問清楚 因為我成功用了清單的導覽列後(有放在標頭下面)就沒有"反白"效果了 所以參考了這篇去改語法 但可能"連結清單"&"清單"要用的語法不太一樣?所以反白效果一直試不成功...
Shane Lee;
我在這篇文章http://blogger-script-study.blogspot.com/2010/09/blogspot-list-menu.html的比較表中有提到使用「清單」的缺點就是無法產生反白的效果。
修改語法方面我要再看看~
嗯嗯我有看到那篇 也有看到(可解決)
所以就硬是照著這一篇試了很久
一直弄不出來就忍不住直接問你了 ><
很謝謝你的熱心回應!
謝謝: )
很感激,照做後就OK了
張貼留言