一頁式及 RWD 網站各種寬度、圖片效果不如預期的狀況整理

處理 RWD 網站時遇過許許多多案例,對 RWD 圖片或版面效果覺得跟心目中的 RWD 定義(或是想像)不太一樣。其實以 Blogger 一頁式範本來看,我還沒看過不是 RWD 的版型,那麼一頁式也可以當作 RWD 網站來看待。 會產生落差的原因,有可能是這個版型設計上的...

繼續閱讀全文

手機分享到 Line 的連結,如何強制用預設(外部)瀏覽器開啟?

在這篇「 分享到 Line 會遇到的問題整理 」有讀者留言詢問: 請問貼到LINE裡的超連結,能設定呼叫預設瀏覽器APP來開啟嗎? 這個現象來自於 Line 某次改版後,只要用手機點擊連結,一律會在 Line 內部開啟,不會另外呼叫手機瀏覽器,例如 Chrome、Saf...

繼續閱讀全文

取得 Google API Key(金鑰) 流程,啟用服務 + 瞭解配額限制

Google 提供許多免費的佛心服務,而且還有各式 API 讓開發者串接。但若 API 總是被無限制使用的話,除了對 Google 伺服器是很大的負擔,同時「免費」也代表沒有實質收益,無法跟股東交代。 為了控管串接 API 時所使用的流量,為「免費使用」、「開發測試」設定...

繼續閱讀全文

讓 Gmail 能插入 HTML 語法,方便行銷推廣﹍Chrome 套件

最近想在 Gmail 中放 FB 提供的官方小工具語法,才發現翻遍 Gmail 設定也找不到能切換成 HTML 編輯模式的方法。 我相信這算是 Google 的安全機制,減少郵件中被植入惡意程式碼的機會,例如插入 script。 但如果只是單純的 HTML 語法其實沒...

繼續閱讀全文

讓 FB 粉絲團評論星等在網頁顯示﹍製作流程研究

上一篇研究完「 讓 Google 商家評論星等在網頁顯示 」後,本篇繼續研究如何取得 Facebook 粉絲團評論星等的資料。 這次 FB 的處理流程沒有 Google 商家那麼繁瑣,但為了安全性因素,FB API 必須由後端呼叫,代表前後端都要處理,所以本篇仍舊無法提供...

繼續閱讀全文

快速取得 FB 粉絲專頁永久存取權杖(Access Token)

Facebook 提供的 API 中,有些跟粉絲團有關,而且在行銷上是非常實用的工具,例如: FB 粉絲團評論星等 FB Messenger(即時通) 而想用 FB API 操作粉絲團的話,需先取得粉絲團管理員權限,也就是拿到粉絲專頁永久存取權杖(Access To...

繼續閱讀全文

Blogger 自製「精選文章」小工具﹍文字版

其實這個工具很久以前就很想做了,原因是側邊欄放了「 熱門文章 」小工具,但本站性質比較奇特一點: 網站主題以 Blogger、部落格經營設計為主 而網站流量主要從 Google 搜尋引擎而來 可是流量較大的文章多半與網站主題無關 導致這個熱門文章排行榜,對主力客群吸...

繼續閱讀全文

如何讓星級評價效果以百分比呈現﹍CSS 技巧詳解

最近接到需求要在網頁呈現「五顆星評等」的效果,就像搜尋結果常會看到的星級評等: 或 Google 商家的評分星等: 從上面的示意圖可發現,以 5 分為滿分的情況下,4.5 分(也就是 90%)所呈現的星等並非 4 星(無條件捨去法),也不是 5 星(四捨五入法...

繼續閱讀全文

使用跨域代理伺服器(CORS PROXY),解決讀取第三方網站資料問題﹍實作範例

前端開發人員寫 JS 遇到需要串接第三方 API,或是想存取第三方網站的資料時,遲早會遇到跨域限制的問題。 跨域(Cross-Origin Resource Sharing)的原理可參考這篇「 跨來源資源共用 」,因為安全性考量,網站主幾可設定收到 HTTP 請求時,是否...

繼續閱讀全文

讓 Google 商家評論星等在網頁顯示﹍製作流程研究

前陣子接到需求,希望在網頁上顯示「 Google 我的商家 」使用者評論內容、及評價星等。這個概念引起我的興趣,因為會是有力的行銷工具。 現在商家經營 SEO 需要的手法比過去複雜很多,除了基本的網站要顧,Facebook 粉絲團也不能荒廢,如上圖,Google 搜...

繼續閱讀全文

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

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

繼續閱讀全文

Blogger 架設電商購物車網站前,需要先考量這些問題

接到的 Blogger 商業架站需求中,有一小部分希望能購物後進行結帳,也就是需要購物車系統。由於 Blogger 是純前端的平台,就算能實現購物車功能,整個購物流程、機制、商品銷售及售後管理,一定比不上自架站的購物車系統。 那麼想要在 Blogger 架設購物車功能的...

繼續閱讀全文

商業形象網站使用 Blogger 一頁式版型,有助於提升專業度及 SEO

前陣子一個架站案例滿有參考價值的,案主一開始這麼說: 我知道 seo 的王道是內容行銷,所以我花蠻多心力在寫一些我專業領域內的文章,但前幾個月,我發現競爭對手的網站,本來排名很後面,也沒什麼在做內容行銷,但他自從請人重整網站後,seo 排名馬上就超前... 通常架站遇到...

繼續閱讀全文

網頁插入表格不再麻煩﹍線上產生器 + 可匯入 CSV 檔(Tables Generator)

前陣子剛好多位讀者、客戶都詢問這件事: 如何在文章中插入表格,且能正常顯示,版面不異常? 如果對 HTML 語法不熟悉的話,網頁要插入表格的確沒那麼容易。過去曾寫過「 Blogger 插入表格的最佳流程 + 自適應寬度 」,文章內容不短,但是瞭解原理、操作熟悉後,經由 ...

繼續閱讀全文

如何查詢自己網站的 SEO 熱門關鍵字 + 應用技巧﹍Google 網站管理員 Search Console

最近在臉友 許哲維 的貼文得知,使用 Google 搜尋自己網站的熱門關鍵字,有可能會出現一個新的區塊,顯示 SEO 相關資訊,例如點擊數、平均搜尋排名等數據,就像下圖這樣: 這個功能還滿有趣的,不禁研究了一下,只是似乎不是所有人都看得到。 本篇整理一下心得,並...

繼續閱讀全文

如何為 FB 粉絲團新增「服務內容」,讓顧客一眼就知道賣哪些產品

前幾年 Facebook 粉絲頁的選單頁籤中,推出一個「服務內容」的項目,可以讓公司、店家列出產品項目、或提供的服務。但不方便的地方是,只有粉絲團設定了「公司」、「店家」等特定類別,頁籤才有「服務內容」這個選項。以本站為例,類別為「個人部落格」就無法使用。 不過最近測試時...

繼續閱讀全文

解決 Chrome 下 Javascript 中文排序問題

最近客戶反應,網頁上的中文排列順序,變得跟以前不太一樣,例如: 原本會按 "上午"、"下午"、"晚上" 排序,現在變成 "上午"、"晚上"、"下午" ...

繼續閱讀全文

SEO 資訊與假新聞的危害﹍如何辨別 SEO 文章真偽

最近「假新聞」事件導致外交官殞落,台灣當局總算開始正視假新聞造成的國安危害。比起先進國家早立專法反制,台灣步調雖慢但總比沒有好。 電視媒體帶頭散佈未經查證的消息、甚至製造假新聞早已司空見慣,不過對於能辨別真偽、有心查證的民眾而言,要瞭解真相不乏驗證的管道。例如各路人馬匯集...

繼續閱讀全文

Blogger 側邊欄分頁工具﹍相容官方小工具

以前曾寫過多個「 Blogger 側邊欄自製分頁(Tab)小工具 」,而共通點是某些官方小工具無法使用,例如 "熱門文章"、"網誌存檔"、"網誌統計資料" 等等。 因為這些官方工具的原理,是使用 Ajax 技術延...

繼續閱讀全文

Blogger 側邊欄隱藏開關工具

喜歡版面簡潔的部落格站長,有不少會想使用單欄式版面,也就是沒有側邊欄的設計。然而側邊欄捨棄其實也是有點可惜,這個區塊的空間若好好運用,除了可以帶給讀者不少便利性,還可撥一部份空間擺放廣告獲得收益。 如果網站花一些心思設計的話,我想最佳解會是讓有需求的使用者各取所需,不想看...

繼續閱讀全文

使用北都兩年後解約感想﹍第四台各種替代方案整理

2019.9.14 公告: 不看第四台之後,我做了一個可以線上合法收看多數台灣節目的選台器工具,無論是新聞、財經、政論、綜藝...各種節目一應俱全,推薦讀者使用: 前往「線上看電視」 原始文章:去年「 首次跟北都續約 」時,使出渾身解數才讓他們按照當初的約定「...

繼續閱讀全文

部落格是否需要為了中國大陸市場而搬到自架站?

過去在協助 Blogger 架站時,有時談得差不多了,案主忽然想到什麼,最後來個回馬槍:「那 Blogger 在大陸看得到嗎?」 這個問題實在太難回答了,說 Yes / 說 No 都不是正解,總之無法用簡單的二分法判別。你需要瞭解案主到底在想什麼,究竟是隨口問問,還是真的...

繼續閱讀全文

Google 試算表製作可執行 Apps Script 指令碼的(圖片)按鈕

最近接到一個需求,想要每次都指定不同的 Blogger 文章,做出指定格式的內容,並存成 XML 檔。比較簡單的製作方式,是利用 Google 試算表,將指定的條件輸入儲存格後,寫 Google Apps Script 來撈資料執行。 而每次執行 Google Apps ...

繼續閱讀全文

防止網頁圖片被下載的密技

最近接到一個需求,由於案主網站的圖文常被中國網站、或農場網站盜取,所以希望能夠讓網頁上的圖片,不要那麼容易被下載。 當然我也跟案主說了,任何方法都不可能阻止圖片被取得,最簡單的按一下 Print Screen 鍵就拿走了,所以不如做好浮水印比較實在。 不過案主的出發點...

繼續閱讀全文

讓圖片有放大鏡效果的 jQuery 外掛, 支援手機版﹍mlens

最近接到的需求是,希望滑鼠經過圖片時,能像使用放大鏡一樣,掃過的區域有放大的效果。 類似的功能還滿常見的,例如購物網站,需要展示產品的頁面,由於網頁的空間、寬度有限,圖片很難呈現局部細節。為了降低消費者的疑慮,有必要用放大鏡功能,讓小圖來呈現大圖的細部效果。 另外客戶...

繼續閱讀全文

為網站安裝 Facebook 即時通(messenger)外掛﹍顧客洽談機器人

我們常常會在某些網站的右下角,看到 FB 即時通的圖示,點開後就能直接留言。這個功能很熱門,英文名稱為 Customer Chat Plugin(客戶聊天機器人),很多人都提問過要如何安裝,本篇就來整理非常簡單的安裝流程。 點此看範例網頁

繼續閱讀全文

部落格是否要加入內容付費平台 (Medium) 的考量

「內容付費平台」是指像 Medium 、 SOSreader (現已改名為 Vocus 方格子)這類的部落格平台,提供讀者付費、打賞的機制,讓站長可以藉寫文獲得收益,網站不用另外放廣告,版面比較清爽。 幾個月前在 FB 收到某平台傳來的訊息,算是想自我推薦,這是部分訊息:...

繼續閱讀全文

釐清 Blogger「網站架設 / 客製功能 / 諮詢服務」的費用行情﹍無預算專區

看到 FB 網友貼的「 沒預算方案 」,雖然是嘲諷的意味居多,但不可否認的,「無預算」族群的比例很高,本站也遇過非常多案例。 網站架設或相關事務是高度客製化的產品,就像房屋裝潢、手工家具一樣,無法經工廠機器大量生產,費用只能看客戶要做到什麼程度而定,與客戶的預算有高度相關...

繼續閱讀全文

Blogger 自製「精選文章」小工具﹍圖片版

Blogger 官方幾年前推出「精選文章」小工具,我認為這個功能非常有必要性,因為跟側邊欄的「熱門文章」、「最新文章」工具一樣,都具有維持訪客注意力、減少跳出率的用途。 不過本質上,「精選文章」還是有所不同: 「熱門文章」顯示的文章無法由自己決定,熱門程度是由訪客決定...

繼續閱讀全文

用 Line、FB 手機 APP 開啟網頁對前端工程師的困擾﹍JS 辨識內建瀏覽器(webView)的方法

前陣子的一個專案,客戶反應很多使用者用手機操作時,網頁會有錯誤導致無法註冊。但我手機實測的結果又沒有發生任何問題,於是請客戶提供使用者的操作環境,例如 Android 或 iOS 系統,瀏覽器版本等等。 結果都不是這些原因,最後才發現是因為使用者在 Line 上面開啟網站...

繼續閱讀全文

經營何種類型的網站,可以靠 Adsense 廣告點擊收入維持生計?

前陣子接到一個架站需求,雖然客製功能很多,但客戶開出的預算比起一般水平高出不少。其實跟客戶也不算不認識,所以跟他聊聊架站的目的,其中幾點他提到: 希望以興趣養活自己,因此我有設定Adsense 同時不希望廣告造成訪客困擾,這其中的平衡需要你幫忙調整 因為我自己也不太喜...

繼續閱讀全文

Blogger 諮詢聯繫填寫表單 SOP

本站常會接到許多 Blogger 相關的提問、合作案件、或是詢價,無論是簡單的問題,或是大型的專案,只要提供的資訊不足,就不容易進行回覆,需要花費多次往來溝通的時間。 因此若有需要向本站洽詢之前,麻煩按照本文流程提供必要資訊。 (圖片出處: picjumbo.com )

繼續閱讀全文

Font Awesome 5 正式支援 Line 圖示﹍CDN 安裝 + 版本向下相容心得

長久以來使用「 Font Awesome 」真的非常方便,網頁製作各種小圖示時不用再煩惱,只要到「 Font Awesome 圖示速查表 」翻一翻多能找到需要的圖案。 不過幫客戶處理需求時,最常遇到找不到「Line」的圖案,只好建議先用相近的「Whatsapp」擋著用。沒...

繼續閱讀全文

Blogger 在網站管理員(Google Console)看到 Index Coverage 問題不用擔心

只要是 Blogger 站長,進入「 網站管理員 」(Google Console) 應該都會看過這個警告訊息: 由於文字描述太過恐怖,大部分站長看到 "排名降低" 這樣的字眼肯定會嚇到,但實際上根本不是那樣子,我也不清楚 Google 為何不針對...

繼續閱讀全文

輕鬆讓 Blogger 搜尋結果出現麵包屑(breadcrumbs)導航﹍使用結構化資料 JSON-LD

相信有關注 SEO 的站長都知道什麼是麵包屑(breadcrumbs),如不清楚的話可參考「 麵包屑導航之於SEO的重要性 」、「 面向搜索引擎优化 之 面包屑导航 」。 簡單說這功能就像童話故事,小男孩為了認路而留下的麵包屑,具有協助導覽網站的效果,可讓訪客快速知道該篇...

繼續閱讀全文

用 Line 傳未讀訊息給自己,成為待辦事項﹍不用擔心已讀訊息忘了處理

2019.9.25 公告: 本篇流程隨著 Line 更新到最新版本後會失效,請參考我的新作法「 Line 無法傳未讀訊息給自己後,待辦事項改用 FB Messenger 發給自己 」。 在某種程度上,Line 的未讀訊息就等於是收件匣的未讀郵件,都會是潛在的待辦事項。...

繼續閱讀全文

自製美觀的 RWD 時間軸效果(timeline)﹍jQuery + Bootstrap 外掛

雖然時間軸的效果看過不少網頁使用,不過倒是很少看到部落格站長放在文章內。這次接到的需求是,案主希望將單車行旅的圖文經歷,版面用時間軸效果串起來。 於是研究了相關的外掛,同時也要顧及手機的 RWD 效果,請見本篇的心得整理。 點此看範例網頁 (圖片出處: eeyel...

繼續閱讀全文

究竟 Blogger 會不會關閉?從 Google 商業經營的角度分析

Blogger 會不會倒閉,是使用者長期以來的擔憂。過去曾在「 Blogger 的未來 」發表過看法,不過曾有讀者看完,一段時間後仍提出相同的問題。我想,這件事除非有官方說詞,否則疑問不會有停止的一天。 然而,Google 官方有可能發佈這樣的聲明嗎?我想不會的,連 Ya...

繼續閱讀全文

輕鬆做出美觀的自適應 RWD 表格(Table)﹍jQuery 輕量外掛

最近的案子處理行動版的表格效果時,發現以前的「 Blogger 插入表格最佳流程 + 自適應寬度 」,這個方式若用在商業網站,將沒有任何質感可言,甚至可以用簡陋來形容。 於是找了一下自適應 RWD 表格有沒有比較美觀,而且又簡便的處理方式。有發現幾個功能強大的外掛,但操作...

繼續閱讀全文

Blogger 官方免費幫自訂網址升級 HTTPS! 設定處理流程注意事項整理

這真的是最好的新年禮物了,過年前夕在「 FB 社團 」  +Vista Cheng  分享了「 Blogger站長看過來:自訂網域的網誌,也可以支援HTTPS囉 」 ,原來官方悄悄開始測試,可以讓自訂網域直接升級 HTTPS,這代表: 不用付錢,Blogger 免費提供我...

繼續閱讀全文

電子墨水 (E-ink) 護眼顯示器 Paperlike Pro﹍(1) 入手及開箱心得

為了解決眼睛長時間看螢幕會不舒服的問題,十多年來一直關注「非背光」螢幕顯示器的發展,以及各種解決方案。除了買過各種廠牌、尺寸的「 電子墨水 Eink 產品 」,去年也買過淘寶賣家自行改裝的「 10吋 富士通反射屏 」黑白顯示器。 前兩年也關注過「大上科技」的電子墨水顯示器...

繼續閱讀全文

部落格載入速度太慢,要如何判斷哪些外掛可以移除?

重視 SEO 的站長自然都會關注網頁的載入速度,因為這也是 Google 的排名評分項目之一。過去寫過一系列「 網站效能 」的相關文章,有興趣的站長可以瞭解不同的主題要如何處理。 由於提升「網頁載入速度」的詢問度一直很高,以往就算請讀者看這些相關文章,一段時間後還是可能回...

繼續閱讀全文

免 iPhone、iPad 開發人員就能進行除錯﹍MacOS 模擬器 + Xcode 妙用

之前這篇「 利用 Chrome 對 iOS 裝置進行除錯 」可以讓開發人員很方便地對 iPhone、iPad 等裝置進行偵錯,不過並非所有前端開發者都有辦法買齊各種昂貴的蘋果裝置來測試,因此本篇將會介紹一個比較省錢的解決方案。 雖然不用花錢,不過必須花時間跑模擬器,電腦的...

繼續閱讀全文

從小編到總編之路﹍如何成為部落客中的佼佼者

前陣子這篇「 部落格從搜尋引擎而來的流量,是不會有感情的﹍找回經營網站的動力 」寫完後,有位美食部落格客戶,同時也算本站長期讀者,問了一些 SEO 問題。其實滿訝異的,既然是忠實讀者,想必知道我希望讀者將注意力放在 SEO 以外的地方。 瞭解她詢問的原因後,覺得這段對話可...

繼續閱讀全文

滑動開關切換按鈕﹍CSS 語法產生器

最簡單的切換選項效果,是使用 Input 元素的 radio 型態,也就是單選(非複選)的效果,長得像這樣: 之前接到一個需求,希望切換效果做得有質感,像是蘋果系統的切換按鈕,例如下面的範例: 原以為這樣的效果,需要用 JS 才能做出來,沒想到純 CSS 就能...

繼續閱讀全文

Blogger 網址買了很後悔,可以再搬到新網址嗎?

前幾天有讀者表示,網址已經買了很多年,最近快要到期,想要換個新的網址,但又怕原來的網站連結就失效了,詢問我可不可以搬到新網址。 她的文章有 1500 篇,算是相當不小的規模,本站連她的一半都不到! 規模中上的網站的確需要一個比較有記憶性、或與網站特色連結的網址 ,但一開始...

繼續閱讀全文
TOP