2012年12月1日 星期六

[教學]將 Blogger「標籤」小工具放在導覽列實作

[教學]將 Blogger「標籤」小工具放在導覽列實作

Wayne Fu 0 A+

(Pic from: Office Worker)
之前在「+Shu-Yuan Tien ── Office Worker」看到標籤出現在導覽列覺得挺神奇的,研究了一陣後發現可以在後台先把導覽列用滑鼠拖曳到網頁最上方,接著再把「標籤」小工具拖曳到導覽列,那麼網站所有的標籤就會自動出現在導覽列,不必像以前導覽列的使用方式,得一個個手動把標籤連結加上去。

這給了我一個靈感,如果把「標籤」拉到導覽列,而側邊欄其他工具拉到最底下,那麼整個版面可以全部留給文章,閱讀起來實在太舒服了,而且所有重要的導覽功能仍在網頁上方,訪客不會找不到想要的功能,就像我的「三國志分站」這樣的效果。

只不過在實作時遇上了一些要解決的狀況:

1. 分站使用的官方範本為「圖片視窗」,導覽列的頁籤有圓角效果,當導覽列拉到網頁最上方時,頁籤變成飄浮在空中的感覺(囧~)。
2. 標籤拉到導覽列,按下標籤時,該標籤會顯示不正常。

最後花了一番功夫解決,以下第一點為大致說明 Blogger 運作的原理,想直接看安裝及解決過程的實作請跳「二、調整導覽列」。


一、Blogger 運作的原理

標題的圖片比較不清楚,下面這張圖比較清楚:



其實不止「標籤」小工具,其他小工具也可以拉到導覽列,只是使用「標籤」的效果會比較好。而拉到導覽列的小工具,在範本裡每個小工具的項目會被自動加上 <ul>、<li> 的語法,再配合預設的 CSS 設定 (float: left),標籤就會乖乖在導覽列排列整齊。

接下來根據不同範本會有不同狀況,有的範本做完以上動作就可以收工了;但如果是官方範本「圖片視窗」的導覽列(不確定其他範本會不會也有這個情形),範本裏自動新增的判斷句會影響點擊頁籤後的效果──

判斷1: 如該頁籤的網址就是當前的網址,該頁籤套用某個 CSS 效果。
判斷2: 該頁籤的網址非當前的網址,顯示預設的效果。

在「圖片視窗」這個範本,「標籤」小工具被當成導覽列後,標籤的程式碼跟原本的導覽列程式碼是有些出入的,導致上面提到的判斷句會執行錯誤,點擊頁籤後會變成下面的狀況──




點擊後會發生標籤名稱無法正常顯示的情形。


另外就是導覽列拉到網頁最上方的情形,如果原本導覽列不是頁籤的形狀,拉上去看起來就不會奇怪;但如果是頁籤的形狀,拉到網頁最上方看起來就會像下圖這般──



只有兩個圓角的頁籤形狀浮在空中很奇怪,以下就先來說明怎麼調整原本導覽列的位置及形狀。



二、調整導覽列



1. 版面配置:如上圖,在後台版面配置我將導覽列(就是「網頁」小工具)拉到最上面,側邊欄已經被我撤掉,文章區塊的寬度調成整個版面的寬度。請注意「網頁」、「標頭」、「標籤」這三個要黏在一起,而「標籤」要跟下方的「網誌文章」有一點間隔

2. 調整位置:導覽列離網頁上方有一段距離不好看,需要細調一下 CSS 參數,到 Blogger 後台打開範本文件 → 編輯 HTML → 搜尋 PageList1 這個字串可找到這個小工具的區塊。

往下幾行可找到 <div class='widget-content'> 這個字串,改成 <div class='widget-content' style='margin-top: -25px;'> 後是我覺得比較滿意的位置。但是每個人的範本不一樣,-25px 這個參數需要根據自己的版面來調整,建議可參考「Google Chrome 開發人員工具__調整部落格版面實作」這一篇的方法來調整比較方便,節省不斷儲存範本、重整頁面的時間。

3. 調整形狀、外框大小:飄在空中的頁籤形狀很醜(只有兩個圓角),若改成四個圓角比較好看(IE8(含)以下不支援圓角效果)。接續上個動作,繼續往下找到這段程式碼:

<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
<b:else/>
<li><a expr:href='data:link.href'><data:link.title/></a></li>
</b:if>
</b:loop>

把這段程式碼的 a 元素塞入圓角語法就搞定了,加入以下紅字部分的語法:

<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='selected'><a expr:href='data:link.href' style='border-radius: 10px; padding: 0px 5px;'><data:link.title/></a></li>
<b:else/>
<li><a expr:href='data:link.href' style='border-radius: 10px; padding: 0px 5px;'><data:link.title/></a></li>
</b:if>
</b:loop>


除了圓角語法的 10px, 另外 padding 的參數 0px 5px 可調整外框的大小(第一個參數 0px 代表文字到上、下外框的距離;第二個參數 5px 代表文字到左、右外框的距離),這些參數都可自行調整,直到找到自己滿意的效果。同樣建議用「Google Chrome 開發人員工具」來作細部調整。


三、調整標籤小工具

如果你的範本如同「一、Blogger 運作的原理」所提,出現標籤點擊前、點擊後的異狀,才需要進行以下動作。

一樣到 Blogger 後台打開範本文件 → 編輯 HTML → 搜尋 <div expr:class='"widget-content " + data:display + "-label-widget-content"'> 找到標籤小工具的區塊(如果不只一個標籤小工具,請自行判斷一下要改的是哪一個)。

往下會找到一段 <b:loop ... 一直到 </b:loop> 的程式碼,大概像下面這樣

<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>

把以上所有程式碼置換為以下程式碼──

<b:loop values='data:labels' var='label'>
<b:if cond='data:blog.url == data:label.url'>
<li class='selected'><a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a></li>
<b:else/>
<li><a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a></li>
</b:if>
</b:loop>

其原理就是參照「二、調整導覽列」的程式碼形式,當網址為點擊的標籤頁面時,在該 li 元素裡面加入 class='selected';非點擊的標籤頁面時,li 元素保持原狀,這樣顯示就不會出錯了。

如果前面還沒看過我的分站效果的話,這裡再提供一次「我的分站連結」,可以預視一下以上動作修改後的效果。


四、小結

本篇的實作算是有點客製化,適合想要舒適閱讀版面的部落格,且側邊欄小工具不能太多,剛好在我的分站用得上。說不定看完本篇之後,你也可以想出不錯的版面應用方式。


Blogger 導覽列相關技巧:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP