2015年4月30日

Blogger 多層下拉選單實作

blogger-drop-down-menu-multiple-level前陣子處理一個案子,需要在 Blogger 安裝多層下拉選單,說真的這不是一個輕鬆的任務,因此值得記錄一下過程,減少日後重新摸索的時間。

一般而言,如果像本站屬於主題集中、文章數幾百篇的規模,應該使用單層的下拉選單就足夠,太多層的下拉選單對於讀者而言,其實在尋找資訊時不是那麼直覺與方便。可考慮使用「Blogger下拉選單安裝懶人包」,不必瞭解語法也能安裝;如果網站文章需要大量的分類項目,也可另外使用「多層樹狀標籤」。

不過如果網站的主題多元,或是大型購物網站,或是大型旅遊部落格,或是文章多到像「電腦玩物」這樣的規模(數千篇),那還真的需要「多層下拉選單」來輔助導覽。

在 Blogger 裝多層下拉選單的難處不少,會進行簡單說明,想先看效果請點這個以下網頁:


2015年4月27日

Blogger 自訂行動版範本實作﹍(2) 文章+側邊欄+頁尾

blogger-mobile-customize-template-2接續上一篇「自訂行動版的實作」,前面說完了 "標頭"、"導覽列"、"廣告" 的部分,接下來繼續 "文章"、"側邊欄"、"頁尾" 這些區塊的實作分享。


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

讓 Blogger 樹狀標籤只顯示真實標籤名稱

blogger-tree-label-simplify多層樹狀標籤」是開站以來,Blogger 最熱門的工具,由於與第二名的差距太大,相信將來寶座的位置也不太會變動。

不過樹狀標籤有一個小缺點,其標籤命名格式為「AAA-BBB-CCC」,當顯示在網頁上時,稍嫌佔版面了一些。如果一篇文章使用了多個樹狀標籤,那麼效果就類似本文開頭的示意圖。

+Alisha艾莉莎 提出了這個問題,希望標籤的版面能簡潔一些,於是有了本文的靈感。如果讀者安裝過樹狀標籤的話,那麼這個可算是必裝的工具。

2015年4月23日

Blogger 自訂行動版範本實作﹍(1) 標頭+導覽列+廣告

blogger-mobile-customize-templateBlogger 的行動版網頁,呈現方式可以有三種選擇:

1. 自適應網頁 (RWD)
2. 官方行動版
3. 自訂行動版

該使用哪一種,可根據你的網站屬性,參考「Blogger 應該選擇自適應範本(RWD), 還是行動版範本?」→「四、你適合哪一種選項?」來抉擇。

最近 WFU BLOG 完成了「自訂行動版」的大工程,不過為何排除了 "官方行動版" 與 "RWD" 呢?考量的因素大致有這些:

  • RWD 範本內容比較肥大,會使行動裝置載入時間過久,帶來較差的使用者體驗。
  • 原本一直使用的官方行動版範本,版面簡潔、使用者體驗佳、不需管理成本。可惜版面效果跟網頁版不一致,不像同一個網站
  • 如果網站屬性為純粹的內容分享網站,那麼使用 Blogger 官方行動版的影響不大。不過若是經營個人品牌、形象網站,那麼使用 Blogger 自訂行動版,可讓版面風格一致,對品牌有加分的效果
  • 使用自訂行動版後,可以自行修改許多官方行動版做不到的事,優點算是不少,後面的實作內容會詳述。

如果你也決定要改造行動版的頁面,可先閱讀「Blogger 行動版範本修改技巧」有個初步概念,最好也具備基本的 HTML / CSS / Javascript 概念,接下來可參考本文我的實作過程,相信會有所助益。

如果自行修改範本有困難,或自訂行動版這件事想節省時間、由本站代為處理,可再與我聯繫。

2015年4月21日

自製簡易 Blogger 即時留言版

blogger-comment-form原本 WFU BLOG 側邊欄有個「Wyboard 留言版」,因為比較花俏、耗資源,所以用「分頁功能」隱藏起來,當讀者需要留言、點擊分頁時才動態載入。

後來想想,隱藏在分頁的功能,八成讀者都不太會發現,留言版這個算是滿重要的功能等於形同虛設。於是動動腦筋,開始尋找有沒有不耗資源的簡易型留言版。

最後發現了 Blogger 官方留言版,可以把它搬到側邊欄來使用,似乎就成了這個計畫的最佳選擇,以下就來看看如何安裝。想要先測試一下效果,可前往展示網頁:


2015年4月18日

高畫質免費圖庫搜尋引擎(CC0)

為了方便從網路搜尋,及使用合法、無爭議的免費圖片,製作了一個「CC0 免費圖庫搜尋引擎」,可以一次同時搜尋所有 CC0 免費圖庫。

有了這個搜尋引擎,可不必再單獨進入個別圖庫網站,來做個別搜尋的動作,這也代表製作網站使用的圖片,可節省不少流程與時間。

使用說明及介紹請見後述內容,想要立即體驗這個搜尋引擎,請按下面這個按鈕前往。如常常需要搜尋可商業用途、可修改、不用標示出處的免費 CC0 圖片,也建議將這個連結拖曳到書籤列(或加入書籤):


2015年4月16日

防止 Adsense 自動轉址, 造成你的訪客流失

adsense-block-redirect-ads在網站放 Adsense 廣告後,很怕自己不小心點到,因為網頁上有不少動態載入的區塊時,有時你明明點的是 A 位置,但由於時間差,突然會出現 B 區塊而誤點。萬一點到自己網站的廣告,就得提心吊膽是否會被停權。

前幾個月偶爾會出現,進入 WFU BLOG 後,忘了自己下意識做過哪些動作,突然間跳出不相干的網頁,便會驚覺是不是誤點了 Adsense 廣告!那陣子就得常常查詢 Adsense 官網,是否有誤點通知的訊息。

直到最近幾天,終於搞清楚了這件事,原來我並沒有誤點,而是 Adsense 某些廣告商搞的鬼,會讓網頁自動轉址。花了一番手腳才搞定這件事,將整個經過記錄一下,無論有沒有遇上這情形的讀者,其實都應該參考一下如何處理,因為每個網站都可能出現這些廣告。

2015年4月14日

加快 Blogger 行動版圖片載入速度的密技

blogger-mobile-image-size-optimize要加快網頁載入速度,最有感的兩個方向就是從「圖片」以及「Javascript」下手,詳細的說明可參考「優化網站效能該注意哪些事? (1)最關鍵的考量因素」。

行動版網頁由於螢幕比較小,如果跟網頁版一樣載入相同尺寸的圖片,那麼讀取一定很花時間。一般使用者能做的,最多就是想辦法提升 jpg 圖片的壓縮比例,盡量加快行動裝置上圖片的載入速度。

前陣子在打理 Blogger 行動版範本時,無意間發現了一個密技,竟然可以讓行動版的圖片,自動改用小尺寸來呈現。很有趣的是,這麼強大的功能,沒有任何官方文件提到相關內容,算是 Blogger 的隱藏功能。也因為有了這個功能,WFU 認為 Blogger 平台的行動版,算是所有部落格平台之中最棒的,沒有之一!以下就來看看怎麼啟動這個功能。

2015年4月9日

分享文章到 Facebook 的 Meta 設定﹍縮圖+標題+摘要+作者資訊

最近剛好有幾位讀者都詢問到 FB 分享文章時,會遇上的各種狀況,例如標題、摘要敘述無法正常顯示,或是想要自訂縮圖等等。

這些問題牽涉的層面不太簡單,需要瞭解的知識不少,例如 FB 自己制訂的 Open Graph 標記規範。不過網路可以找到的解答文章倒是不少,因此這些任務可以說是有點困難又不太困難。

而特地再寫一篇文章也是有些好處,能將所有常見問題統整在同一篇,查閱上比較方便,以下採用問答的方式來呈現。

2015年4月7日

Blogger 圖片語法轉換器﹍改變行動版圖片尺寸

online-converter-tool從這篇「加快 Blogger 行動版圖片載入速度」我們瞭解到,Blogger 有辦法讓行動版的圖片改用小尺寸,進而讓網頁載入速度非常有感地提升,只要符合這兩個要件:

1. 使用 PICASA 圖床
2. 為每張圖片設定寬度


手動設定圖片寬度的方法,請參考該篇文章的操作說明,但這個流程是不方便的,無法批次處理。WFU 製作這個「Blogger 圖片尺寸轉換器」後,可縮短處理的時間,將文章中所有圖片語法一次轉換。

使用說明及介紹請見後述內容,下面這個按鈕可前往轉換器頁面,也建議將這個連結拖曳到書籤列(或加入書籤):