簡單漂亮的 CSS tooltip 提示框﹍(2) data-title 設定 + 疑難雜症排除

上一篇「 CSS 提示框懶人包實作 」說明了 CSS tooltip 原理,不過懶人包畢竟無法處理各種變數,留言提出了各種異常狀況,因此本篇仔細說明不同狀態下的解決方式。 << 請注意!本篇文章含會員限定內容 >>

繼續閱讀全文

簡單漂亮的 CSS 提示框(tooltip)懶人包實作﹍(1) 動畫效果 + 置中演算法

HTML 標籤屬性 title 裡的提示訊息,在瀏覽器差不多延遲一秒才會出現。在資訊爆炸的時代, 訪客閱覽文章多半施展 "超速讀",相信更不會有耐心去臆測某個地方是否藏著 title 屬性、或等待一秒後的訊息浮現 。使用 javascript(簡稱 js) ...

繼續閱讀全文

聖誕音樂點唱機﹍部落格應景外掛

首先感謝 +Mark X  製作的「 聖誕節佈置懶人包 」,每年節慶期間都可從倉庫中取出,重新在網站上裝飾一番。這組套件包含了網頁背景、雪花效果、滑鼠游標、以及最重要的主體──音樂點唱盒。 原版本包含了貓咪、小朋友、及水晶聖誕音樂,由於今年想要變換一下音樂,於是徵求了 Mar...

繼續閱讀全文

CSS3 漸層語法產生器﹍計數器背景實作(1)

使用 CSS 產生的漸層效果很棒,不過這些複雜的語法參數對一般使用者而言,跟看到天書是差不多的。在這個「 Blogger 中文社群討論串 」 +綜合口味  推薦了這個線上 CSS 漸層語法產生器「 Ultimate CSS Gradient Generator 」,且 +Mark...

繼續閱讀全文

[外掛] jQuery 圖片延遲載入﹍Lazy Load 安裝懶人包 (徹底解決圖片 reflow 現象)

當網頁圖片多的時候,「 影響效能的最大因素就是圖片載入 」。除了縮減圖片尺寸、壓縮檔案來縮短傳輸時間之外,更好的改善方法是讓圖片能延遲載入,先讓頁面把主要文字內容優先顯示出來──這正是 jQuery 圖片延遲載入外掛「 Lazy Load 」的作用。 好的,本篇的程式正是為了...

繼續閱讀全文

[教學]Facebook 讚按鈕﹍四種安裝方式深入剖析

Facebook 與 Google 這樣的網路龍頭有著共同特色,不斷嘗試、修正錯誤,功能持續更新,因此產品的說明文件很難多年保持不變。讚按鈕(like button)經過多年的演化,已經跟當初不太一樣。雖只是約 38x20 像素的區塊,他的安裝方式、設定選項與應用方式,其實多得超...

繼續閱讀全文

讓網頁根據訪客語言設定, 自動轉換簡繁文字 (切換按鈕升級版)

上一個版本「 相容各大瀏覽器的全網頁簡繁快速轉換語法__更新版 」FB 留言 Herman Tsao 詢問「 能做成依瀏覽器語言做自動轉換嗎? 」,其實偵測訪客的瀏覽器語言設定是做得到的,我們應該有這樣的經驗,某些安裝 Google 翻譯的網站,能得知我們的預設語言,在畫面上自動...

繼續閱讀全文

[教學]減少網頁 reflow(回流) 的 CSS 實作技巧﹍優化網站效能(3)

在增進網頁效能的執行事項之中,減少瀏覽器回流(reflow)是重要的一環。然而 reflow 這個名詞不常見、且翻譯也不易理解,不如稱之為「瀏覽器重新佈局」、或「網頁區塊重新安排」會來得白話一些。而為何要減少 reflow?因為它會 造成 CPU 無謂的重複運算,消耗瀏覽器效能及...

繼續閱讀全文

讓 Blogger 過長的文章自動產生數字分頁﹍系列文加強版

上一個版本「 讓 Blogger 自動顯示系列文章 」留言 #5 WHY 詢問「有時文章過長,想幫文章變更為好幾頁 ( 寫好幾篇 ),能否讓【 自動顯示系列文章 】的顯示結果不出現標題,而出現數字」。基本上「文章分頁」算是常見的功能,當文章內容較長,分頁功能可以讓讀者稍微喘口氣。...

繼續閱讀全文

[教學]將範本中的 HTML/Javascript/CSS 最佳化處理﹍優化網站效能(2)

過去寫了不少篇屬於優化網站效能的基礎知識,如果都曾讀過、打好基礎後,那麼現在可以開始挑戰實作演練了。本篇以 Blogger 範本為例,說明如何整理程式碼、讓範本最佳化,也就是能夠減少體積、執行有效率,同時又易於維護。 不過動手之前,最好先確認對 html/js/css 有基本...

繼續閱讀全文

雖然 PageRank 停止更新,沒關係還有 MozRank

這個「 Blogger 中文社群討論串 」提到了 Google 不再更新 PageRank 的消息,而這件事 Google 很久以前便開始預告,PageRank 的數字也有很長的一段時間沒有變動,越來越少看到網站掛上 PageRank 貼紙。 為何 Google 這麼做,想瞭...

繼續閱讀全文

活用 HTML/Javascript/CSS 格式化及壓縮工具﹍修改 Blogger 範本的觀念 (3)

隨著範本修改次數增加、範本檔越來越肥大,從最乾淨的狀態不到 100k 直到 2、300k 的情況都在所多有(如果備份時有注意檔案容量的話),是不是會覺得開啟範本的等待時間越來越久?也難怪網頁開啟時間越來越慢。 進入主題前先回顧一下系列文前兩篇,站長要如何不盲目地修改範本、脫離...

繼續閱讀全文

[Google Drive 外連產生器] 一秒鐘輕鬆複製連結, 圖片適用, 支援新舊版雲端硬碟

2015.5.8 公告:目前已經有更新版,請前往「 Google Drive 外連產生器 V2 」頁面。 取得 Google Drive 外連路徑不是輕鬆的事,對於使用免費網路空間的站長,這些外連檔案 html / js / css / jpg / png 等等包括圖檔,如果...

繼續閱讀全文

優化網站效能該注意哪些事? (1)最關鍵的考量因素

(Pic from: seocorporation.net ) 經營部落格一段時間後,站長可能會將注意力從文章內容的產出、版面的裝潢、外掛小工具等等,轉移到更深的層面,例如網頁載入的速度、手機版的效能、範本程式碼優化等等。 會開始關注這些考量點,代表除了內容以外,也會站在讀...

繼續閱讀全文

專業的「網站維修中」及倒數計時功能, 不用擔心訪客看到異常頁面

喜歡裝潢門面的站長可能三不五時會有一點小困擾,在站內維護的期間,例如調整版面 CSS 配置、測試安裝某些外掛時,網站不可避免地會讓訪客經歷版面異常、或局部功能失效的狀況。而這還算小問題,因為多半只影響不到一天的時間。 如果是網站大改版、或是更換新範本(模版)等,那問題可就大了...

繼續閱讀全文

[小工具]Blogger 數字分頁導覽 + Ajax 動態頁面載入效果

網站使用數字分頁功能,來方便訪客跳頁尋找、閱讀文章,這是各大網站很常見的設計。但 WFU BLOG 一直以來未採用,原因有二: 1. 如果不瞭解 Blogger 的機制,裝了這樣的外掛一定抱怨連連,請參考「 Blogger官方自動分頁機制 」,分頁的狀況常常會不如預期。 ...

繼續閱讀全文

jQuery 圖片輪播外掛﹍camera 安裝及使用詳解

許多非官方的 Blogger 範本,都會內建圖片輪播效果,可在部落格首頁展示站長的精選或隨機文章。不過也並非得用這些範本,才能擁有 slideshow 功能,已經有數量龐大、可免費使用的現成 jQuery 函式庫,例如這個網頁「 20 個免費好用的響應式 jQuery 輪播幻燈片...

繼續閱讀全文

[教學]在 Google Drive 建立 HTML 網頁, 需要注意這三件事

2016.4.13 公告: 由於「 Google Drive 將於 2016 年 8 月關閉外連 」功能,建議參考「 徹底解決網站外連空間問題 」→「支援目錄路徑的雲端空間」,將檔案放在支援 "目錄路徑" 的網路空間,才能成功建立網頁。 使用 Googl...

繼續閱讀全文

訂閱 Facebook 社團貼文心得__IFTTT 應用

訂閱 RSS 是獲得資訊的重要來源,尤其部落格站長更是需要。而如何收集各種國內外資訊來源,除了需要敏銳度,也得配合各種不同工具、或網路服務的應用能力。如果能擁有越多的資訊素材,除了寫文章不怕沒題材寫,也能增加內容的深度與廣度。 過去曾介紹過「 如何取得 mobile01、PT...

繼續閱讀全文

會員中心新增「小遊戲區」

(Pic from: wallpaperstock.net ) 2016.4.9 公告: 因 Google Drive 外連失效,停止「小遊戲區」的功能。 首先,會員中心公開試營運三個禮拜以來,雖然曾遇上 Google Drive 升級的意外,使得有段期間新會員無法註冊加...

繼續閱讀全文

如何讓 Javascript/CSS 執行有效率﹍修改 Blogger 範本的觀念 (2)

(Pic from: css-javascript-toolbox.com ) 網頁載入速度是影響訪客對網站印象的重要一環,而 Javascript(以下簡稱 js) 與 CSS 在範本中如何配置,關係著網頁執行的效率。不過對於初心者而言,這些知識未免太過複雜,為了讓不懂語法的...

繼續閱讀全文

想知道自己網站的台灣或全球排名嗎?安裝 Alexa 貼紙秀給訪客看

(Pic from: seomastering.com ) 經營部落格一段時間後,如果小有人氣的話,站長們可能都會好奇,自己的網站在台灣能排上第幾名呢?其實對於這件事,能提供具有公信力的來源並不多,在亞洲地區可以申請加入「 博勢力 」的部落格排行榜。不過由於分類很多,且參加排行...

繼續閱讀全文

利用 Google 試算表當小型資料庫 (3)簡易查詢與排序 (及新版試算表讀取流程)

(Pic from: veryicon.com ) 免費的部落格平台,結合 Google 試算表後,使用簡單的 javascript 操作,就可對試算表資料庫進行存取,在網站上實現各種應用,例如初期發表的「 部落格即時留言板 」,一直到近期的「 會員系統 」。 不過資料庫若...

繼續閱讀全文

Fancybox, 優雅又八面玲瓏的 jQuery 燈箱外掛 (2)縮圖+滾輪特效安裝懶人包

2016.4.13 公告: 為了避免上傳檔案、尋找免費空間的麻煩,最簡單的安裝方式請直接參考這篇「 Fancybox 燈箱外掛 CDN 安裝懶人包 」。 上一篇的「 fancybox 安裝教學 」說明了如何從官網下載檔案、上傳到自己的空間、最後利用本站提供的簡便前導程式來顯...

繼續閱讀全文

最佳 CSS 3D 按鈕產生器__Button X 操作心得

使用 CSS 語法產生的按鈕,要做的好看不容易;然而圖片式的按鈕雖然畫面呈現較佳,卻需要花費 http 請求時間,也就是會影響網頁載入速度。如果可以的話,使用 CSS 按鈕會是最佳選擇。 網路上有許多線上 CSS 按鈕產生器,可以讓我們輕易取得不少漂亮的按鈕。而本篇要介紹的 ...

繼續閱讀全文

部落格網站「會員系統」試營運

有關注 WFU BLOG 的朋友應該會發現,九月中開始,某些文章出現了「會員限定」的功能,因為 WFU 預先悄悄在部落格網站測試「會員系統」的可行性。 在免費部落格平台、或沒有租用主機的網站實現「會員系統」不是容易的事,需要解決後端資料庫、系統安全、行動版等等諸多問題。一方面...

繼續閱讀全文

Blogger 串聯式留言(threaded comment)__留言編號及自訂版面樣式實作

2017.7.25 公告: 留言編號已有新版處理方式,請參考「 使用 CSS 語法就能讓 Blogger 自動產生留言編號 」。 跟 Blogger 舊範本時代的官方留言系統比起來,新範本的串聯式留言全部由 javascript 產生,讓習慣改 Blogger 範本的使用者難...

繼續閱讀全文

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

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

繼續閱讀全文

[小工具]讓 Blogger 串聯式留言能由新到舊排序

Blogger 留言排序這件事,從使用 Blogger 以來(舊範本時代),一直到現在的串聯式留言(新範本),不斷有使用者提出詢問:「能不能從最新的留言開始顯示」?實際上從 "使用者體驗" 的角度來看,這個要求非常合理,否則 當留言一多時,螢幕都得捲到最底部才...

繼續閱讀全文

超連結 A 標籤及錨點, 你不知道的操作技巧(HTML語法)

(Pic from: elated.com ) 在所有 HTML 標籤之中,相信很多人第一個學會的就是超連結(A 標籤)語法吧!雖然超連結語法很簡單,不過其實也可以很複雜。若能了解 A 標籤的詳細操作方式與原理,可以在 SEO 上加分不少。 如果想更進一步精進網頁技巧,利用...

繼續閱讀全文

[小工具] jQuery 展開收合效果安裝懶人包

「展開收合效果」是常見的網頁技巧,最早是在 +Mark X  的「 留言版提示 - jQuery 展開收合效果 」看到這個效果。 如果一個頁面只有一處需要用這個效果,那麼請直接參考 mark 這篇文章即可;如果同一網頁有多處需要展開收合時,這個功能在使用上會稍微麻煩一些,需要...

繼續閱讀全文

Google Authorship 作者資訊正式失效, 是否需要移除 G+ 作者連結?

(Pic from: standardmarketing.com ) 沒想到距離上次事件「 搜尋結果不再顯示作者頭像!Google 為何要這麼做? 」才兩個月,現在 Google 連作者資訊也一併從搜尋結果取消了;不但如此,官方正式宣佈 Google Authorship 將不...

繼續閱讀全文

備份 Blogger 範本的訣竅﹍修改 Blogger 範本的觀念 (1)

如果是本站的忠實讀者,那麼修改範本可說是稀鬆平常的事。而常常修改 Blogger 範本的話,最重要的一件事,就是能否養成正確的備份範本習慣。 有的讀者可能會好奇,備份範本有什麼了不起,跟 Copy & Paste 一樣稀疏平常,只要知道快速鍵怎麼按就會做這件事了,有需...

繼續閱讀全文

取代Rainlendar管理行事曆的好選擇__Checker Plus for Google Calendar使用心得(Chrome套件)

過去在 Windows 系統非常好用的 Rainlendar,進入行動裝置的雲端時代後有些不敷使用,現在能夠隨時隨地跨平台同步的 Google Calendar 才是王道。 雖然 Rainlendar 也可同步 Google Calendar 的內容,不過免費版的使用有諸多限...

繼續閱讀全文

網頁中文字型除了微軟正黑體, 還有這些好選擇!(windows)

對於網頁能使用的中文字體,我們比較難有自訂的選擇。上一篇「 網頁中英文字型跨平台設定最佳化 」說明了,由於中文字型檔太大,網頁絕對不能引用外部中文字型檔,否則載入速度可以讓訪客好整以暇地泡好一杯咖啡,並跳離該頁面。 前陣子 Google 發布了免費的中文字型「 思源黑體 」,...

繼續閱讀全文

Blogger 文章編輯模式只要切換, 就可能產生異常現象? 教你徹底解決的技巧

長久以來使用 Blogger 文章編輯器,常常在「HTML模式」與「撰寫模式」切換之後,發生許多讓人 OOXX 的狀況,例如版面錯亂、語法失效等等,卻又找不出個根治的方法。 也許大部分使用者很少發生類似以上情境,因為只要專注於寫作,文章內容不去使用額外的 HTML、Javas...

繼續閱讀全文

Evernote 變得遲緩了嗎? 改善速度過程全紀錄(windows)

(Pic from: slashgear.com ) 不知道從何時開始,在 Win8 使用 evernote 開啟記事(notes)時,會停個幾秒鐘才能顯示記事內容。一開始不以為意,不過久了超過忍耐的臨界點後,認為這樣的生產力軟體,反而在降低生產力,需要找個時間徹底解決。 ...

繼續閱讀全文

Blogger 留言超過 200 篇怎麼處理?

這篇的內容可以算是公告,也可以算是心得分享。雖然公告內容比較枯索,然而本篇關於心得的部份,屬於應該了解的知識,因此建議詳讀。 先進行公告,由於本站原本的「 留言板 」網頁,留言數量已經超過兩百篇,會造成以下不便的現象: 因為最新的留言不會出現在第一頁,導致讀者找不到自己的...

繼續閱讀全文

Blogger 是否搬家到 Wordpress 的比較﹍部落格經營觀念釐清

(Pic from: sehabitat.com ) 部落格的成長週期若是大略區分,可看成三個階段: 1. 免費部落格平台: 例如痞客邦 2. BLOGGER 3. 自架站: 例如 Wordpress(簡稱WP)等需要租用主機的平台 這三個階段有何差別,花簡短篇幅來...

繼續閱讀全文

Fancybox, 優雅又八面玲瓏的 jQuery 燈箱外掛 (1)安裝教學

2016.4.13 公告: 為了避免上傳檔案、尋找免費空間的麻煩,最簡單的安裝方式請直接參考這篇「 Fancybox 燈箱外掛 CDN 安裝懶人包 」。 圖片為主的網站若使用燈箱效果,當特效執行時,相信能給予讀者很有質感的加分印象。而這次介紹的 fancybox 燈箱外掛,...

繼續閱讀全文

在 Blogger 標籤動手腳, 擺盜文者一道!

(Pic from: Lois Lin FB ) 前幾天「 蘋果報導 」了一位美少女部落客,在文章安插「台灣是主權獨立的國家」字串,讓盜文者貼到大陸網站而渾然不覺,為何她能成功呢? 因為她把字串埋在標籤,而一般讀者看完本文後,通常不會注意標籤的字串,最後 copy &...

繼續閱讀全文

為何瀏覽數會爆增?揭開 Blogger 快樂流量的真面目

(Pic from: 3dprint.com ) 曾寫過一篇「 Blogger 後台文章瀏覽數與 Google Analytics(簡稱GA) 數據差別很大的原因 」,大致說明 Blogger 與 GA 各自的計數原理。 當然,在正常的使用下,Blogger 官方的統計數字...

繼續閱讀全文

部落格熱門文章排行榜﹍依照「按讚數」,「瀏覽數」,「+1 數」

本篇的熱門文章排行榜工具,需要額外製作後端的試算表資料庫,來儲存所有文章的統計數據,無法只靠前端的程式就能執行,因此屬於需要付費的客製的工具。 製作上讀者需要先提供網站資料、及一個新的 Google 帳號給 WFU,並在後台把我設為管理員,才能進行所有的作業,流程不少,因此不...

繼續閱讀全文

[教學]Google+ 分享文章時,如何讓縮圖以大尺寸呈現?

以前在 G+ 分享文章時,縮圖的尺寸比較小。現在他們了解到,社群行銷大圖才是王道!因此我們漸漸可以發現,目前很多 G+ 貼文的縮圖,都是以 "滿幅" 的大圖呈現,能夠快速吸引讀者的目光。 那麼需要具備哪些要件,才能在分享到 G+ 時,讓縮圖以大尺寸顯示呢?...

繼續閱讀全文

Blogger 各種疑難雜症發問管道, 及提問注意事項

(Pic from: pichost.me ) 相信 Blogger 使用者一定會有許多大大小小的問題、或各種需求,但 Blogger 這個平台跟台灣其他部落格不同,沒有客服人員能解答,只能靠使用者互相幫忙。 這篇文章提供使用者提問的管道,以及說明發問時應了解的技巧,有助於...

繼續閱讀全文

[小工具]幫 Blogger 安裝三種留言分頁 (含 Google+ 及 Facebook 留言板)

2015.9.4 公告: 若因未將 js 檔分流,而導致留言分頁無法顯示,請重新安裝本文程式碼,並自行將 js 檔分流! 部落格常見的留言板外掛有 G+、FB、Disqus 等留言板,如果能同時擺放幾個留言板是有他的好處(後面會分析),但多個留言板並存時,隨之而來的是版面凌亂...

繼續閱讀全文

Blogger 行動版 Adsense 廣告如何追蹤成效?

之前「 在 Blogger 行動版放 Adsense 廣告 」,由於本站讀者特性多為使用網頁版,因此一直未有動力追蹤行動版的成效。 過了幾個月後,現在覺得應該會有數據來分析 Blogger 行動版投放 Adsense 的效用,作為是否該使用自適應版面的評估。結果赫然發現, 在...

繼續閱讀全文

長時間瀏覽網頁眼睛不舒服嗎?快使用高對比模式 (Chrome 套件)

電腦螢幕的製程越來越進步,開發出成本越來越低、更省電、顏色更鮮艷的零組件,從 CRT → LCD → LED,然而對眼睛的傷害卻是越來越大。原本 LCD 的背光已經不適合眼睛長期直視,但更慘的是,目前市面上只能買到光線更強的 LED 背光螢幕(新品)。 要讓眼睛對抗強光、調適...

繼續閱讀全文
TOP