Quantcast
Channel: WFU BLOG
Viewing all 571 articles
Browse latest View live

WFU BLOG 外連 JS 變更及操作說明

$
0
0
wfu-blog-js-link-manual-WFU BLOG 外連 JS 變更及操作說明這是一篇公告文章,本站提供的各種 Blogger Hack 及 工具,若包含了 JS 檔外連,原本存放在 Google Drive,但為了因應「Google Drive 檔案外連功能將於 2016 年 8 月關閉」,必須提前變更 JS 外連。

曾安裝本站工具的讀者,若發現 Google Drive 外連失效、小工具無法運作時,請到相關文章重新安裝程式碼,並參考本篇的說明。

(圖片出處: pixabay.com)


一、使用外連或直接執行 JS


原本我的計畫是全面放棄 JS 外連,將所有 JS 程式碼放在安裝碼之中,讓使用者直接執行程式。這樣的做法,是因為想要一勞永逸避開將來需要不斷尋找 JS 外連空間的麻煩。

處理多數的工具時都沒遇到什麼問題,不過整理到這篇「相容各大瀏覽器的全網頁簡繁快速轉換語法」時,沒想到這個 JS 檔太過龐大,當我把全部的 JS 內容全部塞到 Blogger 文章編輯器時,造成瀏覽器幾乎當掉,看來 Blogger 編輯器無法一次處理這麼龐大的文字內容。

不得已,當 JS 檔太大時,為了寫教學文章,還是得採外連的方式。然而如果 JS 的行數足以塞進 Blogger 編輯器時,大部分的工具我仍會試著把所有 JS 程式碼塞進文章之中。



二、外連 JS 的處理


原本 WFU 可以開一個專門的帳號,將 JS 檔放在 Google Drive 讓讀者連結,但現在必須使用別的網路空間後,為了不影響自己帳號的流量限制,那麼 WFU 就無法大方的直接提供 JS 外連了。

從現在開始,為了安裝 WFU BLOG 的工具,只要使用了 JS 連結,請讀者必須自行尋找空間上傳 JS 檔,會多一些操作的步驟,請見以下的說明。


1. 下載 JS 檔

以這篇「部落格即時留言板 WYBOARD + 表情圖案」為例,程式碼 P 行的綠色字串,原本應該放 JS 連結,但現在需要多幾個處理的步驟。

https://drive.google.com/file/d/0BykclfTTti-0UDlBMTJydllHY1k/view

先開啟這個網址連結,畫面大致如下:

download-goole-drive-js-file-WFU BLOG 外連 JS 變更及操作說明

按圖中紅框處即可下載這個 JS 檔。


2. 上傳到網路空間或 Dropbox

如果你有自己的網路空間,請上傳這個 JS 檔後取得檔案外連網址。

如果不清楚有哪些網路空間可使用,可參考「徹底解決網站外連空間問題﹍幫 Google Drive 的 JS 檔買保險」→「二、準備支援目錄路徑的雲端空間」,這裡提供了不少外連方案可參考。

如果你有使用 Dropbox,那麼使用這個「Dropbox 外連產生器」,可快速取得 JS 檔外連網址,這可能是最簡單的方式。


3. 置換 JS 連結

最後將你的 JS 檔連結網址,置換程式碼中原本的連結網址,就完成了所有動作。

如果擔心自己貼上的 JS 檔連結有誤,可自行將連結貼在瀏覽器網址列,看看能否正常顯示檔案內容,可以的話就沒問題了。

最熱門 jQuery 圖片輪播外掛 Owl Carousel﹍CDN 安裝懶人包

$
0
0
owl-carousel-2-最熱門 jQuery 圖片輪播外掛 Owl Carousel﹍CDN 安裝懶人包Owl Carousel」可說是使用率最高的圖片輪播外掛,許多免費、付費下載的網頁模版或部落格範本,都是內建這個輪播效果。主要原因可能是行動裝置普及後,「Owl Carousel」不但可顯示自適應(RWD)版面,還支援手指觸摸操作的效果,可輕易地在手機直接用手勢滑動輪播圖片,效果十分強大。

過去曾介紹「Camera」這個 jQuery 輪播外掛,其功能強大的地方在於各種過場特效,而跟「Owl Carousel」相比除了欠缺手勢操控支援,最麻煩的地方跟多數輪播外掛一樣,都需要自行下載安裝檔案,再上傳到自己的雲端空間(且必須是支援 "目錄結構"的空間),光是這個流程就會讓許多部落格站長頭痛了。更糟糕的是,「Google Drive 檔案外連功能將於 2016 年 8 月關閉」,現在再也找不到比較簡便的 "目錄型"雲端空間了,若想要使用 "目錄型"的雲端空間都得花一番手腳。(可參考「徹底解決網站外連空間問題」→ 「支援目錄路徑的雲端空間」)

本篇介紹的「Owl Carousel」,最棒的是有 CDN 支援,我們將不用再下載檔案及上傳到網路空間,可直接引用 CDN 的檔案外連,這是所有其他輪播外掛難以望其項背的一點。以下就來介紹安裝方法及提供範例說明。




一、Owl Carousel 簡介


1. 官網及版本


目前最新版本為 V2,而多數網路上的範本,內建的 Owl Carousel 都是 V1,語法跟 V2 略有不同,如果拿 V2 的使用說明來套可能沒有作用,建議讀者先弄清楚版本,或是乾脆直接移除 V1、安裝 V2 版。


2. 功能

以下是 Owl Carousel 的功能特點:

  • 自適應版面
  • 支援多種特殊輪播模式(例如由右到左、錨點操控、從螢幕中央開始輪播)
  • 可循環輪播
  • 一個畫面可一次輪播數張圖片
  • 可用滑鼠、手勢來拖拉圖片
  • 可輪播 Youtube 影片
  • 可自訂各種參數、提供 API
  • 免費、可商業使用

Owl Carousel 也有支援基本的過場效果,不過沒有「Camera」的預設功能強大。由於官方提供了 API,會寫程式的話,可以自行套用 API 來延伸各種應用。


3. API 說明書

要讓 Owl Carousel 能隨心所欲出現自己想要的效果,那麼得熟悉 HTML/JS/CSS 語法及運用,並請參考官方的「API 說明書」頁面,瞭解各種參數如何調用。

同時官方也提供了一些內建的外掛效果,可參考「外掛說明書」,做出更強大的效果。




二、CDN 安裝方式


1. CDNJS

這是知名的 CDN 服務「CDNJS」所提供的 Owl Carousel V2 檔案連結列表:


cdnjs-owl-carousel-v2-最熱門 jQuery 圖片輪播外掛 Owl Carousel﹍CDN 安裝懶人包

如果要引用特定檔案,可直接複製連結。

目前看到最新的版本是 2.0.0-beta.3,但是經 WFU 測試後 CSS 會有問題,請使用圖中看到的 2.0.0-beta.2.4 版本


2. 安裝懶人包

如不知道要引用哪些檔案,可直接使用以下整理好的連結。

在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

以 Blogger 為例,請到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋 </head>這個字串,找到後在此字串的前一行,插入以下程式碼:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/assets/owl.carousel.min.css"></link>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/assets/owl.theme.default.min.css"></link>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/owl.carousel.min.js"></script>

綠色字串可參考「引用 jQuery 的注意事項」,檢查範本是否已安裝過 jQuery,如果已經安裝過請刪除此行,以免重複安裝。

存檔後即完成所有需要檔案的連結引用,接下來要說名如何放輪播內容的 HTML 碼,以及執行輪播的參數設定。



三、各種 DEMO 效果


官方網站很貼心地整理了各種 DEMO 效果:


owl-carousel-demo-最熱門 jQuery 圖片輪播外掛 Owl Carousel﹍CDN 安裝懶人包

且點進個別頁面後,都會列出該效果的 HTML 碼,以及對應輪播的參數設定,所以其實很好套用。

以「Basic」這個效果來舉例,請將這個頁面提供的 HTML 碼放在網頁你想顯示的地方:

owl-carousel-demo-html-最熱門 jQuery 圖片輪播外掛 Owl Carousel﹍CDN 安裝懶人包

接著在 HTML 碼的後面,放官方提供的執行參數,例如以下的 JS 碼(請比對這個 DEMO 頁面,瞭解與以下 JS 碼的差別):

<script>
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
})
</script>

儲存後,就能看到跟官方網頁一樣的效果。



四、自動輪播範例


圖片自動輪播是首頁常見的特效,以下就利用 Owl Carousel 提供一個範例,看看這個效果怎麼做出來的。請在想要顯示圖片輪播的地方,插入以下程式碼:


以下參數修改請參照以上程式碼行號:

B~D:這三行的紅色字串是每個輪播項目的格式,可複製這三行的格式來新增項目。藍色字串請分別填入連結網址及圖片網址。

E~M:這裡有三個項目的 HTML 碼範例。

Q:可更改一次輪播的項目

R:如不需要循環輪播則改為 false

S:可更改與右邊圖片的距離

T:如不需要導航文字則改為 false

U:如不需要自動輪播則改為 false

V:設定切換時間,1000 代表 1 秒鐘

W:如不需要 "滑鼠經過時暫停"則改為 false

以上程式碼及參數的效果,請看範例網頁:



更多 jQuery 網頁效果:

矛與盾之爭, 破解「鎖右鍵+防複製」的 Chrome 外掛, 以及「保護著作權」的方法

$
0
0
chrome-quick-javascript-switcher-矛與盾之爭, 破解「鎖右鍵+防複製」的 Chrome 外掛, 以及「保護著作權」的方法網路的本質是資訊共享,知識的流通可以讓有需要、能應用的使用者創造出更大的價值。如果在網路搜尋到一篇實用的文章,卻發現無法複製文字內容,那麼資訊不方便再利用或再創造,其實是很可惜的。

過去曾使用過一些破解網頁「鎖右鍵、防止選取、關閉拖曳功能...」等等的(書籤)工具,主要的原理就是解除上述功能的 JS 語法。雖然在有些網頁是有效的,不過由於語法日新月異,某些網頁採用了新的 JS 語法,那麼原本的書籤破解工具就無效了。

瞭解原理後,其實最有效的方式就是直接「不讓瀏覽器執行 Javascript」,本篇會介紹這樣的 Chrome 套件,一鍵可以開關瀏覽器的 JS 功能。同時也一併討論,針對「保護著作權」這一點,站長們真正有效的方法為何。



一、關閉瀏覽器執行 JS 的功能


當遇到某些網頁採用了防止複製文字的功能時,解決方法很簡單,以 Chrome 為例,按滑鼠右鍵 →「檢查」(或是按 Ctrl + Shift + I)

chrome-disable-javascript-矛與盾之爭, 破解「鎖右鍵+防複製」的 Chrome 外掛, 以及「保護著作權」的方法

接著按 F1,出現上圖畫面,在紅框處勾選「Disable Javascript」即可,網頁的 JS 就無法執行了。

以上這個流程步驟不多,不過缺點是,複製完我們需要的文字後,又得重複這個流程取消「Disable Javascript」,否則,這個世代的網站若沒有執行 JS,可能多數網頁看起來都是慘不忍睹。

因此,如果有辦法一鍵切換這個功能的話,就再方便不過了。



二、Chrome 套件 Quick Javascript Switcher


1. 安裝

這個套件在 Chrome 商店的安裝網址如下:


安裝之後,在右上角會自動出現小圖示:

chrome-disable-javascript-icon-green-矛與盾之爭, 破解「鎖右鍵+防複製」的 Chrome 外掛, 以及「保護著作權」的方法

目前的狀態有小綠點,代表預設狀態是 "執行 Javascript"。


2. 使用方式

當某個網頁想要不執行 JS 時,那麼按一下這個工具的圖示,讓他變成紅點:

chrome-disable-javascript-icon-red-矛與盾之爭, 破解「鎖右鍵+防複製」的 Chrome 外掛, 以及「保護著作權」的方法

現在這個網頁的 JS 已經被關閉,可以放心使用滑鼠右鍵、或執行複製文字的動作了。

這個功能不單可解決複製網頁內容時會遇上的麻煩,如果只想瀏覽網頁、不想看到廣告時,也可使用這個工具,因為廣告多半需要 JS 來啟動。當不執行 JS 時,八、九成的廣告都會無法顯示,那麼使用這個 Chrome 外掛,就可不另外安裝「擋廣告」的外掛。

這個外掛也會自動記憶網頁是否執行 JS 的設定,所以算是很方便的工具。



三、維護網頁著作權的方法


看了本文介紹的工具,站長們是否會覺得自己的創作文字、圖片一點保障都沒有?「保護著作權」當然是必須的,資訊流通分享雖是社會進化的推手,不過嫖竊、不勞而獲也是扼殺創作的主要原因。

防止複製並不存在完全有效的方法,任何防衛措施都有辦法破解,就像沒有打不開的鎖、打不破的門。但我們可以做的是,購買設計複雜的鎖、材質堅硬的門,讓竊賊需要花費大量時間破解。在他們預估時間延長的情況下,會增加被察覺的機率或失手的風險,那麼就可能打消竊盜的念頭,或是因此而轉移目標。

1. 保護文字

這篇「保護網頁著作權的構思 (1)文章篇」提出了不少機制,用來嚇阻全文複製的行為,其中最有效的,就是在文章中插入各種「內部連結」,也可以在文章中偶爾穿插自己的名字、網站名稱等等

這個作法的好處在於,如果全文被不勤勞的複製者拿走,讀者還是能看出這篇文章的可能出處,或是作者是誰。舉例來說,偶爾將 "我"這個字代換成 "WFU",雖然文章被偷了,只要 "WFU"還在,那麼也等於在幫我們分享轉載,其實沒什麼損失;如果「內部連結」也都還留著的話,那更是免費宣傳的好管道。


2. 保護圖片

「保護圖片」的機制比較麻煩,不過沒有捷徑,只能勤勞地每張都加上浮水印。如果是自架站、有自己的主機,那麼可參考「保護網頁著作權的構思 (2)網頁篇」,有更安全、不會被盜連的作法。


3. 會員系統

如果認為網站的文章內容非常有價值、需要有金庫等級的防盜措施,那麼第 1 點的方法顯然還不夠滿足需求,因為非常勤勞的嫖竊者,可以花時間一一去除所有我們網站的相關字串、連結等等。

那麼可行的方案大概是在網站使用「會員系統」了,這樣的系統原理在於,將重要的文字內容放在後端資料庫中,那麼前端網頁是看不到這些內容的,自然偷文者就無從複製起了。

只有加入了會員,系統辨識過登入會員的身份,才會從後端讀取資料,呈現在螢幕上,算是「保護著作權」最有效的機制。


4. 總結

當然,採用何種方法取決於文章的價值。家裡不上鎖自然容易被闖空門,而要買幾百塊的鎖還是幾萬塊的鎖,也是需要衡量家裡資產有多少。

至少我們需要先做的,是瞭解各種防盜的方法與機制,等有辦法評估自己網站的圖、文價值後,再決定採取對應的防盜措施。


更多 Chrome 外掛工具:


更多「著作權保護」技巧:

CSS 製作各種 Ajax 載入動畫集錦

$
0
0
css-ajax-loader-CSS 製作各種 Ajax 載入動畫集錦什麼是 Ajax 載入動畫呢?網頁跟後端請求資料,在等待的空檔,通常會先顯示 GIF 動畫,避免訪客等得不耐煩。這個過場動畫的英文名稱,就叫做 Ajax Loader。

由於 CSS 已經能處理細緻的動畫效果,那麼如果是簡單的過場動畫,就能用 CSS 來實現,不一定要讀取 GIF 檔,可以減少 HTTP 的請求。

本篇整理了多個實用的 CSS 載入動畫,只要直接複製語法就能套用。



一、來源網站


本篇提供的「CSS 載入動畫」安裝碼,來自以下三個網站:


1. Single Element CSS Spinners


single-element-css-spinners-CSS 製作各種 Ajax 載入動畫集錦

  • 可自訂背景色及圖案的顏色
  • 按每個圖案下方的「View Source」即可取得 CSS


2. LOADING.IO


loading-io-CSS 製作各種 Ajax 載入動畫集錦

  • 可自訂非常多細項,例如顏色、寬、高、速度...等
  • 不一定每個圖案都有 CSS 版本,請注意畫面上若有「Get CSS」按鈕,按下後即可取得 CSS


3. CSSLOAD.NET


cssload-net-CSS 製作各種 Ajax 載入動畫集錦

  • 收集的圖案最多,分成 Spinners、Horizental bars...等五大項
  • 可自訂顏色、速度、尺寸
  • 按下「Get code」可取得 CSS



二、常用基本款




Loading...


Loading...







L
o
a
d
i
n
g








三、特殊效果














loading

















更多 CSS 相關技巧:

Blogger 官方留言板的優點及妙用﹍加強 SEO 搜尋排名

$
0
0
看到不少站長將 Blogger 官方留言板關閉,改用 G+ 或 Disqus 等其他第三方留言板,原因不外乎原生留言板功能比較陽春。其實這麼一來,可是白白損失一部份從搜尋引擎而來的流量。

或許你還不知道官方留言板與 SEO 之間的關連性,沒關係看完本篇之後,就會瞭解 Blogger 原生留言板的優點。同時過去認為官方留言板的缺點,大部分也都是能找到解決方法的。

(圖片出處: pickupimage.com)


一、與 SEO 的關係


1. 原創內容

搜尋引擎喜歡原創內容」,一個網站只要原創內容越多,被 Google 索引的數量自然也越多,那麼也有越多機會出現在搜尋結果,進而成為網站的流量。

瞭解這一點後,那麼應該就能理解──

訪客的留言就是在幫該篇文章增加原創內容、產生更多的索引關鍵字

這篇由 "台灣搜尋引擎優化與行銷研究院"所寫的「部落格的留言是否具有SEO價值?」可作為佐證。


2. 優質留言

有時因為主題的關係,一篇文章能引起熱烈、廣泛的留言討論,而所有留言的篇幅甚至可能數倍於文章的長度。這代表什麼含意呢?很有可能這篇文章的價值會是其他文章的數倍之多喔!

如果留言的討論言之有物,跟原文相比又激起了更多的浪花,對搜尋引擎而言等於是多索引了數倍的優質原創內容、關鍵字。

這篇「如何提高博客訪問量?」甚至認為:

評論是一個很好的內容生成器,並且評論越多,搜索引擎會認為這是一個很有價值的網站

意思就是,訪客留言越多,可以提升 Google 對我們網站的評價。

不過另外一件事也很重要:「要引導出優質的討論內容,那麼文章本身也需具備一定的內涵才行。」



二、官方留言板的優點


1. 帶來額外的搜尋流量

看完前面的原理,我們現在可以瞭解,訪客的留言能增加這個文章頁面被索引的內容,自然也增加被搜尋到的機會。


2. 第三方留言板的缺陷

同樣是留言板,為何「只使用第三方留言板」是不推薦的呢?簡單說明一下原因:
  • 原生留言板可以立即生成 HTML 內容,讓搜尋引擎機器人馬上帶走。
  • 第三方留言板多是用 Javascript、甚至是 Iframe 來產生內容,機器人不一定能夠、或願意來解析這些內容,甚至 Iframe 有安全性的限制,機器人不允許跨域讀取內容。
  • 結論是,任何的部落格平台,只有原生留言板可以產出,能讓機器人無障礙爬取的內容格式,進而成為索引內容
  • 第三方留言板的留言,只要你不是熱門大站,Google 是不會理你的。


3. 讀取速度快

從上一點延伸下來,因為原生的官方留言板不需另外安裝 JS 外掛,所以留言板的載入速度很快,比較不會消耗系統資源。

而所有需要執行外掛的第三方留言板,頁面總是要等待一段時間後,留言板及留言內容才能顯示出來



三、官方留言板的缺點


知名的第三方留言板有 G+、FB、Disqus,他們各有優點,同時也有一些 Blogger 官方留言板沒有的功能:

1. 留言排序

每個第三方留言板都有留言排序的功能,而且除了依照時間新、舊來排序,還可選擇依照熱門度排序。


2. 插入圖片、影音

這是 Disqus 留言板的優點,可以在留言中插入圖片及 Youtube 等影音。


3. 社群媒體的流量

這是 G+ 及 FB 留言板的大優勢,雖然不能帶來搜尋引擎的流量,但是可以額外帶來社群媒體的流量

而社群媒體的流量,是有可能遠高於搜尋引擎的流量,不過要看網站的定位及經營方式而定。



四、改造官方留言板


有沒有辦法兩全其美,不但保有官方留言板原本的優點,又改善以上這些缺點呢?

1. 留言排序

WFU 寫了這個工具,請安裝「讓 Blogger 串聯式留言能由新到舊排序」,就能解決最新的留言無法排序在前的問題了。


2. 插入圖片、影音

WFU 寫了這個工具,請安裝「讓 Blogger 留言能顯示圖片及 Youtube 影片」,只要在留言中偵測到 "圖片連結"、或是 "Youtube連結",就能自動顯示圖片或 Youtube 影片了。


3. 與第三方留言板並存

能夠 "搜尋引擎流量"跟 "社群媒體流量"一把抓,是再好不過的事了,那麼要怎麼做到這件事呢?



原本 Blogger 官方留言板的缺陷,將過以上三項改造之後,現在真的沒什麼理由不使用 Blogger 官方留言板了,對吧!


更多 SEO 相關文章:

Blogger 只要做到這幾件事, 就能輕鬆加強 SEO 搜尋排名

$
0
0
google-search-seo-Blogger 只要做到這幾件事, 就能輕鬆加強 SEO 搜尋排名之前因為讀者對於 "搜尋排名"的提問,整理了一篇「Google 搜尋不到自己的文章嗎?搜尋結果不如預期狀況整理」,以 FAQ 的形式回答了常見的疑難雜症。

不過有些讀者因為從其他平台轉換到 Blogger,對於操作還沒那麼熟悉,因此本篇以懶人包的方式呈現,列出 Step by Step 該進行的步驟。即使是剛接觸 Blogger 的新手,照表操課後也能明確知道,Blogger 要加強 SEO 只需做完哪幾個基本動作就好。

(圖片出處: stocksnap.io)


一、讓 Google 能搜尋到網站


1. 提交網站

SEO 第一個最重要的動作就是提交網站,跟搜尋引擎打聲招呼報個到,否則 Google 不會知道你已經成立網站了,自然也沒人能搜尋到你的網站。

請按照「Google 搜尋不到自己的文章嗎?」→「Q1:我寫的文章用 Google 搜尋引擎, 從來不會顯示?」,確實做完 "網站登錄"以及 "提交網站地圖"的動作。


2. 開啟搜尋選項

blogger-enable-search-Blogger 只要做到這幾件事, 就能輕鬆加強 SEO 搜尋排名

如上圖,在「Blogger 後台」→「設定」→「基本」→「隱私權」→「已列在 Blogger」,開放讓搜尋引擎索引,Google 才能來爬資料。



二、網誌描述


search-result-blog-description-Blogger 只要做到這幾件事, 就能輕鬆加強 SEO 搜尋排名

上圖是用 Google 搜尋自己 "網站名稱"時,會出現的畫面。紅框 A 標示的內容,為 "網誌描述"的文字,在這裡適當地穿插關鍵字,可以增加被搜尋到的機率。以下來看怎麼設定這段文字:

blogger-enable-blog-description-Blogger 只要做到這幾件事, 就能輕鬆加強 SEO 搜尋排名

在「Blogger 後台」→「設定」→「搜尋偏好設定」→「中繼標記」→「詳細介紹」→ 如果這裡是 "已停用"的狀態,請啟用這個功能 → 然後填入網站的敘述內容即可。



三、文章優化


search-result-post-title-url-description-Blogger 只要做到這幾件事, 就能輕鬆加強 SEO 搜尋排名

上圖是用 Google 搜尋自己的文章,會出現的畫面。紅框 B~D 標示的內容,我們逐一來說明如何進行優化。


1. 網頁標題

紅框 B 顯示的是 "網頁標題"的字串內容,圖中看到的效果是 "文章標題 @網站名稱"這樣的格式,這樣的顯示順序對搜尋效果比較好

但是很可惜,Blogger 在文章頁面,網頁標題的預設效果是 "網站名稱: 文章標題"這樣的格式,應該要讓重點資訊 "文章標題"顯示在前才對。

請按以下步驟修改 Blogger 範本,來變更顯示順序。在修改範本之前,建議先閱讀「備份範本的訣竅」系列文章。

到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋以下字串:

<title><data:blog.pageTitle/></title>
找到後,將字串置換為以下內容後儲存:

<b:if cond='data:blog.pageType == "item"'>
<title>
<data:blog.pageName/> | <data:blog.title/>
</title>
<b:else/>
<title>
<data:blog.pageTitle/>
</title>
</b:if>

這段程式碼的意思為:
  • 在文章頁面時,將 "網頁標題"變更為 "文章標題 | 網站標題"這樣的順序
  • 其他頁面時,"網頁標題"格式不變


2. 文章說明

紅框 D 顯示的是 "文章說明"的字串內容,這段文字在編輯 Blogger 文章時,右方的「文章設定」→「搜尋說明」,填入適當的描述文字即可。

blogger-post-description-Blogger 只要做到這幾件事, 就能輕鬆加強 SEO 搜尋排名

同樣的技巧,穿插適當的關鍵字,可以增加被搜尋到的機率。


3. 文章網址

紅框 C 可看到 WFU 為這篇文章設定的網址字串為 "blog-seo-traffic-correlation.html",使用有意義的英文字串、包含關鍵字,同樣也能讓文章網址成為搜尋流量的來源

自訂文章網址的操作方式,請參考「Blogger 自訂文章網址的要訣」→「三、永久連結」。



四、圖片 ALT


search-result-image-Blogger 只要做到這幾件事, 就能輕鬆加強 SEO 搜尋排名

上圖是 Google 圖片搜尋結果的畫面,如果文章裡面穿插不少圖片的話,那麼圖片也可能成為搜尋流量的來源。

而要讓圖片被搜尋到的關鍵是,為每張圖片的 IMG 標籤之中,加入 ALT 敘述,也就是描述這張圖片的一段文字。不過這算是一件苦差事,很少站長能這麼勤勞,一一為圖片手工打上敘述。

為了簡化工作量,WFU 寫了一個「圖片 ALT 描述自動產生器」,幾秒鐘就能完成這個工作,站長們可以善加利用。



五、使用官方留言板


這個步驟最簡單了,沒有額外的動作要做,只要單純使用 Blogger 官方留言板,就能加強 SEO。

獨立出一點來談,是因為很多站長關閉官方留言板,只使用第三方留言板,但反而影響了搜尋流量。

詳細的原理、解決官方留言板缺陷、多個留言板並存的方法,請參考這篇「Blogger 官方留言板的優點及妙用」。


blogger-comment-search-result-Blogger 只要做到這幾件事, 就能輕鬆加強 SEO 搜尋排名

以「長時間瀏覽網頁眼睛不舒服嗎?快使用高對比模式 (Chrome 套件)」這篇文章為例,原本文章並沒有提到「藍光」這個關鍵字,不過因為讀者留言討論到此事,所以上圖 Google 的搜尋結果,可看到訪客有可能因為搜尋 "藍光"相關的主題,而來到這篇文章。

如果使用第三方留言板,就無法獲得 "從留言內容而來"的搜尋流量



六、使用高畫質圖片


最後這部分的內容跟搜尋流量無關,主要是社群媒體流量,算是附帶一提。

文章中的第一張圖,會成為分享到社群媒體(FB、G+、twitter 等) 時的封面圖,可參考「選擇喜歡的圖片當作 Blogger 文章縮圖」。如果文章有爆點,加上圖片選得好,網友分享的意願會大大提升,那麼在社群媒體炸開來的力量是很大的。


fb-share-traffic-hight-quality-image-Blogger 只要做到這幾件事, 就能輕鬆加強 SEO 搜尋排名

前陣子發佈的「
Google Drive 檔案外連功能將於 2016 年 8 月關閉
」,一方面主題是網友關注的焦點,一方面這張封面圖也算是選得恰當,上圖紅框可看到有 80 個分享,擴散出去的分享至少有上千個,加乘效果很大。


wfu-blog-traffic-explode-Blogger 只要做到這幾件事, 就能輕鬆加強 SEO 搜尋排名

一不小心部落格的流量就爆了,原本側邊欄的每篇熱門文章,都是累積數年才有的瀏覽數,結果這篇文章兩天就擠入榜,可見社群媒體力量之大。

言歸正傳,要使用高品質的圖片,而且是免費、可修改、可商用,最好的方法就是從「CC0 高畫質圖庫」來搜尋圖片

但是 CC0 圖庫那麼多,一個個搜尋是非常花時間的事。為了節省工作量,WFU 寫了這個「CC0 高畫質免費圖庫搜尋引擎」,一次可以搜尋所有的 CC0 免費圖庫,將來要替文章找封面圖,就不用再花那麼多時間了。


更多 SEO 相關文章:

Chrome 最好用的滾輪換頁及滑鼠手勢套件 SmartUp

$
0
0
smartup-mouse-gesture-Chrome 最好用的滾輪換頁及滑鼠手勢套件 SmartUp原本我認為 Chrome 最好用的滑鼠滾輪外掛是「Mouse Stroke」,不過這個套件之前被 Chrome 商店下架,只能用安裝 .crx 檔的方式執行。而自從 Chrome 某次改版之後,只允許安裝在商店上架的套件,所有 .crx 檔的外掛都失效,因此只能從 Chrome 商店找 "滑鼠手勢"套件將就使用。

說實在,大部分套件的 "滾輪換頁"功能都不好用,沒有一個比得上舊版 Opera 的滑鼠手勢。不過最近發現了一個套件「SmartUp」,比 Chrome 其他 的滑鼠手勢都好用,以下來簡單介紹一下。



一、安裝套件


1. 安裝網址



2. 搜尋關鍵字

如果沒聽過「SmartUp」這個套件的話,要在 Chrome 商店搜尋到還真不容易。一般來說要尋找滑鼠手勢外掛,通常是搜尋 "mouse"、"gesture"這幾個關鍵字,但這麼做的話,會永遠找不到「SmartUp」。

當初運氣好測到 "手勢"或 "滑鼠手勢"這樣的詞才找到,原來外掛的全名叫做「SmartUp手勢」。另外這個套件的作者來自對岸,命名及說明都使用中文,也難怪關鍵字沒用到重要的 "mouse"、"gesture"等,導致知名度不高,但這個套件的確是目前最強的。



二、基本設定


進入設定的頁面後,「一般」→「功能啟用」,先設定要啟用的功能:

smartup-basic-setting-Chrome 最好用的滾輪換頁及滑鼠手勢套件 SmartUp

如上圖,一般比較常用到會是 "滑鼠手勢"、"簡單拖曳"、"Wheel Gestures"(滾輪手勢) ,勾選這幾個就夠了。


smartup-super-drag-Chrome 最好用的滾輪換頁及滑鼠手勢套件 SmartUp

"簡單拖曳"跟 "超級拖曳"差別不大,如上圖,主要是 "超級拖曳"多了「外觀」的設定。沒有特別需要的話,選 "簡單拖曳"就可以了。



三、滾輪換頁


1. 其他外掛的狀況

大部分滾輪換頁做得不好的地方,除了靈敏度不佳,另外就是會出現下圖這樣的分頁畫面:

tab-option-Chrome 最好用的滾輪換頁及滑鼠手勢套件 SmartUp

滑鼠滾一次後會出現上圖的分頁狀況,再滾一次才真正切換上、下分頁,造成需要滾兩次才能切換一個分頁。

SmartUp 不會在畫面中出現分頁狀況,我比較喜歡這樣的設計,滑鼠一滾就直接切換分頁,而且切換多個分頁時也非常順暢,不會拖泥帶水


2. 設定操作

以下簡單說明設定 "滾輪換頁"的操作,進入「Wheel Gestures」的設定畫面:

smartup-wheel-gesture-1-Chrome 最好用的滾輪換頁及滑鼠手勢套件 SmartUp

假設使用的方式為「按下滑鼠右鍵後,用滾輪切換分頁」,那麼我們需要修改上圖 "Scroll UP with holding RIGHT button"、"Scroll DOWN with holding RIGHT button"這兩個項目,對著原本的設定 "上一頁"、"下一頁"直接點擊,即可開始設定。


smartup-wheel-gesture-2-Chrome 最好用的滾輪換頁及滑鼠手勢套件 SmartUp

依上圖 A~C 的順序,來修改 "Scroll UP with holding RIGHT button"(按右鍵往上滾動):

A. 選擇 "切換分頁"的功能
B. 勾選 "自訂動作名稱",下方可輸入自訂的字串,如圖中的 "切換到左分頁"
C. "目標分頁"選擇「左」

按下「儲存」完成設定,接著按同樣步驟,設定 "Scroll DOWN with holding RIGHT button"(按右鍵往下滾動)即可。

以上都設定完成後,新開的分頁才會套用設定,因此也可關閉瀏覽器後,再重新啟動 Chrome,讓設定生效。



四、滑鼠手勢


SmartUp 的設定畫面做得還滿美觀的,看得出是採用「Material Design」的介面。要修改個別設定可進入「滑鼠手勢」→「動作」:

smartup-mouse-gesture-1-Chrome 最好用的滾輪換頁及滑鼠手勢套件 SmartUp

最常用的功能算是「關閉目前分頁」,滑鼠移到這個項目,就會立刻放大,並顯示滑鼠手勢為「下右」,要修改手勢請直接點入即可。


smartup-mouse-gesture-2-Chrome 最好用的滾輪換頁及滑鼠手勢套件 SmartUp

點入的畫面有個缺點,一時之間找不到修改手勢的設定在哪裡,有點不太直覺。

原來必須將滑鼠移到上圖紅框的區域時,紅色圓圈的編輯圖示才會浮現,點擊這個編輯圖示後,就能編輯手勢了。


smartup-mouse-gesture-3-Chrome 最好用的滾輪換頁及滑鼠手勢套件 SmartUp

我們可以新增各種常用的手勢,來加快 Chrome 的操作。例如瀏覽網頁很常用的「回到最上方」、「跳到網頁底部」這樣的功能,我分別設定了 "滑鼠往上"、"滑鼠往下"這樣的手勢,以後半秒鐘不到就可做到這些事,不用在網頁四處尋找「Go Top」按鈕了。



五、簡單拖曳


這也是非常實用的滑鼠手勢,簡單介紹操作方法:

smartup-drag-text-Chrome 最好用的滾輪換頁及滑鼠手勢套件 SmartUp

上圖是 "拖曳文字"的設定畫面,紅框這個項目代表「用滑鼠選取完文字,滑鼠移動到選取區域,按下左鍵,再往右拖曳,會用預設搜尋引擎搜尋這段文字」。


smartup-drag-link-Chrome 最好用的滾輪換頁及滑鼠手勢套件 SmartUp

上圖是 "拖曳連結"的設定畫面,紅框這個項目代表「用滑鼠選取完文字,如果這段文字是網址的話,滑鼠移動到選取區域,按下左鍵,再往左拖曳,會在背景分頁開啟這個網址」。



六、後記


如果會寫程式的話,這個套件也提供了自訂腳本的功能,可以寫出自己想要的滑鼠手勢功能,因此擴充性很大。

smartup-other-function-Chrome 最好用的滾輪換頁及滑鼠手勢套件 SmartUp

而作者本身可能因為自身需要,也提供了不少有趣的手勢功能,例如上圖紅框標示的這些項目,有興趣的讀者可以玩玩看。

不過 WFU 最懷念的一個功能還是沒有在任何滑鼠手勢套件發現:「單獨縮放文字大小」,這是舊版 Opera 才找得到的設計。

目前要做到這件事,只好另外安裝「Zoom Text Only 讓 Chrome 放大縮小文字」,如果能有一個套件可整合多項功能,減少外掛的安裝、記憶體的使用,就再好不過了。


更多 Chrome 套件:

Blogger 隨機文章 V2 + 輪播效果

$
0
0
前陣子介紹完最熱門的 jQuery 輪播外掛「Owl Carousel」,聯想到部落格文章結束處,經常會配置的 "推薦文章"工具,例如「相關文章」,如果搭配輪播功能的話,應該會有不錯的效果。

要進行輪播之前,得先隨機抽出足夠的樣本數,而 "相關文章"的樣本母體來自於相同標籤的文章,數量有時會不夠,因此本篇選擇將輪播功能,搭配同樣適合放在文末的「隨機文章」,這樣子抽樣母體比較大(整個網站的文章數)。

同時 "隨機文章"加了新的版本號 V2,版面、樣式上也做了一些改變,以下先介紹改版的特點,想直接安裝請跳至「二、安裝 jQuery 及 CSS」




一、隨機文章 V2 介紹


可參照 DEMO 網頁的效果,V1 的特點大致有這些:

  • 可抽樣網站所有文章,超過 500 篇也可處理
  • 自適應螢幕寬度
  • 可自訂縮圖長寬比例,縮圖會自動調整寬度
  • 排除特定標籤字串的文章不顯示


這個版本 V2 新增的特點如下:

  • 文章標題放在圖片底部,版面設計比較美觀
  • 可自訂輪播文章總數、及顯示的文章數
  • 可手動切換上下篇輪播文章
  • 可用滑鼠拖曳輪播文章
  • 可設定是否自動輪播
  • 可設定輪播的間隔時間
  • 可無限輪播,不會有捲到頭、尾之後卡住的現象



二、安裝 jQuery 及 CSS


如安裝過舊版隨機文章,請完整移除所有程式碼。

在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

1. 請到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋 </head>這個字串,找到後在此字串的前一行,插入以下程式碼:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<style>
/*隨機文章V2*/
.rndPost2_caption {
font-size: 16px;
font-weight: bold;
line-height: 20px;
text-align: left;
margin: 10px 0;
}
#rndPost2_main {
position: relative;
margin: auto;
}
#rndPost2_main,
#rndPost2_main *,
.rndPost2_left,
.rndPost2_right {
box-sizing: border-box;
}
.rndPost2_left {
float: left;
}
.rndPost2_right {
float: right;
}
.rndPost2_left,
.rndPost2_right {
width: 35px;
margin: 0;
padding: 5px;
text-align: center;
cursor: pointer;
opacity: .6;
transition: all .7s;
-webkit-transition: all .7s;
-moz-transition: all .7s;
}
.rndPost2_left:hover,
.rndPost2_right:hover {
opacity: 1;
}
.rndPost2_left img,
.rndPost2_right img {
width: 25px;
}
.rndPost2_post {
display: inline-block;
padding: 5px;
font-size: 12px;
}
.rndPost2_post a {
display: block;
position: relative;
opacity: .8;
transition: all .7s;
-webkit-transition: all .7s;
-moz-transition: all .7s;
}
.rndPost2_post a:hover {
opacity: 1;
}
.rndPost2_post img {
display: block;
max-width: 100%;
padding: 5px;
background: #FFF;
webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(0, 0, 0, .1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(0, 0, 0, .1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(0, 0, 0, .1) inset;
}
.rndPost2_title {
position: absolute;
bottom: 5px;
left: 5px;
right: 5px;
padding: 5px;
z-index: 5;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
text-align: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>

第一行綠字可參考「引用 jQuery 的注意事項」,檢查範本是否已安裝過 jQuery,如果已經安裝過請刪除此行,以免重複安裝。

其餘的部分,如果對 CSS 熟悉可自行修改參數



三、安裝程式碼


接著請搜尋 </body>這個字串,找到後在此字串的前一行,插入以下程式碼:


以下參數修改請參照以上程式碼行號:

F:設定全部要輪播的文章數量

G:設定一次顯示的文章數量

H~I:設定縮圖的長寬比例,若要使用正方形的話,請將 H、I 行的數字改為 1 即可。

J:若不要自動輪播功能,請將參數改為 false

K:設定每幾秒切換一次輪播效果

L:可自訂顯示的大標題字串

M:橘色字串請改為自訂的「無縮圖替代圖片網址」

N~O:橘色字串可改為自訂的「左右箭頭圖示網址」

P:如果不需要排除特定標籤的文章(整個網站的文章都想顯示),請刪除括號內的字串,留下括號 []即可。預設的字串以本站來舉例,代表所有樹狀標籤中包含 "站務"字串的標籤文章、以及所有包含 "休閒"字串的標籤文章,都不會出現在隨機文章中。

Q:此工具預設會出現在留言區塊之前。如果要擺到到別的位置,請將字串改為 "." + class 名、或是 "#" + id 名稱。


儲存後即可看到效果,也可前往範例網頁觀看:




四、常見 FAQ


日後若有常見問題,會持續補充在此。

Q1: 有些文章無法顯示縮圖?

Ans: Blogger 的縮圖功能,需要使用 PICASA 圖床(G+ 相簿)才能自動產生,因此使用其他圖床的話,這個小工具很可能無法正常顯示縮圖。建議參考「選擇喜歡的圖片當作 Blogger 文章縮圖」,在 Blogger 後台上傳圖片,放在文章最前面的位置,就一定能顯示縮圖了。


更多實用工具:

Blogger 安裝 Adsense 網頁層級廣告(錨定/重疊/穿插)使用心得

$
0
0
adsense-page-level-ads-Blogger 安裝 Adsense 網頁層級廣告(錨定/重疊/穿插)使用心得"浮動廣告"是 Adsense「明文禁止」的行為,原因是這樣的行為,屬於「操控廣告的放送和顯示以吸引不必要的注意」,會有比較大的機率吸引訪客點擊廣告,等於用不正當的手段增加收益,WFU 也曾在「部落格浮動浮動廣告」→「四、錯誤示範」提醒讀者這件事。

不過比較意外的是,去年 Adsense 開放了行動版使用浮動(錨定)廣告,大概是行動版螢幕面積小,廣告展示比較不易,因此官方不得不想辦法提昇廣告收益吧!可惜的是,這功能一開始只有少部分獲邀的使用者可以進行測試。

日前 Adsense 測試完畢,宣佈所有使用者都可安裝這個功能,正式名稱叫做「網頁層級廣告」,包含了「錨定/重疊/穿插」廣告,對於提升行動版的收益來說是一項好消息,本文就來分享我的使用心得。



一、特點介紹及安裝


1. 特點

詳細介紹可參考官網「關於網頁層級廣告」,以下簡單摘錄要點:

  • 只在高階行動裝置顯示 → 代表舊手機無法顯示
  • 只會在廣告成效最佳且可以提供良好體驗時,才會顯示網頁層級廣告 → 意思就是不會每個頁面都出現
  • 不會計入每頁的 Google 內容廣告數量上限 → 代表「不算在每頁 3 則廣告的限制之內
  • 錨定/重疊廣告」這類行動廣告會固定在使用者螢幕邊緣
  • 穿插廣告」這類行動全螢幕廣告會在網站載入網頁的空檔顯示 → 代表切換頁面之間才會顯示


2. 安裝

進入「Adsense 官網」→「我的廣告」→「多媒體廣告聯播網」→「網頁層級廣告」,可看到以下畫面:

adsense-page-level-ads-install-Blogger 安裝 Adsense 網頁層級廣告(錨定/重疊/穿插)使用心得

按照 A~C 步驟進行:

A:開啟「錨定/重疊廣告」

B:開啟「穿插廣告」

C:按下「取得程式碼」,按照指示安裝到網站即可。

更多「網頁層級廣告」的安裝、測試步驟,可參考這篇 Step by Step 的說明「如何建立Google網頁層級廣告」。



二、Blogger 安裝技巧


因為有些讀者安裝到 Blogger 範本時遇上麻煩,因此說明一下安裝到 Blogger 的技巧。

在修改範本之前,建議先閱讀「備份範本的訣竅」系列文章。

1. 原始安裝碼

官方提供的安裝碼長得像這樣:

<script async src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: 'ca-pub-XXXXXXXX',
enable_page_level_ads: true
});
</script>


2. 無法安裝

這個「Blogger 中文論壇討論串」表示安裝碼放入範本中時,有錯誤訊息無法儲存。

這是因為 Adsense 提供的官方安裝碼不符合標準的 XML 語法規範,紅色字串 async 沒有參數,因此 Blogger 範本對於非 XML 語法會丟出錯誤。

解決方法很簡單,我們手動替 async 加上參數即可,將原安裝碼的綠色字串改為以下:

<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></script>


3. 刪除 adsbygoogle.js

如果網頁已經安裝過 Adsense,那麼第一行綠色字串其實在網頁中,只要執行一次即可,重複執行會導致過多的 HTTP 請求及增加載入時間。

我們可在範本中搜尋紅色字串 adsbygoogle.js,若有找到的話,那麼第一行的綠色字串,在整個範本中只要留一處即可,多餘的皆可刪除


4. 安裝程式碼

經過以上調整後,在 Blogger 後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋 </head>這個字串,找到後在此字串的前一行,插入調整過後的程式碼即可。



三、廣告數量如何取捨?


使用了「Adsense 錨定廣告」之後,等於是增加了行動版的廣告數量,這會帶來什麼影響呢?


1. 廣告載入速度

之前有讀者,覺得行動版的載入速度有點慢,曾請教要如何改善。檢視的結果發現沒裝太多外掛,不過各種廣告倒是滿多的,因此影響載入速度的主要原因就會是廣告數量了

其實廣告在某種程度也可視為外掛,而且一個廣告載入的外部物件,通常遠超過一個網頁小外掛,因此的確會影響網頁載入速度。


2. 減少廣告數量

如果你是注重使用者體驗的站長,那麼「減少廣告數量」的確可以有感提升網頁載入速度。可行的建議作法大致有這些:

A. 有的站長在網頁放了多家廣告,例如 Adsense、BloggerAds(或 Scupio)、FB 等等,要進行開刀的話,合理的作法是先從收益低的開始砍。由於 Adsense 收益遠超過其他廣告代理商,那麼倒是可以只留下 Adsense 廣告就好

B. 「Adsense 廣告尺寸及版面配置優化技巧」→「二、最佳化方式」曾提到,"範本中讀取到的第一個 Adsense 安裝碼,會分配到該頁面最高出價的廣告"。

讀者可以觀察自己的 Adsense 報表,找到點擊率最高的那個廣告,如果不是網頁第一個出現的廣告,那麼可以將這個廣告之前的廣告刪除,就能達到刪減廣告的目的。

如果捨不得刪除,可以另外找個比較後面的位置來放。



四、WFU BLOG 廣告的調整


經由以上的概念,本站也對 Adsense 廣告進行了調整。


1. 行動版

原本我一個頁面放了 4 個 Adsense 廣告,多了錨定廣告後會變成 5 個,感覺上數量過多,可能會帶給訪客不佳的閱讀體驗。

經檢視報表後,發現第 2 個廣告(放在繼續閱讀處)點擊率最高,而第 1 個廣告(放在導覽列下方)的點擊率跟第 3 個廣告差不多,因此最後決定刪除第 1 個廣告。

除了可縮減 Adsense 數量,也可讓原本第 2 個廣告的收益最大化。

adsense-anchor-ads-Blogger 安裝 Adsense 網頁層級廣告(錨定/重疊/穿插)使用心得

上圖為行動版刪除導覽列下方廣告,顯示「錨定廣告」的示意圖效果。


2. 網頁版

網頁版報表的數據跟行動版雷同,導覽列下方的廣告點擊次數,遠低於放在繼續閱讀處的廣告,因此一樣刪除導覽列下方的 Adsense,讓網頁版維持 3 個廣告就好(繼續閱讀 x 2 + 文末 x 1)。


3. 補充

由於每個網站的型態、客群都不一樣,點擊廣告的模式也不盡相同,讀者若模仿本站的處理方式,不一定能提高收益。

建議先觀察 Adsense 報表,找出點擊率最高的廣告位置,並評估第 1 個廣告的點擊率,才能決定如何處置第 1 個廣告,看是要刪除、移動位置、或是進行 A/B 測試,才能找出提高收益與調整廣告數量的平衡點。


更多 Adsense 相關技巧:

Blogger 搬家匯入文章的各種疑難雜症整理

$
0
0
blogger-import-post-xml-problems-Blogger 匯入文章的各種疑難雜症整理前陣子處理從痞客邦搬家到 Blogger 的案子時,在 "搬圖床到 PICASA"、 "轉移對應文章的網址"等問題都有辦法解決,反而是「匯入文章」這部分有些地方很棘手,不一定都有解決方案。

其實 Blogger 匯入文章的狀況還真不少,有人曾在「Blogger 中文論壇」提問,WFU 過去經手的案例也有一些。那麼就趁這次的機會整理一下,以 FAQ 的形式呈現,將來有新的狀況也會持續補充。

(圖片出處: pixabay.com)


Q1:為何匯入文章總是失敗?


匯入文章的過程在伺服器端要做不少事,當處理的文章越多就會耗費越多時間。為了讓伺服器的運作有效率,避免單一部落格發出的請求,讓伺服器癱瘓而影響到其他部落格,其實每件「匯入文章」的執行任務,Google 都有時間限制,當超過就會終止該項執行緒

blogger-import-post-fail-Blogger 匯入文章的各種疑難雜症整理

匯入文章時,如果看到上圖圈圈轉個不停,但是沒有結束的傾向時,就是超過時限被伺服器中斷執行了。

瞭解這個前提後,我們可以分析一下,有哪些因素會導致「匯入文章」執行超時:

1. 使用者的網路傳輸速度

如果使用者的網路速度太慢、塞車,或上傳頻寬不夠大,都有可能導致在時限到點之前,來不及完成「匯入文章」的完整流程。

解決的方法大致是不要在網路熱門尖峰時段匯入,換個時間再嘗試一下。如果還在使用 ADSL 的話,這也許是個升級光世代的好藉口。


2. 處理的文章數

從別的部落格搬家到 Blogger,是有可能一次需要匯入幾千篇文章,而這麼龐大的文章數,有極大的可能來不及在伺服器設定的時限內,完成匯入所有文章的執行緒。

為了排除匯入失敗的原因,建議可以先從 "匯入 1 篇文章"開始嘗試,確定沒問題後,再逐批匯入文章,例如分成每批 1000 篇文章、或 500 篇文章這樣來嘗試。


3. 勾選「自動發佈所有匯入的文章和頁面」

如果你在匯入文章之前,勾選了自動發佈的功能,這也可能是導致匯入失敗的原因之一。

因為 "自動發佈"的功能,花費的時間其實不下於 "匯入文章",也是非常可觀的。當處理的文章數一多,發佈所花的時間就會非常龐大。

如果你不急於發佈文章,當文章數量太大時,為了讓 "匯入文章"能成功,可以考慮先不勾選 "自動發佈"的選項



Q2:我只匯入一篇文章仍然失敗,是否還有其他限制?


文章要能匯入 Blogger,最基本的就是準備符合 Blogger 格式的 XML 檔,這一點請直接參考「Q7:有沒有推薦的轉檔工具?」。

不過就算使用了符合格式的 XML 檔,Blogger 還是有一些限制,例如使用者的 IP、以及匯入次數等等,這一點必須說明一下。

Blogger 是一個免費的發文平台,既然是免費,就有可能遭到濫用。有的使用者看上這一點,將 Blogger 當作 "內容農場"使用,無論是使用「自動發文」的技術、或是「一次匯入大量文章」,藉以賺取廣告點擊的利潤,反正免費的平台等於是「零成本」,無本生意自然會吸引動歪腦筋的使用者。

Google 的頂尖工程師不會不清楚這種狀況,為了減少伺服器被濫用,也會有因應的對策,例如:

  • 限制一個帳號一天能匯入文章的次數→ 根據 WFU 的經驗,大約是 4 次
  • 限制一個 IP 一天能匯入文章的次數

因此,在匯入文章的時候,也要大致計算一下操作的次數,很有可能一開始因為 Q1 的因素、或是錯誤的 XML 格式而失敗,但之後本應匯入成功時,卻因為匯入太多次,而誤以為 Blogger 總是無法匯入成功。

這個時候,只能隔一天換個時段再嘗試,或是換個 IP、並換個帳號再來嘗試了。



Q3:匯入文章時,繼續閱讀為何失效?


不止 Blogger,痞客邦也有提供繼續閱讀的功能。雖然痞客邦的繼續閱讀語法跟 Blogger 不一樣,不過痞客邦的匯出檔,經過 Q7 的轉檔工具處理後,"繼續閱讀"功能在 Blogger 是正常的

反而是 Blogger 自己的備份匯出檔,日後還原匯入 Blogger 後,繼續閱讀功能卻失效了,這是很弔詭的一件事。

為了解決這個問題,我們只能在匯入之前,將備份的 XML 檔之中,修復錯誤的 "繼續閱讀"語法,然後再進行匯入的動作,詳細的操作流程請參考「解決 Blogger 匯入文章時繼續閱讀出錯的問題」。



Q4:匯入文章後,為何不能發佈?


Blogger 一天手動發佈文章的數量是有限制的,上限為 50 篇,原因請參考 Q2 的解釋,這是 Google 防止 Blogger 成為內容農場的機制之一。

如果不選擇手動發佈的話,就不會有這個問題,可以在匯入文章的同時,勾選 "自動發佈所有匯入的文章和頁面",就不會有 1 天 50 篇的限制了

不過這麼做要承擔的風險就是,文章太多時可能會匯入失敗,那麼就得將文章分批匯入了。



Q5:能否控制匯入文章的網址?


這個問題看似不起眼,讀者可能不覺得會用到這個功能,其實這是不小的問題,而且很難解決。

Q5 的情境會發生在這些狀況:

1. 備份文章

有了「Blogger 網站突然消失了怎麼辦」、「Blogger 文章不小心誤刪了怎麼辦」這些案例,定期備份文章是必要的動作。

但是讀者會發現,匯出的 XML 檔,之後再匯入還原時,文章網址無法跟舊的一樣,這會對 SEO 造成很大的影響,因為:

  • 讀者、搜尋引擎所留的資料都是舊文章網址
  • 新文章網址得重新競爭 SEO 排名


2. 批次改字串

有時發現整個網站的文章,某個名詞、某個字串都用錯了,那麼可行的解法是:

  • 匯出文章 → 用記事軟體批次修改字串 → 存檔後再匯入 Blogger

這樣就能一次修改所有字串,但面臨的問題就像第 1 點一樣,文章網址就再也回不去了...


3. 繼續閱讀

這一點就是 Q3 的狀況,需要利用第 2 點的原理來批次改繼續閱讀語法,但是 XML 匯回 Blogger 後,繼續閱讀語法是出來了,但文章網址卻變更了。


為何我們無法將匯入文章的網址,改成跟原本文章的一模一樣呢?假設原文章網址是這樣:

http://www.wfublog.com/2011/01/test.html

blogger-post-customize-url-fail-Blogger 匯入文章的各種疑難雜症整理

如上圖,就算想設定 test.html 這樣的網址,但會被 Blogger 加入亂數編號,例如變成 "test_1.html"。

就算我們將原本的 test.html 這篇文章刪除,實際上這篇文章仍然會暫留後台伺服器,因此在一段時間之內,也許是幾個月,刪除的這個網址在暫留期間,依然是無法被使用的

因此,如果為了 SEO 的因素,而想保留匯入文章之後的原網址,這件事還真的是近乎無解,除非願意等到原網址在伺服器的資料消失

所以這件事的結論為:

  • 搬家要匯入 XML 檔之前,請先將所有要修改的字串處理完畢,再進行匯入。若匯入之後再想修改,原文章網址就沒辦法用了。

又想修改內容、又一定要使用原文章網址的話,請參考下一點 Q6。



Q6:匯入檔能否一次修改所有文章的字串?


如果不在意匯入文章的網址無法調整,那麼請依照 Q3 的流程,就可批次修改所有文章的字串。

如果不希望文章網址遭到變更,那麼就不能用修改匯出檔的方式,必須使用 Blogger API 來修改。有此需求的話可參考本站「服務項目」→「4. 部落格相關業務」→「B. 網站相關業務」



Q7:有沒有推薦的搬家轉檔工具?


Blogtrans」是極推薦的工具,可以在台灣多種部落格之間搬家、匯出匯入文章,產生的 XML 檔也可成功匯入 Blogger 沒有問題。

需要 Step by Step 教學流程的話,可參考這篇「出走吧!應用BlogTrans,從Pixnet到Blogger的搬家步驟」,一些痞客邦搬家的注意事項也有說明,相信這個工具可以滿足大部分的搬家需求。


更多 Blogger 相關技巧:

網頁使用程式碼高亮的最佳作法及推薦外掛

$
0
0
code-highlighter-optimization-網頁使用程式碼高亮的最佳作法及推薦外掛提供程式碼分享的網站,為了讓版面視覺效果美觀,通常會安裝「程式碼高亮」這樣的外掛。而帶來的影響是,網站的外掛裝越多也會影響網頁載入時間,尤其是沒有展示程式碼的文章頁面,也必須執行這個沒有必要載入的「程式碼高亮」外掛。

如果能夠需要展示程式碼時,才執行「程式碼高亮」外掛,相信會是比較合理的作法。本篇將會介紹各種「讓程式碼高亮」的最佳作法,同時也推薦一些不錯的外掛程式及線上服務。

(圖片出處: picjumbo.com)


一、線上程式碼高亮產生器


1. 介紹

網路有不少免費的服務,能自動產生程式碼高亮效果,並且提供我們嵌入網頁的程式碼,可參考這篇「程式碼分享服務,貼上後立即產生鏈結並加入高亮效果」,介紹了這幾個線上服務:



2. 優點

在這些線上網站,可立即看到程式碼高亮的效果,同時也能取得內嵌程式碼,貼在文章中立即可使用

這個作法的優點就如同文章開頭所提,需要展示程式碼的文章才會執行內嵌程式,其他文章則不會執行,就不會影響網頁載入速度了


3. 缺點

雖然這個方案最簡單好用,不過缺點也最大:

  • 程式碼內容存放在免費的線上網站,哪天這個服務收起來的話,文章內容就開天窗了。
  • 因為內嵌程式碼的外連放在免費的線上網站,若伺服器不穩、或塞車時,整個網頁在「內嵌程式碼」之後的所有內容,就可能被塞住而無法顯示,如同「部落格廣告(BloggerAds)卡住網頁載入的完整解決方案」的情形一般。

因此,如果網站要長期經營的話,就不適合使用這些線上服務;只是暫時存放、展示程式碼,那麼就可以使用這些服務



二、純 CSS 效果 + 行號功能


1. CSS 區塊

最不影響網頁載入的方法,就是使用 CSS 來控制「程式碼區塊」的效果。雖然文字無法做到多種的顏色變化,但是至少整個區塊的顏色配置,跟文章的其他部分是區隔開來的,仍然對版面美觀有加分效果。

這部分詳細的操作方式及語法,可參考這篇「讓網頁使用各種特殊文字區塊」,不但可規劃 "程式碼"區塊,也可套用於 "公告"、"引言"等區塊,非常的實用。


2. 行號功能

展示程式碼通常會用到行號這個功能,不過使用 CSS 製作出來的區塊,無法自動產生行號,通常這需要外掛才能做到。

不過也是有方法可以產生行號,例如手動添加 OL、LI 這樣的 HTML 標籤。

如果覺得手動太麻煩,那麼可參考這篇「保護網頁著作權的初階構思__(3) 程式碼教學篇」,介紹了「Highlight」這個小工具,可以幫我們自動產生 OL 標籤,省下不少時間。



三、知名「程式碼高亮」外掛


想要有高質感的「程式碼高亮」效果,只用 CSS 是不夠的,必須藉助於外掛才做得到,以下介紹幾個知名的外掛。


1. SyntaxHighlighter

SyntaxHighlighter-demo-網頁使用程式碼高亮的最佳作法及推薦外掛

SyntaxHighlighter」是老牌知名的外掛,不過安裝流程需要花一點時間,可參考這篇的教學「如何在Blogger中使用SyntaxHighlighter」。


2. Google Code Prettify

google-code-prettify-demo-網頁使用程式碼高亮的最佳作法及推薦外掛

Google Code Prettify」是 Google 出的產品,除了比上一個外掛好安裝,也有一定的質感,安裝教學可參考這篇「在 Blogger 上用 Google Code Prettify 顯示程式碼」。

他可選擇的布景顏色主題不多,不過 WFU 覺得夠用了,其中也有不錯的配色主題,可參考這個「展示頁面」來挑選。


3. Highlight.js

highlight-js-demo-網頁使用程式碼高亮的最佳作法及推薦外掛

Highlight.js」是 WFU 個人最喜歡的外掛,有大量的布景配色可用,包含了文字編輯軟體 Notepad++、Sublime Text 等常用的布景,例如個人常用的 "Solarized Dark"。

Blogger 中文論壇」貼程式碼的功能便是使用這個外掛,效果可參考「討論串 1」、「討論串 2」。

這個外掛的安裝教學可參考這篇「HIGHLIGHT.JS」,官方也提供了完整的「布景效果展示頁面」,左側是布景名稱,右側是各種程式語言的效果,讓使用者挑選起來很方便,非常的貼心。

這個外掛只有一個缺點,不能顯示 "程式碼行號",因為作者表示「不想做他用不到的功能」。

不過我們還是可以自己手動作出行號來,參考「二、純 CSS 效果 + 行號功能」→「2. 行號功能」的方法即可。



四、最佳安裝方式


如本文開頭所提,最佳的外掛安裝方式為,「文章內容有使用 "程式碼高亮"功能時,才載入外掛;其他頁面不載入外掛」。下面以 Highlight.js 為例,示範如何以這種方式安裝。

由於程式碼使用 jQuery,請先參考「引用 jQuery 的注意事項」,檢查範本是否有安裝 jQuery。

以下程式碼請放在範本中 </body>的前一行:

if ($(".post-body pre code").length) {
$("head").append("<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/styles/default.min.css'>");
$.getScript("//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/highlight.min.js", function() {
$("pre code").each(function(a, b) {
hljs.highlightBlock(b)
})
})
};

  • 整段程式碼的意思是,當偵測到文章區塊有 pre 內含 code 標籤時,才載入外掛的 CSS 及 JS 連結,並執行外掛。 
  • 如果是 Blogger 平台,橘色字串可不必變動;其他平台請將 ".post-body"改為文章區塊的 class 或 id。
  • 藍色字串為 Highlight.js 引用的外部 CSS 連結,若使用其他外掛請改為對應的 CSS 連結。
  • 綠色字串為 Highlight.js 引用的外部 JS 連結,若使用其他外掛請改為對應的 JS 連結。
  • 紅色字串為 Highlight.js 的 JS 執行程式,若使用其他外掛請改為對應的 JS 執行內容。



五、進行 Escape 編碼


最後補充一下,展示程式碼的區塊,若使用某些字元例如 <>,會被當成 HTML 標籤的一部份來解析,導致部分程式碼無法顯示。

因此展示用的程式碼務必先經過 Escape 編碼,可利用這個線上工具「Replace special characters with HTML Entities」來處理,就不會有問題了。


更多網頁技巧相關文章:

Blogger 文章分類﹍樹狀標籤 V2.0 -- 安裝懶人包

$
0
0
blogger-tree-label-v2-Blogger 文章分類﹍樹狀標籤 V2.0 -- 安裝懶人包多層樹狀標籤」是本站最熱門的 Blogger 工具,不過安裝、使用有問題而留言提問的數量,也是最多的。原因可能是安裝方式比較複雜,沒那麼容易一次成功。

這次 V2 改版使用了懶人包的安裝方式,相信可以大幅減少出錯的機率。同時改版最大的不同是加入「切換摘要及標題模式」,這個許多站長想要的功能。

不過也許多數站長只需要單純的樹狀標籤功能,因此決定將「切換摘要及標題模式」功能以另外的版本號發佈,區別如下:


以下先介紹改版的特點、修正的部分,想要直接安裝懶人包請直接跳到「二、準備動作」。

(圖片出處: pixabay.com)


一、特點


V2.0 版的效果大致如下:

tree-label-v2-demo-Blogger 文章分類﹍樹狀標籤 V2.0 -- 安裝懶人包


1. 修正功能

舊版留言提出了不少狀況,以下是新版改善的部分:

  • 舊版的標籤名稱若使用 "全形符號"或 "特殊字元",有可能讓程式執行錯誤;新版修正了這個現象。
  • 舊版只能顯示樹狀標籤,也就是 "AAA-BBB"這樣的階層格式;新版也能顯示一般非樹狀的標籤名稱。
  • 舊版需要在範本中修改原始碼,有可能找不到位置或改錯地方;新版只要直接新增程式碼就好,比較簡單。


2. 新增功能

  • 如果熟悉 CSS,新版可以自訂所有的版面樣式。
  • 最上方新增「導航欄位」
  • 導航欄位可選擇加入「切換摘要及標題模式」的功能


二、準備動作


若曾安裝舊版的話,請先刪除舊版程式碼。請務必做完以下三個動作,再開始安裝程式碼:

1. 設定標籤小工具

若沒安裝過「標籤」小工具的話,可到後台 → 版面配置 → 新增一個「標籤」小工具 → 填入標題後,如下圖:

tree-label-v2-setting-Blogger 文章分類﹍樹狀標籤 V2.0 -- 安裝懶人包

將紅框處分別勾選 "按字母排序"、"清單"、"顯示每個標籤的文章數"。

如果有某些標籤不想顯示出來,第一個選項可改為「選取的標籤」


2. 找出標籤小工具的 ID

到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋「標籤」小工具的標題名稱,例如我設定為 "分類":

tree-label-v2-widget-id-Blogger 文章分類﹍樹狀標籤 V2.0 -- 安裝懶人包

如上圖,我的標題名稱 "分類",同一行紅框處的 ID 字串為 "Label1",請記下你的 ID 字串。


3. 設定文章標籤

請先將部落格所有文章的標籤,改為樹狀標籤的格式。例如原本的標籤名稱為 "CCC",請改成 "AAA-BBB-CCC"這樣的形式。

tree-label-Blogger 文章分類﹍樹狀標籤 V2.0 -- 安裝懶人包

上圖這篇文章原本的標籤名稱為 "多層樹狀標籤",現在改為四層標籤,大分類名稱為 "電腦",其餘請見圖中說明。

若沒事先為文章設定樹狀標籤的話,那麼這個工具將無法顯示階層分類的效果。



三、安裝程式碼


在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

1. JQUERY + CSS

請到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋 </head>這個字串,找到後在此字串的前一行,插入以下程式碼:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<style>
/*樹狀標籤 V2*/
#Label1 {
display: none;
}

#tl2_main,
#tl2_nav {
font-size: 13px;
font-weight: bold;
}

#tl2_nav {
background-color: #eee;
margin-bottom: 10px;
padding: 3px;
}

#tl2_nav a {
display: inline-block;
box-sizing: border-box;
width: 50%;
text-align: center;
border-left: 1px dashed #aaa;
}

#tl2_nav a:first-child {
border-left: 0;
}

#tl2_nav a,
#tl2_main a {
text-decoration: none;
}

#tl2_main img {
vertical-align: middle;
}

.tl2_category {
margin-top: 2px;
}

a.tl2_catText {
}

.tl2_subArea {
margin: 0 0 5px 10px;
}

.tl2_label {
margin-left: 5px;
}
</style>

第一行綠色字串可參考「引用 jQuery 的注意事項」,檢查範本是否已安裝過 jQuery,如果已經安裝過請刪除此行,以免重複安裝。

紅色字串 "Label1"請改為「二、準備動作」→「2. 找出標籤小工具的 ID」→ 自己的 ID 字串

如果熟悉 CSS,可自行修改其餘 CSS 參數。


2. 安裝主程式

接著請搜尋 </body>這個字串,找到後在此字串的前一行,插入以下程式碼:


以下參數修改請參照以上程式碼行號:

E:紅色字串請改為自己的標籤小工具 ID,也就是前面「二、準備動作」→「2. 找出標籤小工具的 ID」→ 自己的 ID 字串

F:最重要的設定,這裡設定了所有要顯示出來的樹狀標籤 "大分類"字串,請參考綠色字串的說明

G:預設會打開的標籤層數

H:預設大分類、次分類會顯示文章數

I~K:預設使用的開合圖示、標籤圖示,也可使用圖檔

L~M:導航欄使用的 "展開"、"收合"提示圖示及文字,也可使用圖檔


存檔後即可看到效果,也可參考本站側邊欄最上方的效果。



四、相關工具


使用這個樹狀標籤後,也建議順便參考以下相關的使用技巧或工具:

1. 批次修改標籤

如果網站有大量文章需要批次修改標籤,建議參考這篇文章,以避免 Blogger 操作上的一個大 Bug:



2. 簡化樹狀標籤

如果覺得樹狀標籤格式太長,版面不太好看,建議安裝以下這個工具:


使用前的樹狀標籤版面大致是這樣:

blogger-tree-label-simplify-1


使用後的樹狀標籤,改以真實標籤名稱顯示,讓版面精簡:

blogger-tree-label-simplify-2



五、常見 FAQ


發問前建議先檢視以下常見 FAQ,若不在下列事項,留言請附上網址方便檢視異常狀況。

Q1: 為何安裝完畢後,無法顯示樹狀標籤?

Ans: 請一一檢視是否完成以下動作:

  1. 文章的標籤是否已經設定為樹狀標籤的格式 →「二、準備動作」→「3. 設定文章標籤」
  2. 標籤小工具是否正確設定 →「二、準備動作」→「1. 設定標籤小工具」
  3. 程式碼 F 行是否設定了正確的大分類名稱
  4. 請參考「官方文件」,標籤名稱不要使用這些符號:&<>@!+,#
  5. 請檢查是否使用了非主流的瀏覽器,複製的的程式碼包含了行號 A、B、C...,這樣程式是無法執行的。請使用本站建議的瀏覽器 Chrome、Firefox、Opera 等複製程式碼,就沒問題了。


Q2: 標籤顯示可以排序嗎?

Ans: 英數可以排序,但中文用 js 是無法排序的。可在次分類自行加上英數符號來達到排序效果,例如 "1.本家"、"2.分家",或 "A.本家"、"B.分家"類似這樣。


Q3: 外表看起來沒問題,但是要打開收合的分類會一直縮回去,根本來不及點?

Ans: 這是舊版讀者的留言,並自行找到問題所在:「我原本使用chrome,後來發現IE很正常,chrome 改用無痕模式試,結果沒問題,一個一個試插件,發現是Adblock Pro這個插件的問題,必須整個關閉才會正常,就算加到例外問題也還是存在,所以我沒問題了」

另外若是瀏覽器裝了其他外掛、網站裝了其他外掛、或是非官方範本,都有可能跟這個工具相衝突,建議自行一一移除外掛,來找出可能導致衝突的外掛程式。


更多實用工具:

Blogger 樹狀標籤 V2.1﹍切換標題模式

$
0
0
blogger-tree-label-v2-title-mode-Blogger 樹狀標籤 V2.1﹍切換標題模式Blogger 樹狀標籤 V2.0」是安裝懶人包,適合新手安裝。本篇 V2.1 版加入了「切換標題模式」的功能,安裝上要多幾個步驟,建議使用 Blogger 一段時間以後再嘗試安裝。

以下先簡單介紹 V2.1 版的功能,想要直接安裝跳到「二、準備動作」。

(圖片出處: pixabay.com)


一、功能介紹


V2.1 版的效果大致如下:

blogger-tree-label-v2-title-mode-demo-Blogger 樹狀標籤 V2.1﹍切換標題模式

1. 基本功能

V2.x 版的修正功能及新增功能,在「Blogger 樹狀標籤 V2.0」有詳細的說明,這裡不再複述。


2. 切換標題模式

在正常的情況下,按下標籤連結的頁面,會跟部落格首頁一樣,顯示文章摘要(或封面縮圖)。不過站在站長本身的角度,自己寫了哪些內容都是瞭如指掌,那麼會希望標籤頁面只顯示文章標題就好,以加快搜尋文章的速度。

V2.1 版比 V2.0 多了「切換標題模式」的功能,將 "摘要模式"、"標題模式"這兩個按鈕圖示整合到標籤上方的導航欄位,並使用 cookie 記憶按鈕狀態,如此站長可選擇使用 "標題模式",而訪客則使用預設的 "摘要模式",達到雙贏、各取所需的目的。

想先測試切換兩種模式的效果,可前往展示頁面:




二、準備動作


這部分的內容跟 V2.0 一樣,純粹複製貼上,如果已經安裝過 V2.0 的話,可不必再做這裡的動作:

1. 設定標籤小工具

若沒安裝過「標籤」小工具的話,可到後台 → 版面配置 → 新增一個「標籤」小工具 → 填入標題後,如下圖:

tree-label-v2-setting-Blogger 文章分類﹍樹狀標籤 V2.0 -- 安裝懶人包

將紅框處分別勾選 "按字母排序"、"清單"、"顯示每個標籤的文章數"。

如果有某些標籤不想顯示出來,第一個選項可改為「選取的標籤」


2. 找出標籤小工具的 ID

到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋「標籤」小工具的標題名稱,例如我設定為 "分類":

tree-label-v2-widget-id-Blogger 文章分類﹍樹狀標籤 V2.0 -- 安裝懶人包

如上圖,我的標題名稱 "分類",同一行紅框處的 ID 字串為 "Label1",請記下你的 ID 字串。


3. 設定文章標籤

請先將部落格所有文章的標籤,改為樹狀標籤的格式。例如原本的標籤名稱為 "CCC",請改成 "AAA-BBB-CCC"這樣的形式。

tree-label-Blogger 文章分類﹍樹狀標籤 V2.0 -- 安裝懶人包

上圖這篇文章原本的標籤名稱為 "多層樹狀標籤",現在改為四層標籤,大分類名稱為 "電腦",其餘請見圖中說明。

若沒事先為文章設定樹狀標籤的話,那麼這個工具將無法顯示階層分類的效果。



三、安裝程式碼


如果曾安裝過舊版或 V2.0 的話,請先完整移除先前的程式碼。

在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

1. JQUERY + CSS

請到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋 </head>這個字串,找到後在此字串的前一行,插入以下程式碼:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<style>
/*樹狀標籤 V2*/
#Label1 {
display: none;
}

#tl2_main,
#tl2_nav {
font-size: 13px;
font-weight: bold;
}

#tl2_nav {
background-color: #eee;
margin-bottom: 10px;
padding: 3px;
}

#tl2_nav a {
display: inline-block;
box-sizing: border-box;
width: 25%;
text-align: center;
border-left: 1px dashed #aaa;
}

#tl2_nav a:first-child {
border-left: 0;
}

#tl2_nav a,
#tl2_main a {
text-decoration: none;
}

#tl2_main img {
vertical-align: middle;
}

.tl2_category {
margin-top: 2px;
}

a.tl2_catText {
}

.tl2_subArea {
margin: 0 0 5px 10px;
}

.tl2_label {
margin-left: 5px;
}

.tl2TOC_caption {
font-size: 20px;
}

#tl2TOC ol {
padding-right: 0;
}

#tl2TOC li {
padding: 5px 0;
border-bottom: 1px solid #eee;
text-indent: 0;
}

#tl2TOC a,
#tl2TOC_info a {
text-decoration: none;
}

#tl2TOC_info {
text-align: left;
font-size: 11px;
font-family: arial, sans-serif;
padding-top: 5px;
border-top: 1px solid #e9eaed;
}

#tl2TOC_info a {
color: #ccc;
}

.tl2TOC_title {
display: inline-block;
font-weight: bold;
width: calc(100% - 100px);
padding-right: 10px;
vertical-align: top;
}

#tl2TOC_postIndex {
margin: 5px 0;
text-align: center;
}

#tl2TOC_switchPage {
background-color: #eee;
margin: 5px 0;
padding: 3px;
}

#tl2TOC_switchPage a,
#tl2TOC_switchPage span {
box-sizing: border-box;
display: inline-block;
width: 50%;
padding: 0;
border-left: 1px dashed #aaa;
text-align: center;
}

#tl2TOC_switchPage a:hover,
{
background-color: rgba(100, 100, 100, 0.1);
}

#tl2TOC_switchPage a:first-child,
#tl2TOC_switchPage span:first-child {
border-left: 0;
}
</style>

第一行綠色字串可參考「引用 jQuery 的注意事項」,檢查範本是否已安裝過 jQuery,如果已經安裝過請刪除此行,以免重複安裝。

紅色字串 "Label1"請改為「二、準備動作」→「2. 找出標籤小工具的 ID」→ 自己的 ID 字串

如果熟悉 CSS,可自行修改其餘 CSS 參數。


2. 安裝主程式

接著請搜尋 </body>這個字串,找到後在此字串的前一行,插入以下程式碼:


以下參數修改請參照以上程式碼行號:

E:紅色字串請改為自己的標籤小工具 ID,也就是前面「二、準備動作」→「2. 找出標籤小工具的 ID」→ 自己的 ID 字串

F:最重要的設定,這裡設定了所有要顯示出來的樹狀標籤 "大分類"字串,請參考綠色字串的說明

G:預設會打開的標籤層數

H:預設大分類、次分類會顯示文章數

I~K:預設使用的開合圖示、標籤圖示,也可使用圖檔

L~O:導航欄使用的各種提示圖示及文字,也可使用圖檔

P:建議使用預設值 0 就好

Q:標題模式下,每頁顯示的文章數

R~U:標題模式下,各種預設圖示及字串

X:由於「Google Drive 關閉外連」功能,綠色字串的 JS 網址是無法外連的,請參照「WFU BLOG 外連 JS 變更及操作說明」,將這個連結下載後存成 JS 檔,上傳到自己的空間或 Dropbox。取得自己的 JS 檔外連後,置換本行的綠色網址字串。

存檔後可看到效果,也可參考本站側邊欄最上方的效果。



四、相關工具


使用這個樹狀標籤後,也建議順便參考以下相關的使用技巧或工具:

1. 批次修改標籤

如果網站有大量文章需要批次修改標籤,建議參考這篇文章,以避免 Blogger 操作上的一個大 Bug:



2. 簡化樹狀標籤

如果覺得樹狀標籤格式太長,版面不太好看,建議安裝以下這個工具:


使用前的樹狀標籤版面大致是這樣:

blogger-tree-label-simplify-1


使用後的樹狀標籤,改以真實標籤名稱顯示,讓版面精簡:

blogger-tree-label-simplify-2



五、常見 FAQ


發問前建議先檢視以下常見 FAQ,若不在下列事項,留言請附上網址方便檢視異常狀況。

Q1: 為何安裝完畢後,無法顯示樹狀標籤?

Ans: 請一一檢視是否完成以下動作:

  1. 文章的標籤是否已經設定為樹狀標籤的格式 →「二、準備動作」→「3. 設定文章標籤」
  2. 標籤小工具是否正確設定 →「二、準備動作」→「1. 設定標籤小工具」
  3. 程式碼 F 行是否設定了正確的大分類名稱
  4. 請參考「官方文件」,標籤名稱不要使用這些符號:&<>@!+,#
  5. 請檢查是否使用了非主流的瀏覽器,複製的的程式碼包含了行號 A、B、C...,這樣程式是無法執行的。請使用本站建議的瀏覽器 Chrome、Firefox、Opera 等複製程式碼,就沒問題了。


Q2: 標籤顯示可以排序嗎?

Ans: 英數可以排序,但中文用 js 是無法排序的。可在次分類自行加上英數符號來達到排序效果,例如 "1.本家"、"2.分家",或 "A.本家"、"B.分家"類似這樣。


Q3: 外表看起來沒問題,但是要打開收合的分類會一直縮回去,根本來不及點?

Ans: 這是舊版讀者的留言,並自行找到問題所在:「我原本使用chrome,後來發現IE很正常,chrome 改用無痕模式試,結果沒問題,一個一個試插件,發現是Adblock Pro這個插件的問題,必須整個關閉才會正常,就算加到例外問題也還是存在,所以我沒問題了」

另外若是瀏覽器裝了其他外掛、網站裝了其他外掛、或是非官方範本,都有可能跟這個工具相衝突,建議自行一一移除外掛,來找出可能導致衝突的外掛程式。


更多實用工具:

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

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

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

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

(圖片出處: pickupimage.com)


一、Blogger 範本設計工具


1. 變更版面

最簡單的方法為,使用官方提供的工具就能調整版面,不必動到任何程式碼。

在後台 → 範本 → 自訂 → 進入「Blogger 範本設計工具」 → 版面配置

blogger-template-full-screen-width-讓 Blogger 文章頁面以最大寬度呈現(隱藏側邊欄)

如上圖紅框的選項,這個配置完全沒有側邊欄,選擇這個版面就行了,其他配置都是有側邊欄的。


2. 變更寬度

選擇沒有側邊欄的版面後,設定部落格寬度也是很重要的一件事。

Blogger 預設的版面寬度,大致是 960px 左右,因為在以前的年代,螢幕主流尺寸是 17",解析度以 1024 x 768 為大宗,網頁寬度使用 960px 在可視範圍內是安全的選擇。

但現在寬螢幕早已是主流,使用者多的是用 1920 x 1080 這種解析度,幾乎可以無視 1024 x 768 這個尺寸的訪客(這種螢幕殘存的比例應該低於 1%),合理的考量是往上一個等級、照顧到使用 1280 這個螢幕寬度的訪客就好

過去有不少讀者詢問到 "網頁寬度應該設定為多少"這樣的問題,因為很想加大寬度、在網頁擺放更高解析度的大圖,但又怕超出使用者的螢幕範圍。

藉這個機會一起回答,在以上說明的前提下,也就是在 1280 這個寬度的螢幕還沒被淘汰之前,目前建議我們網站的寬度可以最多使用到 1260px 寬 (20px 留邊)

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

操作方法如上圖,在「Blogger 範本設計工具」選擇「調整寬度」,即可調整網頁的寬度配置。

如果有使用側邊欄的話,記得調整為 330px 以上,這樣放 Adsense 廣告 300x600 這個尺寸的效果會比較好。

提醒一下,非官方範本、或範本有修改過的話,不一定能在「Blogger 範本設計工具」使用這個功能。



二、修改文章頁面 CSS


「一、Blogger 範本設計工具」的修改方式,會讓整個網站的所有頁面,都沒有側邊欄。而文章開頭的提問,是希望 "在文章頁面時,才隱藏側邊欄"。

這樣的話,只能使用 Blogger 判斷式來處理,讓文章頁面的側邊欄消失,而其他頁面(如首頁、搜尋頁面、靜態頁面等等),側邊欄仍然存在,請按照以下的步驟進行。

在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

請到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋 </head>這個字串,找到後在此字串的前一行,插入以下程式碼:

<!--文章頁面隱藏側邊欄-->
<b:if cond='data:blog.pageType == "item"'>
<style>
.columns, .fauxcolumn-center-outer {
padding-left: 0 !important;
padding-right: 0 !important;
}
.fauxcolumn-left-outer, .fauxcolumn-right-outer, .column-left-outer, .column-right-outer {
display:none !important;
}
</style>
</b:if>

存檔後即可看到效果,首頁仍然看得到側邊欄,進入文章頁面才會關閉側邊欄。

不過需要注意的是,非官方範本不一定能套用以上的 CSS,這並非萬用的程式碼,如果熟悉 CSS 的話可自行調整。



三、特定文章頁面才隱藏側邊欄


過去曾寫了一篇「讓 Blogger 有快速載入的展示頁面」,用途跟本篇主題有些相關。

這個工具的構想在於,只有特定的文章頁面,才需要將文章區塊的寬度延伸到最大,可能是 "DEMO 頁面" (例如「快速回到頂端(Go Top)按鈕」)、或是 "公告頁面" (例如「本站服務項目」)。

如果只有特定文章才想隱藏側邊欄的話,那麼就可使用這個小工具,讓這篇文章的版面看起來特別不一樣。


更多 Blogger 相關技巧:

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

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

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

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

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

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

(圖片出處: pixabay.com)


一、舊方法為何失效?


1. Google 表單的侷限

Google 表單在商業上的用途很廣,這篇「利用Google Doc製作線上諮詢表單」舉了很好的例子:

google-form-example-Google 表單自訂 CSS 版面樣式教學

如上圖,紅框處需要填入的資料與表格形式,依照 Google 表單現有的功能是做不到的。

同時,我也看到很多其他的需求,例如 "想要使用超連結"、"改字型"、"改顏色"等等,這都是受到侷限的。

也因為如此,這篇文章提到了國外的一個服務「GOOGLE FORMS TOOL」,可以分解 Google 表單的 HTML/CSS,讓使用者能夠據以自訂 HTML/CSS,將版面改成任何想要的形式。

又例如常見的「線上訂票」表單形式,如果使用內嵌的 Google 表單,就很難展現網站的專業度了


2. 舊方法失效

其實不只上面這篇文章提供的服務,國外許多論壇或相關文章,都有提到一個方法,也就是複製原本 Google 表單的 HTML 碼之中,從 <form></form>的內容,再將這段程式碼,修改成自訂的版面樣式。

原理大致如此,總之就是借 Google 表單的原始碼來用,而這個方法一直是有效的。

不過最近這招開始沒作用了,去年 Google 表單出新版時,算是推廣階段、不強迫使用,但前陣子 Google 已經強制將所有新產生的表單,都升級為新版 Google 表單。

由於 Google 將程式碼重新寫過,我相信目前台面上沒有任何方法可以自訂 Google 表單的樣式,雖然 WP 有外掛可做到這件事,但隨著 Google 表單的強制升級,這些外掛也將沒有作用。


3. 新版 2016 表單

我做了不少測試,也包括使用幾年前產生的舊 Google 表單檔案,但就算將表單 "整個頁面的原始碼"全部複製,你仍然會發現,連「提交按鈕」都按不下去(無法執行)。

這代表什麼意義呢?很明顯的,Google 決定不讓使用者修改原始碼

我的想法是,在 Google 的世界頂尖工程師面前,我們一般人能做出什麼動作,他們不會不清楚,那麼是否防堵此事,端看要不要而已。如果 Google 真的打算不開放任何後門,那麼使用者可以早早打消竄改原始碼的念頭,會比較節省時間。



二、自製表單原理


既然 Google 不給改原始碼,那麼我們就老實一點,程式碼自己寫吧!以下大致說明一下自製 Google 表單的原理。

1. 自製 HTML/CSS

由於複製原始碼的把戲失效了,現在我們得自己刻出所有表單的 HTML 及 CSS。如果讀者熟悉 INPUTLABEL等等這幾個標籤,相信自己完成一份表單是沒問題的。

後面會提供一份表單範例,如果會看網頁原始碼、或熟悉「Chrome 開發人員工具」的話,可以直接拿範例的 HTML / CSS 來修改。


2. 提交表單

這是最困難的一部份,首先你需要熟悉 JS / JQUERY,才有辦法操作提交表單的動作




三、JS 處理流程


有了上述概念後,接下來說明如何用 JS 來提交表單。

1. 取得答案

首先得收集自製表單中,每道題目的答案。假設第一道題目的 HTML 碼如下:

<input class="q1" type="text"/>

用 JQUERY 取得填入字串的語法大致如下:

$("input.q1").val();


2. 監控傳送按鈕

收集完所有答案的字串後,我們必須監控「傳送」按鈕的點擊動作。假設「傳送」按鈕的 HTML 碼下:

<input class="submit" type="button" value="傳送"/>

用 JQUERY 監控這顆按鈕的語法大致如下:

$("input.submit").click(function(){ // 填入點擊後要執行的動作 })


3. 傳送表單網址

上面的程式碼「填入點擊後要執行的動作」,就是將所有的答案,傳送到 Google 表單的網址,可參考以下的範例來修改:

$.getScript("https://docs.google.com/forms/d/表單ID/formResponse?entry.第1個問題的ID=第1個問題的答案&entry.第2個問題的ID=第2個問題的答案");
以上紅、綠、藍字串修改的原理,在相關連結的文章內容都有詳細說明。



四、原始 Google 表單範例


以下提供自製表單的範例,先附上內嵌 Google 表單的原始效果:







五、自製表單範例


1. 表單效果
  • 將原本的內嵌表單搬到部落格網頁
  • 填完表後,仍然停留在目前的頁面,而非跳到 Google 表單結束畫面
  • 若填入 Email,系統會立即寄出彙整圖表,可看到所有的問卷統計結果
  • 試算表不儲存 Email 資料,可安心填寫 Email 測試

以下為表單範例的內容:


BLOGGER 知名度調查問卷



2. 填表結果

下面這個試算表,可以看到填表後的紀錄。更新速度沒有那麼即時,也許是幾分鐘後,不過對照這些填表紀錄,就知道 EMAIL 不會被記錄下來。



如前所述,如果熟悉「Chrome 開發人員工具」的話,可以檢視本文表單範例的 HTML/CSS,就知道如何調整修改了。


更多 Google Drive 實用技巧:

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

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

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

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



一、Google 表單外掛


有個現成的外掛「Form Publisher」功能滿不錯的,將填表結果轉換成 PDF 檔正是其功能之一,同時也能將 PDF 檔寄給填表者。

由於這個外掛是英文介面,其實不是很容易上手,操作說明可參考這篇「用Google Forms做簡單的通報系統」。

如果不是太複雜的表單,或是沒有太特殊的用途,花點時間研究,這個外掛應該是可以處理大部分的需求。



二、Form Publisher 無法處理的狀況


使用者的需求什麼都有可能,有些狀況還是只能寫 script 來處理,大致列幾種這個外掛做不到的情境:

  • 填表答案為多選題時(核選方塊),外掛無法將個別答案以不同欄位顯示。
  • 寄填表資料的摘要統計分析圖表
  • 指定時間才寄出 EMAIL 通知

以上比較需要特別說明的是 "指定時間才寄出 EMAIL 通知"這一點,因為填表 Email 通知是有每日額度限制的,一天最多只能寄出 100 封 Email。我看過的案例是,由於填表很踴躍,一天有數百位填表者,結果一下子就超過額度、而無法寄送通知。

對於某類型的問卷,比起寄通知給填表者,可能寄送填表記錄與統計報表給自己,是更為重要的。那麼在這種情況下,我們可以這麼處理:

  • 在試算表中 "插入圖表",統計個別問卷題目的回答
  • 有幾道題目就插入幾個圖表。
  • 設定一天才寄送這些報表一次,就不會超過額度。
  • 將報表存成 PDF 檔,放在 Email 中當成附件。

以下提供範例,來看看如何做到這樣的效果。



三、Google 表單範例


這個範例來自「Google 表單自訂 CSS 版面樣式教學」,看起來是很簡單就能完成的問卷:







四、圖表範例


在儲存回應的試算表中,另外新增一個工作表,利用「插入」→「圖表」,可針對這些題目,個別製作出不同的統計圖表。

以下提供前兩個問題的圖表當範例:







五、程式碼範例


1. 試算表 ID

處理完圖表後,先記下試算表的 ID,如下圖:

google-spreadsheet-id-讓 Google 表單(試算表) 定時寄出 PDF 報表

在存放圖表的 Google 試算表,網址列從 "/d/" ~ "/edit"之間的字串,如上圖反白標示字串,就是試算表 ID,請記下自己的字串。


2. 安裝程式碼

接著從上方選單的「工具」→「指令碼編輯器」,進入下圖畫面:

google-spreadsheet-auto-send-email-2-讓 Google 表單(試算表) 定時寄出 PDF 報表

圖中紅框原本的程式碼請全部清除,置換為以下的程式碼:



以下參數修改請參照以上程式碼行號:

B:改為自己的 Email

C:紅色字串改為前面記下的試算表 ID

D~E:修改信件標題、內容

H:設定 PDF 檔名


3. 設定寄信觸發程序

google-spreadsheet-auto-send-email-3-讓 Google 表單(試算表) 定時寄出 PDF 報表

程式碼設定完畢後,如上圖,先按 A 處的圖示儲存,再按「資源」→「現有專案的啟動程序」,來設定觸發程序。


google-spreadsheet-auto-send-email-4-讓 Google 表單(試算表) 定時寄出 PDF 報表

按下紅框的字串


google-spreadsheet-trigger-讓 Google 表單(試算表) 定時寄出 PDF 報表

如上圖,可以設定多久、何時寄發報表通知給自己。

儲存後會要求授權,全部都同意即可。


4. 測試 Email 及 PDF 效果

若要先看效果,可先在「三、Google 表單範例」,填寫表單、並輸入自己的 Email,就能立即收到含 PDF 附件的圖表效果。

Email 欄位不會被儲存起來,因此可以放心用這個表單來測試效果。



六、小結


本篇的這個小程式,算是非常實用、且相信能有很好的應用。當設計完一份問卷後,不必時常進入 Google Drive,才能檢視最新的問卷填寫狀況;也不用每當有人填寫問卷,就發通知寄給自己,讓自己頻繁地被騷擾

設定指定時段才寄發通知,而且一次就能看到問卷的彙整圖表、及報表數據,這樣事情處理起來有效率多了!


更多 Google 試算表實用技巧:


更多 Google Drive 實用技巧:

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

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

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

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

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



(圖片出處: pexels.com)


一、Blogger 手機版效果


本篇的程式碼適用各種網頁平台,不過 Blogger 的狀況會稍微不同,因此特別說明一下。

1. Blogger 的優點

因為 Blogger 與 Youtube 同為 Google 旗下的產品,相容度還算不錯,基本上在 Blogger 網站內嵌了 Youtube 影片後,在手機版是不會發生破屏的慘狀,保證影片寬度絕對會在手機螢幕範圍之內。

其原理跟「加快 Blogger 行動版圖片載入速度的密技」類似,從 Blogger 後台上傳到 Picasa 圖床的圖片,經設定尺寸後,那麼行動版的圖片,就會自動縮小為 280px 寬,可以大大提升載入網頁的速度。

而 Youtube 影片也是一樣,設定了內嵌 Iframe 的尺寸後,在 Blogger 手機版的畫面,Youtube 也會自動縮小,改以 280px 寬來呈現,所以絕對不會破版。


2. Blogger 的缺點

Youtube 在 Blogger 行動版自動縮小 280px 寬的設計,算是非常貼心,但是還不夠好,因為現在手機螢幕尺寸越來越大,再加上手機螢幕橫躺時,280px 看起來就相當小了,有可能連一半的寬度都不到

因此比較好的設計,是讓 Blogger 行動版的 Youtube 影片,能隨著不同螢幕尺寸、或直立橫躺的狀態,都以符合螢幕寬的尺寸呈現,這也是本篇程式的設計重點。



二、安裝程式碼


在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

1. 安裝 jQuery

請到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋 </head>這個字串,找到後在此字串的前一行,插入以下程式碼:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

可參考「引用 jQuery 的注意事項」,檢查範本是否已安裝過 jQuery,如果已經安裝過請刪除此行,以免重複安裝。


2. 安裝程式碼

接著請搜尋 </body>這個字串,找到後在此字串的前一行,插入以下程式碼:


這個小工具只有 E 行的紅色參數需要修改,通常使用預設值即可。如想要使用不同的的長寬比例,請再自行調整。

想要先看手機上,經過調整的 Youtube 影片效果,可前往展示頁面,記得用手機來看:



更多行動版技巧:


更多 Youtube 相關工具:

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

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

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

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

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

(圖片出處: youtube.com)


一、快速鍵工具


1. 製作原理

Evernote 本身提供了一個全局熱鍵,可以在使用任何其他軟體時,直接進入 Evernote 的搜尋框來搜尋。這個按鍵可以在「工具」→「選項」→「熱鍵」→「在 Evernote 中尋找」來自訂。

那麼我們的任務就是,利用 Hotkeyz 先模擬按下這個自訂的熱鍵,接著自動輸入 "intitle:"這樣的字串,就可解決本文要處理的問題。


2. Hotkeyz 介紹及下載


在進行操作之前,由於本篇使用了比較進階的組合技,如未使用過 Hotkeyz,建議可先閱讀「使用 Hotkeyz 設定連續組合鍵」,這篇提供了很詳細的範例說明,會比較容易上手。



二、快速建設定流程


1. 建立新的熱鍵

執行 Hotkeyz,按下左上角的 New 後,會產生設定框。

evernote-search-title-hotkey-1-迅速搜尋 Evernote 記事標題的技巧﹍自製各種快速鍵

參考上圖 A~D 的順序:

A. 填入方便自己記憶的敘述

B. 按下 Click → Hotkeyz Commands → Multiple Commands

C. 這個位置會自動產生 Multi 這個分頁

D. 游標移到此處,設定自己習慣的熱鍵,例如我使用的是 Alt + 3這個組合鍵,按下這組熱鍵後,輸入框會自動產生 Alt + 3 這樣的字串


evernote-search-title-hotkey-2-迅速搜尋 Evernote 記事標題的技巧﹍自製各種快速鍵

接著按下 Multi 這個分頁,如上圖,按下「Open Multi Command Editor」這個按鈕,來設定要模擬的動作。


2. 模擬呼叫 Evernote

第一個要模擬的動作,是按下 Evernote 的搜尋熱鍵,可在 Evernote 的「工具」→「選項」→「熱鍵」→「在 Evernote 中尋找」,查詢自己的設定。

例如我習慣使用 Alt + 1這個組合鍵,下面將以此來舉例。


evernote-search-title-hotkey-3-迅速搜尋 Evernote 記事標題的技巧﹍自製各種快速鍵

如上圖 A~B 順序:

A. 按下右上角紅框的圖示

B. 產生中央的視窗後,按下 Click → Hotkeyz Commands → Remap Keyboard


evernote-search-title-hotkey-4-迅速搜尋 Evernote 記事標題的技巧﹍自製各種快速鍵

切換到 Parameter 分頁,如上圖 ,輸入以下字串:

[AltD][1][AltU][Pause]
代表的意思為,模擬按下 Alt → 按下 1 → 放開 Alt → 暫停 0.5 秒

如果你使用不同的熱鍵,可參考「使用 Hotkeyz 設定連續組合鍵」,將按鍵組合改成自己在 Evernote 的設定值。


3. 模擬輸入字串

回到「2. 模擬呼叫 Evernote」第一個畫面,同樣按右上角圖示,新增另一個要模擬的動作。

evernote-search-title-hotkey-5-迅速搜尋 Evernote 記事標題的技巧﹍自製各種快速鍵

如上圖紅框,按下 Click → Hotkeyz Commands → Paste Text into any control


evernote-search-title-hotkey-6-迅速搜尋 Evernote 記事標題的技巧﹍自製各種快速鍵

切換到 Parameter 分頁,如上圖,填入以下字串即可:

intitle:

完成以上流程後,將來只要按下 Alt + 3這組熱鍵,就會自動呼叫 Evernote 的搜尋框,並自動填入 "intitle:"字串,方便我們搜尋標題了。



三、其他應用


如果你覺得這樣的技巧很好用的話,Evernote 還有很多輔助篩選的字串,可參考 +esor huang 的「Evernote 搜尋語法十大進階技巧教學」,瞭解各種情境下、有哪些運用方式。

例如你常常需要搜尋有哪些待辦事項未完成,使用到 "todo:false"這個篩選字串的頻率很高的話,就可以利用本文的技巧,為這個功能設定一組快速鍵(建議額外再多模擬一個按下 Enter 的動作)。

如此一來,無論你在執行任何程式、Evernote 還處於縮小的狀態下,只要隨時想查詢哪些待辦事項未完成,就可按下這組熱鍵,馬上就能看到查詢結果了。


更多 Evernote 使用技巧:

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

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

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

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

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

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

(圖片出處: pixabay.com)


一、製作原理


1. 實際案例

本站官方留言板的注意事項有這兩點:

  • 提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
  • 詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」

第一點需要附網址的原因可參考「提問注意事項」。第二點的原因可參考「如何使用本站」→「四、留言及討論區」→「5. 回答原則」。

其實就算有註明留言注意事項,相信站長們都知道,不是每個訪客都會認真去看說明,因此我決定把這兩點設計到表單之中,等於強制訪客必須先閱讀注意事項及附上相關資訊,這樣可以大大縮短彼此溝通的時間。


2. 自製 Google 表單

使用內嵌的 Google 表單語法,會有外框及捲軸的效果。為了讓版面美觀,自製 Google 表單的原理請參考「Google 表單自訂 CSS 版面樣式教學」→「一、舊方法為何失效?」→「2. 舊方法失效」。

這裡指的 "舊方法失效"代表舊方法在 "新版表單"失效,但舊版表單還是可以使用舊方法,因此本篇來說明舊表單的製作流程

但最重要的是,要先有個舊表單的檔案


3. 表單範例

下面的表單,是根據「1. 實際案例」做出來的效果,之後的流程將以這個表單來說明:




二、表單製作流程


1. 舊表單檔案

如前所述,請先找到一個 2015 年以前產生的舊表單檔案,然後可以用 "建立副本"的方式產生多個舊表單。

2016.6.24 補充:留言 #1 +陳俊慶 提供將新版表單改回舊版的技巧,在右下角的問號「?」圖示,有 "返回舊版表單"的選項。


2. 製作表單內容

根據上一點產生的舊表單副本檔案,參考「製作表單格式」的流程,來設計自己的表單內容。


3. 自動寄信功能

為了讓訪客填表後,自己能收到填寫內容的通知,繼續按照「讓新版 Google 表單(試算表)能自動寄信﹍(2) 安裝程式碼」的流程,來安裝相關程式,並修改相關的參數

需要注意的是,這個程式原本的用途是 "將填表內容寄給填表者",現在要改為 "將填表內容寄給自己"的話,請務必參考原文修改程式碼的說明:

將 W 行的 notifyEmail 置換為 adminEmail

這樣自己就能收到 Email 通知了。



三、將 Google 表單放到網站


如果不在意版面效果的話,最簡單的方法,就是直接取得表單的內嵌程式碼,放到網站自訂的位置即可。

想要修改版面效果的話,請參考以下流程。

1. Google 表單原始碼

google-form-replace-blogger-contact-form-1-使用 Google 表單(自訂樣式) 取代 Blogger 聯絡表單

進入自己的表單 → 按下「查看即時表單」


google-form-replace-blogger-contact-form-2-使用 Google 表單(自訂樣式) 取代 Blogger 聯絡表單

按右鍵 → 檢視網頁原始碼

將原始碼之中,<form>一直到 </form>的所有 HTML 碼全部複製起來,貼到自己網頁上指定的位置即可。



2. 安裝到側邊欄

如果要放在 Blogger 側邊欄,可以在後台版面配置新增「HTML / Javascript」小工具,然後把剛剛複製的內容貼過來即可。

效果大致像這樣:

google-form-replace-blogger-contact-form-3-使用 Google 表單(自訂樣式) 取代 Blogger 聯絡表單



四、補充


直接將 Google 表單原始碼複製過來,版面樣式不會像上圖這樣,需要自行調整 CSS,以及刪除一些系統預設的字串

因此如開頭所提,本篇的效果建議有 HTML / CSS 的概念,再來修改版面,比較能有滿意的效果。

如果會使用瀏覽器開發人員工具的話,也可看我的表單原始碼,相信能瞭解如何自行修改。


更多 Blogger 官方工具使用技巧:


更多 Google Drive 相關技巧:

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

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

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

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



一、北都傳單方案


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

上圖才是傳單的優惠內容:
  • 年繳 3500
  • 多送一個月,也就是繳 12 個月、看 13 個月
  • 可收看所有付費頻道
  • 機上盒有預約錄影的功能


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

上圖是北都的所有頻道一覽,包含各種付費頻道。基本上家人習慣看的頻道,都在都在 80 台以前,因此後面的台數雖然比目前的業者少,倒是無所謂。


不過必須注意的是,雖然北都的服務區域包含台北市 12 個行政區,但目前完成線路鋪設的區域是這些:

  • 信義區
  • 大安區
  • 中山區
  • 松山區
  • 中正區

而且不是每個里都完成,必須到官網的「已開播區里」查詢,或打客服確認。



二、網友對策


其實幾個月前就在 PTT 看到這則討論串「第四台價格 心得分享」,大意就是說,拿到北都的傳單 "3500 看兩年",於是原 PO 打去原本第四台業者表示要退租,結果為了保住收視戶,原業者馬上就跟進了

由於時間點不一樣,現在當然沒有這樣的價格了,但是可以確定的是,對第四台業者而言,收視戶的數量是遠遠比 "錢"還重要的!

目前我拿到的傳單是 "3500 看 13 個月",但也不過是三個月前,第四台業者連 "3500 看兩年"也能馬上答應,就可證明為了搶客戶, "錢"是不看在眼裡的。

因此任何的削價競爭,原業者都會買單!那麼我只要拿傳單的優惠方案,跟原業者談,就能達到我節省收視費用的目的了。



三、北都客服的承諾


擬定策略之後,於是我先撥了電話給北都客服,問問還有沒有更優惠的專案,準備拿來跟原業者殺價。

不過得到的答案是沒有,他們表示如果是大樓的用戶,數量大的話才比較能談價格。

雖然沒有拿到更好的價格,不過也順便從客服得到了以下訊息:

  • 兩年內都是一年 3500 的價格
  • 兩年後會根據招收到的收視戶數量,調整價格,上限為 10%
  • 若收視戶數量夠多的話,不一定調漲價格
  • 傳單上的優惠項目,不會取消,將來依然可看這些收費頻道(限時成人頻道除外)

接下來,就是拿這些條件,跟原第四台業者談了。

不過,在撥打電話之前,忽然想起這幾年來發生的事...



四、MOD 替代方案


其實一直以來,總是對每年 6000 的費用覺得太貴,因為看電視的時間不多,轉來轉去也就常看的那幾個頻道,為何第四台不能選擇只看基本頻道,實施分段收費呢

於是每年到了第四台繳費期間,就研究一下 MOD 的頻道,可惜這些年各種方案看下來,第四台常看的那些頻道在 MOD 永遠找不到

會造成這種現象的背後原因,正是第四台被業者(聯合)壟斷,嚴格說可以算是 "獨佔"事業,根本沒有競爭。

在沒有競爭的情況下,第四台業者足以威脅特定的頻道商,不准在 MOD 上播放,造成使用者沒有足夠的誘因跳槽到 MOD,因為看不到想要的頻道,只好被迫一年繳 6000 繼續看大雜匯的第四台。



五、2K 及 4K 螢幕


第四台的壟斷還帶來什麼影響呢?

我想起了日、韓早已迎接 2K、4K 解析度的電視節目,而我們台灣呢,早在 2004~2007 面板五虎的年代,就在喊電視全面數位化,結果前一兩年才開始全面汰換為數位機上盒,訊號數位化整整晚了快十年。

我們台灣是剛完成數位化、頻道商想辦法升級成 HD 頻道,跟本看不到日韓 2K、4K 的車尾燈,最大的原因就是第四台這個環境沒有競爭,壟斷的業者餵什麼、使用者就只能吃什麼,訂價多少都只能乖乖吞下去。

在這樣的背景下,業者有必要提升收視品質及環境嗎?就算什麼都不做,業者照樣可以賺大錢啊!

為了提升台灣的競爭力、讓台灣進步,我想,有必要幫第四台創造出一個競爭的環境,至少這是個值得嘗試的起點。



六、第四台退租流程


因此,我打消了跟第四台原業者談判的念頭,我會希望新的業者先能站起來,不要一開賽就被打趴在地上。讓他們彼此競爭,用互相提升收視品質及環境來贏得收視戶,長遠看這才是雙贏之道。

因此我打給原業者後,直接表明要退租。

一切都在預料之中,服務人員會詢問原因,並問北都提供什麼價位、優惠方案,他們全部都會比照辦理。

因為早做了決定,直接跟服務人員說已經請北都來裝機,請他幫我辦退租即可。

不過沒料到的是,第四台業者還有一個大絕招,對方表明無法線上辦理,要我自行到公司地址辦理,而且要帶機上盒、遙控器、電源線、連接線...等,以及證件。

這招真的厲害!我相信如果是我的家人來打這通電話,一想到還要這麼麻煩,必定是當場接受他們的條件,直接續約了。



七、後記


頂新事件中,有多少人會一開始抵制、然後又因為林鳳營買一送一的特價而去購買?又有多少人願意不畏麻煩、到賣場執行「秒買秒退」行動?

如果是對的事,我會堅持做下去,因此退租這件小小的事,不會成為我的麻煩

然而我想,北都能不能存活下去,可能取決於 "不畏麻煩"的使用者有多少。

如果打破壟斷、營造競爭環境會對將來更好,是一件可以被認同的事,我期待會有越來越多不畏麻煩的人。

(最終,期待 MOD 也能爭取到某些頻道,加入競爭的行列!)


更多數位生活相關文章:
Viewing all 571 articles
Browse latest View live