讓 Blogger 導覽列的頁籤連結點擊後變色
標題的意思也許不太容易能理解，不過搭配圖片就比較清楚了。可參考上方示意圖，出自「 WFU 應用精選 」，點擊導覽列上的「精選作品」進入該頁面後，這個頁籤的顏色會與其他頁籤不同，能清楚辨識出這個頁面顯示的文章、工具屬於什麼性質。 這功能 Blogger 不必另外寫程式也能做到，...
繼續閱讀全文解決浮動導覽列遮住錨點位置的問題﹍CSS 技巧
網站使用「 浮動導覽列 」可提供友善的閱讀體驗，讓導覽列隨時保持在網頁最上方，訪客失焦時能重新找到方向。 不過這個設計後來發現有個隱藏的缺點，當網站使用了錨點後，訪客點擊錨點時，螢幕捲到的位置看起來怪怪的。 本站為了解決此現象，過去曾調高錨點的位置(放置隱藏的錨點)，或是...
繼續閱讀全文自適應 RWD 多層下拉選單實作﹍Bootstrap 外掛 SmartMenus
所有網站架設要處理的區塊中，導覽列的下拉選單是最麻煩的一部份，如果需要「多層下拉選單」的話，難度就比較高，可參考「 Blogger 多層下拉選單實作 」。 而行動裝置使用率大幅攀升後，導覽列非常需要有自適應 RWD 效果，手機上才能同步呈現下拉選單這麼複雜的功能。因此製作 R...
繼續閱讀全文Blogger 多層下拉選單實作
前陣子處理一個案子，需要在 Blogger 安裝多層下拉選單，說真的這不是一個輕鬆的任務，因此值得記錄一下過程，減少日後重新摸索的時間。 一般而言，如果像本站屬於主題集中、文章數幾百篇的規模，應該使用單層的下拉選單就足夠，太多層的下拉選單對於讀者而言，其實在尋找資訊時不是那麼...
繼續閱讀全文[小工具]回到頂端(Go Top)按鈕放在浮動導覽列實作
![[小工具]回到頂端(Go Top)按鈕放在浮動導覽列實作](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz7aQbHYgX9xEYlS3qL34N7c_1rCHDAwkwUcceZsJhtz6ZFHFUQ1vWMEUIwIiHRjj7VNQOq0eTMV9o-UQ7xW9_3RLqbZ0WGW8dD9oQ8YF5y1HuUv0Fc_hppPygKzNA9ZYoN5zWrXXABXRJ/s1600/go-top-on-floating-nav-bar.jpg)
上一篇「 快速回到頂端(Go Top)按鈕__符合使用者體驗的友善設計 」留言 #18 Jean Hsiung 詢問：「我對您的"↑TOP"鈕比較有興趣，這個有沒有教學?」。 為何 WFU 要將 "回到網頁上方" 的這顆 Go Top ...
繼續閱讀全文修正導覽列下拉選單的矛盾__在Blogger網頁版及行動版正常運作的訣竅
發佈「 下拉選單安裝懶人包 」一陣子後，發現會造成兩個小缺陷： 1. 行動版的網頁小工具失去作用 2. 對網頁版 SEO 稍微有點影響 因為 WFU BLOG 的行動版讀者不多，因此一直未針對這件事進行調校。直到最近換了新網址後，需要重新做 SEO，所以剛好來一次解決這...
繼續閱讀全文在Blogger導覽列安裝搜尋框__Google自訂搜尋＋語音功能
(Pic from: design.oneter.com ) 在這篇「 Blogger 如何安裝兩個導覽列？ 」留言 #7 詢問「 有沒有辦法將google的搜尋框直接放到浮動的導覽列上? 」。當時我回答「 按照 " 密技！在 Blogger 水平功能選單使用語法產生...
繼續閱讀全文[教學]Blogger導覽列下拉選單﹍安裝懶人包
![[教學]Blogger導覽列下拉選單﹍安裝懶人包](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZnZTybM-p7kNN0kwqq0i9ihwYlMmUfzSv7EOv3r1VWsqxnbKz59LZ7JXbQgvUdQjrOPI2twEBxlrMEZz5Qplt-v2CtAP6OPKeuivQwlfia6Dmcpwc6ojQQG0GirR-wzAyuW0x-LCUce2i/s1600/drop-down-menu.jpg)
「下拉選單」是個從部落格建立以來便很想要的功能，不過大部分下拉選單除了安裝方式不容易，通常需要有 HTML 基礎才比較能成功；且另外比較麻煩的是，下拉選單很難具備管理性，也就是日後想調整選單內容、順序時，是個不太輕鬆的工程。 以上便是這篇安裝懶人包的源由，使用這個工具沒有語法...
繼續閱讀全文[教學]讓部落格導覽列選單能浮動置頂__更新版
![[教學]讓部落格導覽列選單能浮動置頂__更新版](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXJrdByej-wzpP_Im-MibYSoZOtB7ku1f7waKS_ItHKXlqV7vA9XYbiVUpd4nxfiJcJHzs05sh2w8QN8Bnu967WehB651EcIYXiGVTKcIEEJw4Z-kbjv_P5oBKYjkXXE-0bmjWH0qGdifu/s1600/float-nav-bar-update.jpg)
關於浮動導覽列的優點，為了節省篇幅請直接參考「 舊版 」→「一、導覽列置頂的優點」。不過舊版有以下的狀況未解決： 1. 底色透明的異常狀況 2. 留言 #9 +Ken Lo 表示「搜尋框會左右移動」 3. 當螢幕解析度不同時，導覽列的寬度會異常 因此本文的更新版，用...
繼續閱讀全文[教學]Blogger 如何安裝兩個導覽列？
![[教學]Blogger 如何安裝兩個導覽列？](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguEwpq5STIiYpdSMRYlZ8Qb4nNBhdOsLz_2wyquHtQhtKBG-hZ_9sgiE3MN9Xki1BmTVuQaMJQAGH4Sj-JqtWCvqoQ3Vd_C6jsdId-8QWDVZXORaqnvOevHPaQvh7R-8PqUQziAipLZYvw/s1600/blogger-two-navigation-bar.jpg)
常可在一些知名的網站看到，在網站名稱(標頭)的上方放置了一排導覽列，在網站名稱的下方也有另一排導覽列。一方面可能是網站的主題很多，一方面也可將主要與次要的導覽項目區隔開來。 不過 Blogger 預設只能安裝一個導覽列，如果想要在部落格顯示兩個導覽列的效果，請參考本文以下的說...
繼續閱讀全文[教學]讓部落格導覽列選單能浮動置頂
![[教學]讓部落格導覽列選單能浮動置頂](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRka1oiFFEF4hf5VK2tlkbmycuqVZop_QhpV6I1RHQV8qHl55ChMzUVYFCR89GGn75kSpszT6swWd1b3ODJjUmUWvB_IyEZqnelU2FeAIf21XMAzvPz3T1dE-yUwFwllwAfsEK5isgX3zL/s1600/float-nav-bar.png)
寫完「 部落格浮動側邊欄 」之後，對於這樣的功能還可以有什麼樣的應用，直覺想到的是水平導覽列選單(也就是 Blogger 的 "網頁" 小工具)，認為直接把程式碼拿來套一下應該就能浮動置頂、凍結在網頁的最上方。 2013.12.20 公告： 由於本篇程式碼...
繼續閱讀全文[教學]Blogger 範本﹍(2) 標頭、導覽列、側邊欄、頁尾區塊的程式碼
![[教學]Blogger 範本﹍(2) 標頭、導覽列、側邊欄、頁尾區塊的程式碼](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSAyU1QimCv7MBm3jg3Mk26kBL7iXTrr_IaCjg151HQcw4APzAKRAr4eEFhLX40zbb09kgjvpQ0PEnh3Cb-YbMz4X_HcJwSlsJ7EHtrCugMdZOHF80qlIWKil40PplTNYLUFjdHl3Fs0mR/s1600/blogger-layout-program-1.jpg)
本篇的內容為 Blogger 範本各個區塊的程式碼整理，包含除了文章區塊外的所有區塊(標頭、導覽列、側邊欄、頁尾區塊)，並附帶簡單說明。建議參考系列文「 第一篇 」，在範本中加上註解，如此日後搜尋、修改都很方便。 以下大標題依照範本中出現的順序排列──
繼續閱讀全文[教學]將 Blogger「標籤」小工具放在導覽列實作
![[教學]將 Blogger「標籤」小工具放在導覽列實作](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTIbCUw80NLOawW5RK3j9sPp7JlGnMDpAS-rqG5HWrrbq-mLcJ6AGW7emFv2WTPUIrqT4qfbjTPHvJFlPojWQL_LOZXbWiG3MucUP2vjvYx7A0VE0H7mU_cwUDc83tv8rJEj-Vnrw2ga-G/s1600/label-pagelist.jpg)
(Pic from: Office Worker ) 之前在「 +Shu-Yuan Tien ── Office Worker 」看到標籤出現在導覽列覺得挺神奇的，研究了一陣後發現可以在後台先把導覽列用滑鼠拖曳到網頁最上方，接著再把「標籤」小工具拖曳到導覽列，那麼網站所有的...
繼續閱讀全文