讓網頁表格能自動排序﹍TableSorter 安裝懶人包 (CDN)
![讓網頁表格能自動排序﹍TableSorter 安裝懶人包 (CDN)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxsiYj_o-nyaYVYhM74o177fUnHVu0XbB5qjmtiiM8EAHazVAQK8qV6a5k5qxOYTOX4f025tOOaWgg2WBJxjiARFkFr7gx0aIefXPa9t_8vHBVWU65HBUyC-JkDXzjdQ3-1mrgqYsgz89g/s1600/web-table-sort-jquery-plugin.jpg)
前陣子製作「 CSS 色碼英文名稱對照表一覽 」時,需要一個 "讓表格能排序" 的功能,這樣讀者就能依照自己需求,針對不同欄位進行排序,如此查找資料非常方便,算是一個「友善的使用者體驗」。 因此研究了一下網頁表格排序的功能,本篇記錄一下處理的心得,並將安裝...
繼續閱讀全文[教學] 快速回到網頁上方 Go Top 按鈕 + 各種動畫效果(CSS / jQuery)
![[教學] 快速回到網頁上方 Go Top 按鈕 + 各種動畫效果(CSS / jQuery)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP61JneX54-Gh_wqY6PI5iiJK7dNDVtUBFDBOS3Ix6jIwqy1yA9HK_CrM_Bw9dCvO4KAKtFgL_WZtgAXSCeZbCJBXFtCxcesQKP0MDqfAOY_fYRwm2-3IuysGYusKiPEiJFRT0R7HixEPZ/s1600/go-top-button-animation.jpg)
(Pic from: keytothecity.co.uk ) 之前做過兩個「回到頂端」按鈕的版本,分別是「 Go Top 按鈕符合使用者體驗的友善設計 」、「 Go Top 按鈕放在浮動導覽列 」。最近處理的 case 需要炫一點的特效,因此將之前的版本增加一些動畫效果。 ...
繼續閱讀全文CSS tooltip 進階探討﹍(3) 讓提示框顯示圖片及應用方式
![CSS tooltip 進階探討﹍(3) 讓提示框顯示圖片及應用方式](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGvSiTubQyrQ0J_LX8qNuPO5cfgVumBswYZ5HI0fKFB0uz8zorsJYVCOfaS3X5WsCL_HxG4alls2WSLtl3VD8Hm8Br8Otkp_IaOeoy34ajFFzLc9XjZjYJBPTVZ8Ga2tp0MeVDved9_lbr/s1600/css-tooltip-macaron-3.jpg)
CSS tooltip 系列文前兩篇「 安裝懶人包 」及「 疑難雜症排除 」詳細說明了安裝及解決所有問題的方式。而 +Ken CHEN 提出了「 CSS tooltip 能否顯示圖片 」的問題,答案雖然是可以,但很麻煩,且需要考量的因素不少。 +Mark X 在前一篇留言...
繼續閱讀全文[外掛] jQuery 圖片延遲載入﹍Lazy Load 安裝懶人包 (徹底解決圖片 reflow 現象)
![[外掛] jQuery 圖片延遲載入﹍Lazy Load 安裝懶人包 (徹底解決圖片 reflow 現象)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQeWN_hHMjL1Xv9OTKDnk1GPwTyYhPH0EUUXsRTtzFSPVHgMQeJSPsmlVb4SCXHTS72dIcdnt4WgYCl8CT56o9t8P2ZtetrOrGpKpgYGaQNUI8MBaZJg_HPpmehmvxBh0HkSmhK8IATlHu/s1600/lazyload.jpg)
當網頁圖片多的時候,「 影響效能的最大因素就是圖片載入 」。除了縮減圖片尺寸、壓縮檔案來縮短傳輸時間之外,更好的改善方法是讓圖片能延遲載入,先讓頁面把主要文字內容優先顯示出來──這正是 jQuery 圖片延遲載入外掛「 Lazy Load 」的作用。 好的,本篇的程式正是為了...
繼續閱讀全文[小工具]回到頂端(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 ...
繼續閱讀全文[小工具] jQuery 展開收合效果安裝懶人包
![[小工具] jQuery 展開收合效果安裝懶人包](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2ZhrLqRakd4Oc2_PcKqtec7vqhpTHpcYRgQjMc_LWAN1_WDMCCXWpeo4sYyyDq8VcXUEgntnbMoKeFH5Utyso3dVcAbQneARyPhAjTd_vTdi4m8DngeqX97SsxdkSQlU0HFiQk2XAsewu/s1600/jquery-slideToggle.jpg)
「展開收合效果」是常見的網頁技巧,最早是在 +Mark X 的「 留言版提示 - jQuery 展開收合效果 」看到這個效果。 如果一個頁面只有一處需要用這個效果,那麼請直接參考 mark 這篇文章即可;如果同一網頁有多處需要展開收合時,這個功能在使用上會稍微麻煩一些,需要...
繼續閱讀全文[教學]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. 當螢幕解析度不同時,導覽列的寬度會異常 因此本文的更新版,用...
繼續閱讀全文[教學]快速回到頂端(Go Top)按鈕__符合使用者體驗的友善設計
![[教學]快速回到頂端(Go Top)按鈕__符合使用者體驗的友善設計](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBF67u2YIgr8WwrXuZ7XsIWyGLuWznax0ANcwWI_Sf4p6bkM1egcAnAdkenss9SBqz3jKRxLHLu6_ViE7NfaZr8GPqY442WiDsX1TjZ43BBrnDeqD6rNicE0lE3FMPGnkQm_2zBK8PT50Z/s1600/go-top-button.jpg)
(Pic from: shimivn.blogspot.com ) 「回到上方」的按鈕是很常見的網頁設計,且 code 不難寫。那麼特地撰寫本文的目的為何呢?其實主要是拜讀了 Bin Ye 的「改善 Google Blogger 返回頂部按鈕的使用體驗」(連結已失效)覺得很有道...
繼續閱讀全文[教學]讓部落格導覽列選單能浮動置頂
![[教學]讓部落格導覽列選單能浮動置頂](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRka1oiFFEF4hf5VK2tlkbmycuqVZop_QhpV6I1RHQV8qHl55ChMzUVYFCR89GGn75kSpszT6swWd1b3ODJjUmUWvB_IyEZqnelU2FeAIf21XMAzvPz3T1dE-yUwFwllwAfsEK5isgX3zL/s1600/float-nav-bar.png)
寫完「 部落格浮動側邊欄 」之後,對於這樣的功能還可以有什麼樣的應用,直覺想到的是水平導覽列選單(也就是 Blogger 的 "網頁" 小工具),認為直接把程式碼拿來套一下應該就能浮動置頂、凍結在網頁的最上方。 2013.12.20 公告: 由於本篇程式碼...
繼續閱讀全文讓側邊欄 Adsense 廣告出現在吸引目光的位置 [加值文章]
![讓側邊欄 Adsense 廣告出現在吸引目光的位置 [加值文章]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF5LvIvfMHB8yun7ZSN8Yfh5v2sX7yB0nYiy7q3KonTcSH-zDdA2FiDlX94F5RZYgLh6XuJ-h_22daf43CEC_zZcsOKl3WfhTskSIEjPNz_QLsO8FaL53Hhb9MMTFdfP4lDo_I2Et-kiKJ/s1600/post-end-adsense.jpg)
上一篇寫了「 部落格浮動側邊欄 」後,原本的應用是要讓 Google Adsense 廣告能夠在側邊欄浮動、增加讀者的注意力。還好沒釀成大錯,即時發現「 Adsense 的官方規定 」是不允許這樣做的。 根據閱覽經驗,當讀者觀看部落格的文章時,目光焦點大多集中在本文區塊,這也...
繼續閱讀全文[教學]部落格浮動側邊欄(浮動廣告)__改良精簡版
![[教學]部落格浮動側邊欄(浮動廣告)__改良精簡版](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidUr81YJCgFsoqqiVHbEQv77nYgykf2-SlAH-pM5pxeJTLWly6ArIvSDCZcaA2Ja0V3RqhvCvfLoAo27FP8KRb5DBoxipfQTBu-Mm9WBr1iBT8AQs4GQjETh5Gb2zEb9iAdmEKaBm2Z93x/s1600/floating-side-column.jpg)
浮動側邊欄是效果很不錯的一個網頁設計,這個浮動區塊不會隨著畫面捲動而消失。站長可將想特別強調的內容、傳達的訊息、甚至是廣告內容放入這個區塊,而達到強力曝光的效果。 一開始敘述的是原理及過程,想直接安裝程式碼請跳「二、準備動作」。 P.S. 為了避免誤會,右邊的浮動廣告圖案...
繼續閱讀全文Blogger 文章置頂+首頁公佈欄實作技巧
![Blogger 文章置頂+首頁公佈欄實作技巧](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidh_kuaVPp6OfDkxmQFyN95DIHhUGGhOp70kheQR3DZOkLpfJnQVHkyF4Weshbw3l3rqkOHepTJFVBEEOC9FCBr4a_mmuR98bSVsvDdxkrSzpdnweWxXbmbXLl7wTX7Vhb0UknxpGrMJXL/s1600/bulletin-board.jpg)
(Pic from: psdgraphics.com ) 過去在「 Blogger 小技巧 」曾整理了一些公佈欄的筆記,以備實作時參考之用。一般而言,在 Blogger 要找到一個區塊能長期置頂實現公告的功效,大致有以下這幾個作法: A. 放在導覽列上方 B. 放在文...
繼續閱讀全文圖片延遲載入外掛 Lazy Load__Blogger 最佳安裝方式
![圖片延遲載入外掛 Lazy Load__Blogger 最佳安裝方式](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiitMzWPZC8S-VOsioJ8T3oMoa96ebxAVW8PV5XEiu7tiPUVX-7eem7MA94n7GrlOBFnShxved0UpX663sRKofZsKCKqBW2WHfMWv5Q_vb5uVejUuivoM31Og9BJf5ljKHBPLY4O5MiLl3F/s1600/lazyload.jpg)
2014.12.17 公告: 本文已有更新版,請前往「 jQuery 圖片延遲載入﹍Lazy Load 安裝懶人包 」 若是圖片很多的部落格,非常有必要安裝 Lazy Load 這個圖片延遲載入的外掛,以改善網頁讀取的效能。不過為了這個功能在網路上奮戰了好久,一直沒有成功,也...
繼續閱讀全文