顯示具有 電腦- Blogger- 工具-導覽列 標籤的文章。 顯示所有文章
顯示具有 電腦- Blogger- 工具-導覽列 標籤的文章。 顯示所有文章

讓 Blogger 導覽列的頁籤連結點擊後變色

讓 Blogger 導覽列的頁籤連結點擊後變色

標題的意思也許不太容易能理解，不過搭配圖片就比較清楚了。可參考上方示意圖，出自「 WFU 應用精選 」，點擊導覽列上的「精選作品」進入該頁面後，這個頁籤的顏色會與其他頁籤不同，能清楚辨識出這個頁面顯示的文章、工具屬於什麼性質。 這功能 Blogger 不必另外寫程式也能做到，...

繼續閱讀全文

解決浮動導覽列遮住錨點位置的問題﹍CSS 技巧

解決浮動導覽列遮住錨點位置的問題﹍CSS 技巧

網站使用「 浮動導覽列 」可提供友善的閱讀體驗，讓導覽列隨時保持在網頁最上方，訪客失焦時能重新找到方向。 不過這個設計後來發現有個隱藏的缺點，當網站使用了錨點後，訪客點擊錨點時，螢幕捲到的位置看起來怪怪的。 本站為了解決此現象，過去曾調高錨點的位置(放置隱藏的錨點)，或是...

繼續閱讀全文

自適應 RWD 多層下拉選單實作﹍Bootstrap 外掛 SmartMenus

自適應 RWD 多層下拉選單實作﹍Bootstrap 外掛 SmartMenus

所有網站架設要處理的區塊中，導覽列的下拉選單是最麻煩的一部份，如果需要「多層下拉選單」的話，難度就比較高，可參考「 Blogger 多層下拉選單實作 」。 而行動裝置使用率大幅攀升後，導覽列非常需要有自適應 RWD 效果，手機上才能同步呈現下拉選單這麼複雜的功能。因此製作 R...

繼續閱讀全文

Blogger 多層下拉選單實作

Blogger 多層下拉選單實作

前陣子處理一個案子，需要在 Blogger 安裝多層下拉選單，說真的這不是一個輕鬆的任務，因此值得記錄一下過程，減少日後重新摸索的時間。 一般而言，如果像本站屬於主題集中、文章數幾百篇的規模，應該使用單層的下拉選單就足夠，太多層的下拉選單對於讀者而言，其實在尋找資訊時不是那麼...

繼續閱讀全文

[小工具]回到頂端(Go Top)按鈕放在浮動導覽列實作

[小工具]回到頂端(Go Top)按鈕放在浮動導覽列實作

上一篇「 快速回到頂端(Go Top)按鈕__符合使用者體驗的友善設計 」留言 #18 Jean Hsiung 詢問：「我對您的"↑TOP"鈕比較有興趣，這個有沒有教學?」。 為何 WFU 要將 "回到網頁上方" 的這顆 Go Top ...

繼續閱讀全文

修正導覽列下拉選單的矛盾__在Blogger網頁版及行動版正常運作的訣竅

修正導覽列下拉選單的矛盾__在Blogger網頁版及行動版正常運作的訣竅

發佈「 下拉選單安裝懶人包 」一陣子後，發現會造成兩個小缺陷： 1. 行動版的網頁小工具失去作用 2. 對網頁版 SEO 稍微有點影響 因為 WFU BLOG 的行動版讀者不多，因此一直未針對這件事進行調校。直到最近換了新網址後，需要重新做 SEO，所以剛好來一次解決這...

繼續閱讀全文

在Blogger導覽列安裝搜尋框__Google自訂搜尋＋語音功能

在Blogger導覽列安裝搜尋框__Google自訂搜尋＋語音功能

(Pic from: design.oneter.com ) 在這篇「 Blogger 如何安裝兩個導覽列？ 」留言 #7 詢問「 有沒有辦法將google的搜尋框直接放到浮動的導覽列上? 」。當時我回答「 按照 " 密技！在 Blogger 水平功能選單使用語法產生...

繼續閱讀全文

[教學]Blogger導覽列下拉選單﹍安裝懶人包

[教學]Blogger導覽列下拉選單﹍安裝懶人包

「下拉選單」是個從部落格建立以來便很想要的功能，不過大部分下拉選單除了安裝方式不容易，通常需要有 HTML 基礎才比較能成功；且另外比較麻煩的是，下拉選單很難具備管理性，也就是日後想調整選單內容、順序時，是個不太輕鬆的工程。 以上便是這篇安裝懶人包的源由，使用這個工具沒有語法...

繼續閱讀全文

[教學]讓部落格導覽列選單能浮動置頂__更新版

[教學]讓部落格導覽列選單能浮動置頂__更新版

關於浮動導覽列的優點，為了節省篇幅請直接參考「 舊版 」→「一、導覽列置頂的優點」。不過舊版有以下的狀況未解決： 1. 底色透明的異常狀況 2. 留言 #9 +Ken Lo  表示「搜尋框會左右移動」 3. 當螢幕解析度不同時，導覽列的寬度會異常 因此本文的更新版，用...

繼續閱讀全文

[教學]Blogger 如何安裝兩個導覽列？

[教學]Blogger 如何安裝兩個導覽列？

常可在一些知名的網站看到，在網站名稱(標頭)的上方放置了一排導覽列，在網站名稱的下方也有另一排導覽列。一方面可能是網站的主題很多，一方面也可將主要與次要的導覽項目區隔開來。 不過 Blogger 預設只能安裝一個導覽列，如果想要在部落格顯示兩個導覽列的效果，請參考本文以下的說...

繼續閱讀全文

[教學]讓部落格導覽列選單能浮動置頂

[教學]讓部落格導覽列選單能浮動置頂

寫完「 部落格浮動側邊欄 」之後，對於這樣的功能還可以有什麼樣的應用，直覺想到的是水平導覽列選單(也就是 Blogger 的 "網頁" 小工具)，認為直接把程式碼拿來套一下應該就能浮動置頂、凍結在網頁的最上方。 2013.12.20 公告： 由於本篇程式碼...

繼續閱讀全文

[教學]Blogger 範本﹍(2) 標頭、導覽列、側邊欄、頁尾區塊的程式碼

[教學]Blogger 範本﹍(2) 標頭、導覽列、側邊欄、頁尾區塊的程式碼

本篇的內容為 Blogger 範本各個區塊的程式碼整理，包含除了文章區塊外的所有區塊(標頭、導覽列、側邊欄、頁尾區塊)，並附帶簡單說明。建議參考系列文「 第一篇 」，在範本中加上註解，如此日後搜尋、修改都很方便。 以下大標題依照範本中出現的順序排列──

繼續閱讀全文

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

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

(Pic from: Office Worker ) 之前在「 +Shu-Yuan Tien  ──  Office Worker 」看到標籤出現在導覽列覺得挺神奇的，研究了一陣後發現可以在後台先把導覽列用滑鼠拖曳到網頁最上方，接著再把「標籤」小工具拖曳到導覽列，那麼網站所有的...

繼續閱讀全文
TOP