2016年12月31日

如何使用 Google reCAPTCHA 防止網頁被留垃圾廣告訊息

google-recaptcha-如何使用 Google reCAPTCHA 防止網頁被留垃圾廣告訊息前陣子「Blogger 中文論壇」遭到垃圾訊息洗版,被機器人大量貼文,一次發了幾十篇,甚至有一次達到上百篇。雖說也不會造成太大困擾,因為 Blogger 後台一次能勾選 50 篇文章刪除,不用幾秒就全部消滅了,不過能夠事先預防總是比較省事。

於是想到 Google 的這個好工具「reCAPTCHA」,有了它,網頁的表單、留言等工具,就有辦法防堵廣告、垃圾訊息。

只不過,reCAPTCHA 不是設計給前端使用的工具,一般部落格想用的話,需要一點巧思及不錯的 JS 功力,本篇適合前端工程師參考

(圖片出處: googleblog.com)
2016年12月26日

將 Google 行事曆排程顯示在網頁﹍FullCalendar CDN 安裝懶人包

fullcalendar-cdn-installation-將 Google 行事曆排程顯示在網頁﹍FullCalendar CDN 安裝懶人包過去一段時間,網站業務的排程經常處於吃緊的狀態,於是決定好好利用「Google Calendar」,把行事曆的排程顯示在網頁上,業主可查詢案件何時能進入排程、以及案件的時程區間。

基本上,Google 日曆預設就有提供嵌入網頁的語法,如果是功能取向的站長,不一定需要另外瞭解本篇介紹的外掛程式。

如果是形象網站,需要自己設計行事曆的版面、讓效果看起來更專業的話,例如去除 Google 官方 Logo、連結、樣式等等,那麼「FullCalendar」這個強大的外掛,除了最簡單的改版面,還能自己寫程式來設計各種功能。

由於連「Google Drive 都會中止外連功能」,一般的部落格站長,現在要裝各種外掛其實滿困難的,因為很難找到免費又穩定長久的網路空間。還好 FullCalendar 夠熱門,有免費 CDN 提供了各種版本的外連檔案,讓站長們不用擔心這個問題,本篇就來看怎麼進行。


2016年12月21日

使用 Blogger 免費範本(模版),可能需要面對的問題有哪些?

blogger-free-template-problems-使用 Blogger 免費範本(模版),可能需要面對的問題有哪些?使用 Blogger 的優點之一,就是有取之不盡的免費資源,網路上可找到各種美觀、符合自適應(RWD)、且又免費的範本可套用。

免費範本的確很方便,一陣子後覺得不合用、或想改個新鮮的版面,都可再另外找一個,如同免洗筷一般,再換一雙就好。

但在某種程度上,免費範本跟免洗筷還真的有像,因為製作成本低、品質良莠不齊,有的可能會加雙氧水、漂白劑,吃了不小心就中毒。

WFU 經手處理過的 Blogger 各式範本,案件量十分龐大,看過的免費範本非常多。那麼本篇就來整理一下,使用免費範本可能會遇到哪些問題。

(圖片出處: ivythemes.blogspot.com)
2016年12月18日

Blogger 使用圖片的各種技巧:上傳+刪除+管理+取得網址 (Picasa 圖床)

blogger-upload-photo-Blogger 使用圖片的各種技巧:上傳+刪除+管理+取得網址 (Picasa 圖床)協助許多使用者架站時,由於不少都是剛接觸 Blogger,不太熟悉這個部落格平台怎麼處理、操作圖片。他們可能用過台灣其他的免費部落格平台,習慣了有個可以專門上傳、管理圖片的後台介面,但在 Blogger 找不到這樣的東西,因此「Blogger 要如何上傳、管理圖片」,變成了常見的問題。

例如熱門的「圖片輪播」功能,使用者可能會困惑 "圖片要放在哪裡"、"圖片網址如何取得" 等等,對於有後台管理圖片的部落格,這些都是不用另外說明、自然而然就會操作的事情,但 Blogger 偏偏不是如此。

不過 Google 對於處理圖片的概念有自己的想法,跟台灣部落格截然不同,因此有必要先瞭解一下 Google 的設計理念,心理上會比較容易適應,然後再來說明處理圖片各種的操作方法。

2016年12月14日

[網頁設計] 有助於色盲使用者的友善體驗 (2)實作範例

上一篇「有助於色盲使用者的友善體驗 (1)設計構思」,提出本站的設計方針為:

  • 原本文章區塊為黃底黑字,另一套 CSS 將會使用白底黑字,用來增加對比。
  • 原本文章區塊的連結無底線,另一套 CSS 將會使用底線。
  • 本站文章常用紅字標示重點,同時教學程式碼中包含了大量的紅、藍、綠字串,為了幫助辨識,另一套 CSS 會將常用顏色特別標示出來。

本篇會將這樣的概念實作出來。不過,我的設計方法不見得適合套用到每個網站,多少都需要調整,畢竟每個網站的配色、功能都不太一樣。

那麼要拿我的範例來修改的話,建議有足夠的 HTML / CSS / JS 基礎,比較適合閱讀這一篇。



(圖片出處: commons.wikimedia.org)
2016年12月11日

[網頁設計] 有助於色盲使用者的友善體驗 (1)設計構思

color-blink-web-design-1-[網頁設計] 有助於色盲使用者的友善體驗 (1)設計構思前陣子有讀者在「Blogger 文章標題最佳化」留言表示:"建議WFU大,文章的字顏色對比可以強一點,或標個線?這樣對色弱色盲人土比較友善,我完全找不到紅字在哪"。這才發現過去接觸網頁設計的主題時,很少碰到這一塊,因此沒想過要研究這部分的設計。

經查詢資料後,發現色盲、色弱者的比例,比想像中還多不少,站在 "營造友善的使用體驗" 這樣的立場,的確應該改善網頁設計,讓這個族群閱讀文章時沒有障礙。

本篇會大致列出協助色盲使用者的網頁設計要點,同時也提出個人的設計構想。

(圖片出處: commons.wikimedia.org)
2016年12月4日

讓訪客能自行放大網頁文字,提升友善閱讀體驗

閱讀網路文章時,不免會遇到某些網頁的預設文字過小,不但看起來不舒服,也加重了眼睛的負擔。過去曾介紹過 Chrome 的外掛「讓 Chrome 只放大縮小文字(Zoom Text Only 套件)」,可以單獨調整文字的大小,讓我們閱讀文章時更舒服。

但並非每個訪客都會安裝這樣的套件,如果你是站長的話,想要打造友善的閱讀環境,最好能另外提供「放大文字」這樣的按鈕,讓訪客自行調整文字尺寸,就能照顧到銀髮族、視力不佳、或需要維護視力的族群。

本篇會提供一個「調整文字尺寸」的按鈕,以下先說明設計原理,想直接安裝可跳至「二、安裝程式碼」。



(圖片出處: pexels.com)
2016年11月30日

利用 Google 試算表當小型資料庫 (4)使用 SQL 語法讓搜尋功能更強大

「利用 Google 試算表當小型資料庫」系列文已經寫過三篇,條列如下:


上一篇提供了篩選資料的簡易查詢語法,以及對資料排序的方法,相信這對小型的資料庫處理已經足夠。

不過幾年下來,如果你的試算表已經累積了數千筆、甚至更多的資料,或許你需要的會是正規資料庫的 SQL 搜尋語法,才能處理更複雜的需求,甚至是將整理出來的資料以圖表方式呈現,在網頁呈現即時的長條圖、分布圖等等。

這麼多複雜的功能,其實 Google 都已經幫我們把輪子造好了,不必自己研究,就看我們如何取用。那麼本篇就來說明如何呈現 HTML 效果、以及如何用 Javascript 操作。

(圖片出處: pixabay.com)
2016年11月27日

讓 Facebook 留言框與粉絲團的留言能夠即時同步

fb-comment-mirroring-讓 Facebook 留言框與粉絲團的留言能夠即時同步前陣子有案主詢問,「看到有些 FB 粉絲專頁的留言,會自動同步到部落格文章的 FB 留言板,這個可以做嗎?」

如果不瞭解以上描述是什麼狀況的話,用畫面說明比較容易懂,例如下圖是「粉絲團頁面的留言」:

fb-comment-mirroring-1-讓 Facebook 留言框與粉絲團的留言能夠即時同步


下圖是「部落格如何處理結構化資料標記」這篇文章的 FB 留言板留言:

fb-comment-mirroring-2-讓 Facebook 留言框與粉絲團的留言能夠即時同步


看到了嗎?兩邊的留言一模一樣,是互相同步的。這樣的功能有什麼好處呢?

其實優點很明顯,粉絲團跟網站的讀者可能分屬不同族群,一邊是社群粉絲、另一邊的讀者可能主要由搜尋引擎而來;若是兩邊都能看到同樣的留言,就能讓兩處的讀者同時加入討論,參與度、激盪的火花可能更高。如果站長要加入討論的話,也不必兩頭跑,可節省一些管理時間。

以下就來看看這個功能在安裝前,需要先瞭解的注意事項,以及介紹官方提供的安裝流程。


<< 請注意!本篇文章含會員加值文章內容,需點數兌換 >>
2016年11月23日

Line 處理待辦事項的技巧:讓已讀訊息保持未讀狀態

line-message-remain-unread-todo-task-Line 處理待辦事項的技巧:讓已讀訊息保持未讀狀態Line 已經越來越像傳統 Email 扮演的角色,以往收件匣未讀的信件就是我們的待辦事項,但現在越來越多待辦事項,會來自於 Line 的訊息,無論是上司、客戶、家人朋友,或是一大堆的群組。

但很可惜 Line 的訊息系統,無法像郵件軟體 (或 APP) 般好整理,除了不同性質、不同優先度的郵件可以分類或上標籤,已經打開的郵件也能標示回未開啟的狀態,來提醒我們需要如何處理這封郵件。也許即時通的功能或介面,將來會有大革新,用來解決上述需求。

在那之前,Line 有沒有什麼好的待辦事項處理技巧呢?

2016年11月20日

申請 Facebook 應用程式 APP ID 流程

apply-fb-app-id-申請 Facebook 應用程式 APP ID 流程FB 有些網頁 (部落格) 小工具在安裝或使用時,需要申請 APP ID 才能生效,這個流程不但有些麻煩,而且 FB 的網頁介面常常更改,不熟悉電腦操作的使用者可能會感到很頭痛。

有時我需要協助處理 FB 應用程式的相關事務,但會卡在 APP ID 的申請,因為這部分需要使用者自己的 FB 帳號才能跑完流程,不能由他人代勞。

雖然網路的教學很多,不過 FB 改版的頻率實在太高,為了自己及案主的作業流程方便,還是整理一篇教學,以後若是 FB 改版了也可自行更新內容。

以下先簡單介紹申請 APP ID 能做到的事,想直接進行流程請跳到「二、申請流程」。

2016年11月16日

部落格如何處理「結構化資料」標記 + 修復錯誤訊息

structured-data-testing-tool-error-部落格如何處理「結構化資料」標記 + 修復錯誤訊息關心 SEO 的站長,可能會研究「結構化資料標記」這個主題,而且使用「結構化資料測試工具」時,會發現不少錯誤訊息。由於不少讀者都曾問過這件事,因此本篇來做個整理。

不過為了節省讀者時間,先說結論:「部落格網站基本上忽略這件事也沒有大礙」。

「結構化資料標記」最主要是幫助特定類型的網站、資料,能被搜尋引擎理解分析,進而展示更容易被關注的資訊。這樣的話,部落格網站有設置「結構化資料標記」是很好,但這件事沒做、或沒修正錯誤,也不至於會讓 SEO 扣分。

以下會說明原因、大致介紹「結構化資料標記」、以及修正錯誤的準則。

2016年11月13日

Blogger 自製真正的站內搜尋小工具﹍以日期排列

前陣子接到一個需求,希望 Blogger 搜尋結果能以日期排列。這個要求乍聽之下不太瞭解用意,一般來說,搜尋結果會依照 "關聯性" 來排列,對訪客而言,應該會希望越相關的文章,排越前面才對啊?

不過由於案主是人氣很高的美食旅遊部落格,文章數量很多,她表示希望例如在搜尋 "台北" 時,日期最新的文章能排列在前。後來仔細想想也有道理,對於特定類型的網站,臆測訪客搜尋模式的確必須從不同的考量點切入,有時最新的資訊才是最重要的,例如日期較久遠的文章,該文介紹的店家可能早已關閉,或是介紹的景點已經過時、不熱門了。

因此,針對特殊需求的部落格,本篇會示範如何製作「依照日期排列」的搜尋框工具。

(圖片出處: pixabay.com)
2016年11月9日

Blogger 相關文章 V4﹍行動版專用

不少讀者都詢問過「相關文章 V2 (含縮圖功能)」能否裝在手機版,實際上如果真的這麼做的話,一定馬上就破版,因為行動裝置有著各種不一樣的螢幕寬度,加上直立、橫躺的操作,各種專為行動版而設計的工具一定要符合 RWD 才行。

除此之外,V2 的版面也不適合做成 RWD,如果要將「相關文章 + 縮圖」放在行動裝置,也許擺設上需要 "左半部縮圖、右半部文章標題" 這樣的配置。

因此這個為行動版設計的「相關文章 V4」,就是採取這樣的版面。如果你的行動版網站,不想只放純文字的相關文章,那麼可以考慮 V4 這個版本。



<< 請注意!本篇文章含會員加值文章內容,需點數兌換 >>

(圖片出處: pexels.com)
2016年11月6日

讓標題過長的多行文字自動省略﹍跨瀏覽器 CSS 技巧

livia-multiliine-ellipsis-讓標題過長的多行文字自動省略﹍跨瀏覽器 CSS 技巧之前寫過「讓標題過長的文字自動省略﹍單行 CSS 技巧」,用來處理單行標題過長的問題。不過最近處理多個網站時,剛好都是旅遊美食類型,文章標題比起一般部落格會長上許多。

在特殊版型下(例如區塊寬度不夠),文章標題使用單行省略文字的方式,不容易辨識主題意涵,會導致點擊率下降。如果能夠使用 2~3 行的高度來顯示標題,超過的部分能自動出現省略符號(ellipsis) "..." 的話,會是比較恰當的作法。

只是多行省略號的 CSS 語法,有跨瀏覽器的問題,要如何處理比較恰當,請見本篇的整理。

(圖片出處: liviatravel.com)
2016年10月30日

Chrome 更新後, 無法正常開啟網頁的有效治本方法

google-chrome-default-setting-Chrome 更新後, 無法正常開啟網頁的有效治本方法似乎近年來 Chrome 更新版本後,出包的機率還滿大的。過去曾發生更新後,造成中文輸入法有問題;今年初的更新則是造成「Chrome 會自動重新讀取分頁內容」。

最近更新到 v54 版後,除了網頁、書籤列整個變大外,主要問題是三不五時就無法正常打開網頁,需要連續開第二次才能成功開啟。

收集了一下相關資訊,發現有使用者跟我是類似狀況,但樣本數感覺沒那麼大,因此也不確定是否為普遍性問題。不過如果讀者也有相同困擾的話,可以參考本篇的心得來解決此事。

2016年10月25日

Google AMP 技術,號稱讓行動版網頁秒開,不過我的觀察心得有不同看法

google-amp-Google AMP 技術,號稱讓行動版網頁秒開,不過我的觀察心得有不同看法前陣子讀者詢問如何在 Blogger 網站使用「Google AMP」技術,剛好免費資源網路社群發佈了這篇「在 WordPress 網站使用 Google AMP 技術,提升頁面開啟速度教學」,因此對這項技術也滿好奇的,便來瞭解一下詳情。

在手機測試使用 Google AMP 的網頁後,效果的確令人驚艷,幾乎是點擊連結的瞬間,網頁就開出來了。而這也正是 Google 的目的,改善行動網頁的效能。

不過先說結論,經過深入研究後,倒是覺得部落格不一定需要安裝這樣的技術,以下會詳細說明原因。

2016年10月20日

專業又有質感的網頁文章註解外掛 BigFoot﹍CDN 安裝懶人包

post-footnote-bigfoot-js-專業又有質感的網頁文章註解外掛 BigFoot﹍CDN 安裝懶人包前陣子有案主需要將文章中的註腳功能,結合資料庫進行管理,也就是讓多處重複的註解,可以直接從試算表讀取,而不必一筆筆註釋。

因為這個案子而接觸到這個文章註腳外掛「BigFoot」,測試之後覺得效果跟質感都很好,比之前在「jQuery 展開收合效果安裝懶人包」介紹的另一個外掛 Footnote 還棒。

它可以讓網頁文章像閱讀書籍,將所有註腳完整地在文末列出,同時文末的註腳也有錨點可以跳回文章中對應的註解之處。



由於官方說明文件不是那麼易懂,再加上「Google Drive 關閉外連」的緣故,要安裝這個外掛是有些麻煩的。

運氣不錯的是,WFU 發現這個外掛竟然也有 CDN 支援,那麼請按照本篇的教學,不必另外尋找網路空間,就能簡單又方便地使用這個註解外掛了。

2016年10月16日

對抗 Blogger 垃圾留言全紀錄

blogger-spam-comment-對抗 Blogger 垃圾留言全紀錄雖然本站沒有限制 Blogger 帳號才能留言、沒使用字詞驗證,不過也不太擔心垃圾留言,因為我會 "手動標示" 垃圾留言,讓 Blogger 過濾系統好好學習判斷模式。因此現在若遇到一般的色情廣告留言,基本上都會被系統直接判定為垃圾留言,不太需要操心。

但是前陣子遇到一個進化過的「垃圾留言開發人員」,無論我如何用各種手段封阻,他都有辦法持續在 WFU BLOG 成功留言,連多次類似的留言內容都不會被 Blogger 判為垃圾留言。

對於這個奇特的模式與案例,著實讓我花了點時間來研究破解方法,請見本篇詳細的紀錄。

(圖片出處: 699pic.com)
2016年10月11日

痞客邦搬家到 Blogger 後,SEO 問題要如何解決?

pixnet-move-to-blogger-seo-痞客邦搬家到 Blogger 後,SEO 問題要如何解決?前陣子有位從痞客邦搬到 Blogger 的讀者,尋求 SEO 方面的協助。她表示「我計畫將主站從痞客邦搬到 Blogger,但遇到一個難解的問題,在 Blogger 發表的文章經常無法搜尋到,即使該文瀏覽數達數萬,可否提供專業協助?」

其實剛搬家的站長都可能遇到這個現象,在短時間內看不到 SEO 有起色時,心理都會很著急。

一方面什麼事讓痞客邦站長想出走,會稍微提一下,另一方面則會說明,SEO 比較建議的處理方式。

(圖片出處: pixabay.com)
2016年10月5日

是否痞客邦、WordPress 的 SEO 比 Blogger 好,有這樣的事嗎?

許多站長在架站、或搬家前,很關心的一件事就是 SEO,想瞭解這個部落格平台的文章容不容易被搜尋到。四處打聽的結果,可能會接收到「痞客邦的 SEO 比較好」、或「WordPress 的文章比較容易搜尋到」這樣的訊息。那麼,由於 Blogger 在台灣的使用者本來就少,原本屬意在 Blogger 定居的站長,可能就因此而動搖、或改投他處。

其實這類的說詞或經驗分享,從 "特定的角度" 來看不能說是錯,但為了不讓站長們因著片面的觀點而做出錯誤的決定,我想提出一個比較客觀的說法:

"幾乎" 沒有任何一個部落格平台,能夠長久影響文章的 SEO。

我要表達的是,部落格平台不會是左右 Google 搜尋排名的主因,同樣的一篇文章,不管出自哪種部落格,根據其價值,Google 最終都會給予應得的、對應的搜尋排名。

為了節省讀者的時間,本篇的結論我已經先講了。不過要驗證以上各種說法的真偽,需要一些篇幅來論述,有耐心的讀者請繼續往下看。

(圖片出處: pixabay.com)
2016年9月30日

本站 Blogger 即日起關閉訪客自刪留言功能

這是一篇公告文章,有可能在本站留言的讀者,請注意本篇內容,即日起在本站的任何留言,都將無法刪除。

(圖片出處: pixabay.com)
2016年9月28日

過場效果華麗的 jQuery 圖片輪播外掛 Camera﹍CDN 安裝懶人包

slideshow-camera-過場效果華麗的 jQuery 圖片輪播外掛 Camera﹍CDN 安裝懶人包之前曾介紹「Camera 圖片輪播外掛安裝及使用詳解」,他值得推薦的特色不少,除了多樣的炫麗過場特效,幾乎各種想得到的效果都能自訂,更重要的是支援 "自適應" 寬度,這在行動裝置是非常重要的。

可惜的是這個外掛不容易安裝,需要支援目錄式的網路空間(其實幾乎所有輪播外掛都是如此)。上一篇介紹了 Google Drive 的安裝方式,但由於「Google Drive 檔案外連功能將於 2016 年 8 月關閉」,所以原方法失效。當 Google 也不玩了之後,網路上也很難再找到支援目錄式的免費網路空間了。

好消息是,現在有 CDN 提供了官方檔案,不必再尋找網路空間,就能安裝 Camera 這個圖片輪播外掛,請見本篇的教學說明。


2016年9月25日

解決 Blogger 行動版導覽列選單上「首頁」的異常現象

前陣子接到一個委託,表示 Blogger 行動版的導覽列選單,「首頁」這個項目沒有反應。

其實這個問題很久以前就有發現,只是自己的行動版沒有使用官方的「網頁」小工具,所以沒有深究這個問題。

這次有這個機會來審視一下這個異常現象,才發現要解決的話,還真是出乎意料的棘手,因此紀錄一下解決過程。


<< 請注意!本篇文章含會員加值文章內容,需點數兌換 >>
2016年9月20日

電子書閱讀器 Kindle 8 購買及使用心得

kindle-8-operation-skill-電子書閱讀器 Kindle 8 購買及使用心得使用多年的 Kindle DX 終於到了壽終正寢的時刻,為了眼睛著想,生活不能沒有 E-Ink 的電子書閱讀器。可惜 Amazon 已經不出 9.7" 的大尺寸,現在一律只有 6",但規格版本之多,令人目不暇給,要如何選擇還真有點頭疼。

那麼本篇就紀錄一下 Kindle 購買的注意事項、版本比較,為何選擇 Kindle 8,以及操作使用的心得。

(圖片出處: pixabay.com)
2016年9月18日

稍後閱讀,各種推送到 Kindle 的技巧整理﹍Chrome 網頁圖文 + Evernote 記事 + RSS 閱讀器

read-later-to-kindle-chrome-evernote-rss-稍後閱讀,各種推送到 Kindle 的技巧整理﹍Chrome 網頁圖文 + Evernote 記事 + RSS 閱讀器最近使用多年的 Kindle DX 9.7" 功成身退,買了兩個月前剛出的 Kindle 8,雖然螢幕小很多(只有 6"),不過最重要的是有了 Wifi 功能,不必再依靠會降低使用意願的 USB 傳輸線。

為了保護眼睛、減少看背光螢幕(包含行動裝置)的時間,當逛到內容比較長的網頁圖文、或是 RSS 閱讀器有值得 "稍後閱讀" 的長篇文章時,就可以利用 Wifi 自動推送到 Kindle 來閱讀。

因此花了一些時間研究如何完備這些流程,請見本篇的整理。


2016年9月14日

為 UL LI 項目清單輕鬆加入圖示的各種 CSS 技巧﹍使用 Unicode + Font Awesome 字型

前陣子接到一個需求,希望在所有 UL LI 項目(列表)清單之前,插入一個小圖示。而且這個圖示,需要將來可以很方便地自行替換。

假如網頁的 UL LI 項目早已做好,那麼一個個手動加入 IMG 標籤的圖片,不但很麻煩,日後也不方便維護(更換圖示)。

其實這件事使用 CSS 技巧就能很簡單完成,一次可替 UL LI 所有項目清單增加、或是更換圖示。本篇將介紹三個解決方案,每個都很方便操作、值得參考,不過建議讀者先有一些基本的 CSS 概念再來練習。

(圖片出處: pixabay.com)
2016年9月10日

接案經驗談:不斷要你報價,以及提出極低預算的業主

make-deal-接案經驗談:不斷要你報價,以及提出極低預算的業主前陣子有個案主想製作 Blogger 網站,討論了滿長的時間,但最終提出來的預算十足讓我錯愕。

其實預算不足的案主所在多有,拋一兩句來詢價的也不少,但這次的案例,特殊在一開始規格拉得很高,但一直提不出預算、沒有明確需求、不斷要求報價,導致花了不少溝通時間,結果最後拋出的是 2 根香蕉,那麼只好請他另尋高明的猴子了。

不過我是很正面看待這件事的,這樣的情況既然發生過,代表將來要想辦法避免。因此將案例紀錄下來,以後遇到相似場景時,請業主先參考這篇文章,對雙方都是好事。

(圖片出處: pixabay.com)
2016年9月6日

讓 Facebook 首頁動態只出現「搶先看」貼文

fb-see-first-讓 Facebook 首頁動態只出現「搶先看」貼文這個工具是依據我個人使用 FB 習慣所製作的,不一定適合每個人,如果剛好你的使用模式跟 WFU 類似的話,那麼可以嘗試看看。

FB 目前首頁動態的貼文內容,如果花點時間與耐心來設定的話,是完全可以只出現指定追蹤對象的動態。

不過有的時候,或許你會希望有更多的彈性,例如時間不夠時,會希望只看到「搶先看」的必要資訊;而時間足夠時,可以多瀏覽一下「搶先看」以外、朋友的最近動態。

如果這樣的彈性是你希望的 FB 使用方式,那麼可依照本文操作來使用這個工具。

2016年8月31日

免安裝外掛, 直接破解網頁「鎖右鍵+防複製」的方法 (使用書籤)

之前介紹的「破解 "鎖右鍵+防複製" 的 Chrome 外掛」,+Pulipuli Chen 布丁大留言表示,Quick Javascript Switcher 無法破解 CSS 的 "防複製" 語法。

雖然 CSS 這件事不難處理,不過若是為了一項小小任務而裝了兩個外掛、或是準備兩套方案的話,感覺有點殺雞用上牛刀。因此當時就計畫研究,能否只用一個最簡單的方法(使用書籤),就能同時破解 JS/CSS 相關的「鎖右鍵+防複製」語法。

以下大致說明破解的原理,想直接安裝請跳至「二、安裝書籤」。

2016年8月28日

[WP外掛] 讓網頁根據訪客語言設定, 自動轉換簡繁文字

之前寫過「讓網頁根據訪客語言設定, 自動轉換簡繁文字 (切換按鈕升級版)」這個版本,因為有朋友的 WordPress 網站需要這個功能,所以改寫了本篇的版本。

雖然 WordPress 也可以直接安裝原版本,但有種種原因值得改為優化後的 WP 版本,以下會簡單介紹,而想直接安裝的話,可跳至「二、上傳 JS 檔」。

2016年8月23日

Blogger 長期免費諮詢﹍優惠方案申請

Blogger 使用者無論在是架站或使用上,由於「Blogger 沒有客服」,很多問題都不得不自行摸索。

現在 WFU BLOG 將提供 Blogger 使用者,獲得長期免費諮詢的機會,沒有時間限制,意思就是說,WFU 將成為你 Blogger 網站的長期顧問,解決各種疑難雜症。

不過這樣的好康是有條件限制的,請參閱本篇的說明。

(圖片出處: picjumbo.com)
2016年8月22日

替換 Blogger 所有預設留言頭像圖示 (CSS 技巧)

replace-blogger-default-comment-avatar-替換 Blogger 所有預設留言頭像圖示 (CSS 技巧)最近忽然發現,Blogger 預設的留言頭像有了變化,原本匿名留言的頭像,是無臉孔的圖案,但現在則變成完全空白。

除了這點可能會造成版面不佳,另外其他的預設圖示 (例如 Blogger 帳號的圖案) 尺寸只有 16x16 (px),各種大小不一及完全空白的圖示,對於訪客的視覺感受也很差,會讓 Blogger 網站看起來不夠專業。

於是花了點時間解決這些現象,而且只用到 CSS 技巧,不必寫 JS 就能處理,不會影響網頁效能,值得讀者按本篇教學來修改。



(圖片出處: magicmockups.com)
2016年8月18日

Facebook 粉絲團的訊息無法收到 Email 通知?可安裝各種平台的 Messenger 即時通

fb-messenger-chrome-Facebook 粉絲團的訊息無法收到 Email 通知?可安裝各種平台的 Messenger 即時通其實 Facebook 聊天室的訊息,在以前是可以設定為「以電子郵件通知」。但 WFU 不知從何時開始,就沒收到過 Email 通知了。

原以為是我曾經取消訂閱郵件通知,不過試了很久都找不到答案,最後在這個國外討論串「How do I turn on email notifications for messages?」才知道,是 FB 官方拿掉了這個功能!

少了這個功能還挺麻煩的,因為不少委託案件是從粉絲團的「發訊息」功能留言(也等於是聊天室、收件匣),在少了 Email 即時通知的情況下,往往要進入 FB 網站時才會發現有留言。我想有經營 FB 粉絲團的話,應該會有解決這件事的需求。

2016年8月15日

Blogger 熱門文章 V2﹍卡片式縮圖 + 自適應尺寸 (RWD)

blogger-popular-post-v2-rwd-Blogger 熱門文章 V2﹍卡片式縮圖 + 自適應尺寸 (RWD)幾年前寫的「Blogger 熱門文章+任意尺寸縮圖」,由於修改方式比較複雜,不熟悉程式碼的讀者,有可能不小心會把範本改壞。

本篇 V2 版,除了可算是懶人包,安裝十分簡單,版面也比較有設計感。以下先介紹改版特點,想直接安裝可跳至「二、準備動作」。




(圖片出處: magicmockups.com)
2016年8月8日

Blogger 使用 Pagespeed Insights 網站速度效能檢測心得

pagespeed-insights-blogger-test-Blogger 使用 Pagespeed Insights 網站速度效能檢測心得經營部落格的站長們,一開始在意的是門面(版面)是否美觀;過一陣子之後,注意力可能會轉移到網站的效能、載入速度能否更快,其中最常使用的檢測工具就是 Google 的「PageSpeed Insights」。

這個 Blogger 中文論壇貼文詢問「Pagespeed Insight 分數很低怎麼辦 ?」,其實這類問題的詢問度很高,那麼就藉這個機會一併整理回答。

(圖片出處: pixabay.com)
2016年8月2日

讓 Blogger 首頁能點擊圖片就進入文章頁面

blogger-click-cover-image-into-post-url-讓 Blogger 首頁能點擊圖片就進入文章頁面最近接到一個需求:「能不能點擊首頁文章的大圖,就直接跳到文章網址?否則要點 "繼續閱讀" 才能進入」。仔細想想的確很有道理,這才是友善的操作介面設計,以前怎麼都沒想過!

於是現在 WFU BLOG 首頁文章封面圖,改為以最大尺寸呈現,並且加上文章頁面的連結。以下就來看看要怎麼做到這樣的效果。


<< 請注意!本篇文章含會員加值文章內容,需點數兌換 >>


(圖片出處: pexels.com)
2016年7月27日

Adsense 相關文章廣告 (相符內容功能) 使用心得

adsense-matched-content-ads-wfublog-Adsense 相關文章廣告 (相符內容功能) 使用心得去年 Adsense 推出一個「相符內容功能」外掛,效果就跟一般部落格常安裝的相關文章工具類似,目的是用來增加訪客停留在網站的時間,就像常見的「Blogger 相關文章 V2」、「LinkWithin」等。

當時看到並沒什麼興趣,主要是這工具裝了也不能增加收入;若是談美觀的話,另一個工具「Blogger 隨機文章 V2 + 輪播」的效果更好。

不過前陣子在 +esor huang 大大的網站看到,這個「Adsense 相符內容功能」竟然有廣告出現,引起了我的好奇心。於是研究一下這個新功能,以下分享我的使用心得。

2016年7月21日

WordPress 如何快速搜尋(修改) 佈景主題範本或外掛中的字串﹍String Locator

wp-search-template-plugin-string-locator-WORDPRESS 如何快速搜尋(修改) 範本或外掛中的字串﹍String Locator由於朋友經營了幾個 WordPress (簡稱 WP) 網站,之前幫忙處理版面配置、修改外掛、寫客製程式等等問題,在 Blogger 範本已經十分熟悉的前提下,面對 WP 範本的修改,一開始說實在很頭大。

例如要在佈景主題或外掛中搜尋一個特定字串來修改,或是要找到網頁上的某個區塊,花費的時間多半是 Blogger 的十倍以上。

還好找到了這個 WP 外掛「String Locator」,可以快速解決以上問題,簡直是修改 WP 範本的救星。不過倒是沒看到什麼介紹的文章,那麼就來做個筆記紀錄一下吧。

2016年7月12日

如何提交 Google 表單後, 跳轉到指定網址?

前陣子發佈了「使用 Google 表單取代 Blogger 聯絡表單」之後,最近接到一個需求:「希望當訪客填寫完 GoogleForm 後,點 "提交" 的按鈕,可以連結到另一個 Thank You Page 的感謝網誌,我會在感謝網誌裡放入轉換追蹤的CODE,用來統計轉換數」。

要做到這件事,最關鍵的是按下「提交」按鈕後,能否將網址跳轉到指定頁面。

其實為了維持網站的版面風格一致,就算不是為了這個案例的狀況,多數站長也會希望提交表單後,能跳到指定的、特別製作的感謝頁面,那麼以下就來看看怎麼進行。

(圖片出處: pixabay.com)
2016年7月8日

Blogger 處理行動版時的各種疑難雜症﹍FAQ 整理

blogger-mobile-faq在「Lazy Load 圖片延遲載入 」留言 #6,+Ala Go 提出了一個觀點:「我的行動版即使使用"網頁版",載入也頗快的,就用"網頁版"頂著先」。

根據與他的一系列對話,以及其他讀者的相關提問,覺得可以將處理 Blogger 行動版時,各種可能的狀況與疑問整理一下,做成一篇 FAQ 問答,查閱起來比較方便。

(圖片出處: pixabay.com)

2016年7月3日

更換第四台業者心得﹍雖然「北都」給的優惠很多,但最後我下決定的因素是這個...

taipeinet-更換第四台業者心得﹍雖然「北都」給的優惠很多,但最後我下決定的因素是這個最近第四台的繳費通知寄來了,剛好也收到台北市跨區業者北都」的傳單,打著 "一年 3500" 的優惠價(不是上面那張圖的 4200, 上面是官網截圖),跟原本第四台業者一年將近 6000 的價格,差距真的很大。

於是開始收集資訊,看看已經使用北都的收視戶體驗如何,查查還有沒有更優惠的專案,以及其他使用者是如何處理這件事。

看起來,價格一定是選擇北都的最大因素,不過實則不然,經全盤考量後,價格其實不是很重要的原因。本篇將會紀錄跳槽到北都的過程,以及做出這個決定的關鍵因素。

2016年6月23日

使用 Google 表單(自訂樣式) 取代 Blogger 聯絡表單

google-form-replace-blogger-contact-form-使用 Google 表單(自訂樣式) 取代 Blogger 聯絡表單Blogger 官方提供的「聯絡表單」工具很方便,可以輕易地放在網站上任何位置來充當留言板,訪客不需要登入帳號即可留言。

從使用以來,在收到的訊息之中,發現某些狀況不斷重演,例如訪客的留言不知道是針對那個主題、發問沒留下網址等等,這些現象也沒什麼好的解決方法,原因在於制式的「聯絡表單」無法自行增加問題選項、或附上提醒文字。

如果使用「Google 表單」來取代「聯絡表單」,以上問題都可迎刃而解,而且部落格還能少裝一個外掛,可謂一舉數得。

然而 Google 表單也不是都沒有問題,例如 Iframe 外框、捲軸會讓版面不好看,那麼本篇就來說明如何自訂 Google 表單的流程,以及解決版面的問題。

本篇雖然沒有「Google 表單自訂 CSS 版面樣式教學」那麼困難與進階,不過仍須具備基本的 HTML / CSS 知識。

(圖片出處: pixabay.com)
2016年6月16日

迅速搜尋 Evernote 記事標題的技巧﹍自製各種快速鍵

evernote-search-title-迅速搜尋 Evernote 記事標題的技巧﹍自製各種快速鍵隨著使用 Evernote 的時間越久,累積的記事數量相當可觀時,搜尋結果容易出現許多雜訊,得花不少時間過濾,才能找到真正需要的那則記事。

如果平常為記事命名標題時,有放入適當的關鍵字,那麼日後只需要針對 "記事標題" 搜尋,就能得到比較精確的結果。

根據官網文件「如何使用 Evernote 的進階搜尋語法」,過濾出標題的方法是在 evernote 搜尋框輸入 "intitle:",不過每次都要打這幾個字有點麻煩,如果能使用快速鍵自動產生這些字就方便多了。

本篇會利用「Hotkeyz」這個工具來製作各種快速鍵,可大大加快搜尋 Evernote 的速度。

(圖片出處: youtube.com)
2016年6月13日

讓手機版網頁 Youtube 影片能自動調整寬高尺寸

最近接到一個需求,在手機上的 Youtube 內嵌 Iframe 影片會超出版面,希望能解決這個異常現象。

會發生這個狀況,主要是 Youtube 提供的內嵌程式碼,預設尺寸大致為 560px 寬、315px 高,這樣的數值在網頁版是 ok 的,但手機的話寬度就不夠了。

由於一個網站的文章數可能有上百、數千篇,要一篇篇改不太可能,只能寫 JS 來一次處理。

安裝本篇的程式碼後,會針對手機版的 Youtube 影片做處理,無論訪客手機的螢幕尺寸多大,或是怎麼翻轉手機、切換直立橫躺的方向,都會讓影片能夠符合行動裝置的螢幕寬度



<< 請注意!本篇文章含會員加值文章內容,需點數兌換 >>


(圖片出處: pexels.com)
2016年6月9日

讓 Google 表單(試算表) 定時寄出 PDF 報表

google-spreadsheet-form-send-pdf-report-in-email-讓 Google 表單(試算表) 定時寄出 PDF 報表在這篇「讓 Google 表單(試算表)能自動寄信」,我們利用一段簡單的語法,就能讓填表者立即收到 Email 通知(例如訂購商品的項目),用來保存填表記錄。

如果是商業用途的話,Email 的純文字填表記錄,可能不足以展現專業度。

那麼本篇就來介紹,如何將表單的填寫內容,美化之後轉成 PDF 檔的格式,成為 Email 附檔寄給填表者。

2016年6月6日

Google 表單自訂 CSS 版面樣式教學

google-form-custom-html-css-Google 表單自訂 CSS 版面樣式教學最近接到一個需求,想要將原本內嵌到網頁的 Google 表單(問卷),改成可以符合現有網站風格的 CSS 版面樣式。仔細想了想,這個需求的確有其道理存在:

1. 雖然官方提供了不少樣式可以替換,但總是無法自訂所有細節,不一定與我們網站的風格有搭。

2. IFRAME 內嵌的效果,總是會看到外框、或不搭的背景,也有可能出現捲軸。

基於以上理由,便來研究一下如何自訂 Google Form 表單的 CSS 樣式。

不過在進行本文的步驟之前,必須先提醒讀者,請先具備自行修改 HTML/CSS/JS 的綜合技基礎,這是一篇非常進階的文章內容,由於涵蓋範圍太廣,只能說明大致的原理。有網頁設計基礎的讀者,相信能夠理解本篇的內容。

(圖片出處: pixabay.com)
2016年5月29日

讓 Blogger 文章頁面以最大寬度呈現(隱藏側邊欄)

blogger-template-hide-sidebar-讓 Blogger 文章頁面以最大寬度呈現(隱藏側邊欄)這篇 "Blogger 論壇貼文" 詢問要怎麼樣才能「觀看文章時,內文不會顯示側邊欄」?意思就是希望調整部落格的版面,將側邊欄隱藏起來,那麼文章區塊就能延伸到最大的寬度。

的確很多站長都喜歡這種清爽的版面設計,友站「小說界的李洛克」就是這樣的風格,而 WFU BLOG 的分站「三國志 11」也是如此,能夠提供讀者最佳的友善閱讀版面。

關閉側邊欄後,也失去不少面積擺放廣告,不過相信喜歡這種風格的站長,並不在意這件事。而 Blogger 要做到這樣的版面配置其實很簡單,本文就來看看可以怎麼進行。

(圖片出處: pickupimage.com)