2010年9月6日 星期一

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

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

連結清單作成水平導覽列選單

這個方法僅適用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的「網頁」清單建立「導覽列」

8 則留言:

Shane Lee 提到...

你好請問如果我用清單小工具建立的話 語法該怎麼改??我怎麼試都沒成功ˊˋ 謝謝分享喔!

工作熊 提到...

Shane Lee;
你的「連結清單」小工具一定要放在「標頭」的正下方才可以,不可以放在側邊欄。

Shane Lee 提到...

謝謝你的回覆:) 不過我要問的是 我是用"清單"小工具(TextList)做我的導覽列 所以我搞不太懂語法要怎麼改才行?

工作熊 提到...

Shen Lee;
使用「清單」小工具並不需要什麼語法,但你必須要手動加入聯結的網址,一樣要將「清單」小工具拉到【標頭】的下方才可以作用,如果還是不行,今天晚上我有空的時後再來做一篇教學吧!

Shane Lee 提到...

噢!抱歉我沒問清楚 因為我成功用了清單的導覽列後(有放在標頭下面)就沒有"反白"效果了 所以參考了這篇去改語法 但可能"連結清單"&"清單"要用的語法不太一樣?所以反白效果一直試不成功...

工作熊 提到...

Shane Lee;
我在這篇文章http://blogger-script-study.blogspot.com/2010/09/blogspot-list-menu.html的比較表中有提到使用「清單」的缺點就是無法產生反白的效果。
修改語法方面我要再看看~

Shane Lee 提到...

嗯嗯我有看到那篇 也有看到(可解決)
所以就硬是照著這一篇試了很久
一直弄不出來就忍不住直接問你了 ><
很謝謝你的熱心回應!

月的拉拉拉 提到...

謝謝: )

很感激,照做後就OK了