2015年3月31日

行動裝置瀏覽器(Android / iOS)的好選擇﹍Opera 各版本評價及心得(Browser / Mobile / Mini)


(Pic from: maczapp.com)
兩年前買的「初代 Nexus 7」平版,貧乏的 1G 記憶體在歷經升級 Android 5.1 後、加上越來越肥大的 Chrome 瀏覽器,才開三、四個網頁便老是呈現痴呆狀態,Chrome 果真不愧「記憶體怪獸」的稱號。

為了讓 Nexus 7 繼續服役,移除 Chrome 乃不得不然,最後比較令人放心的替代方案找上了 Opera,跟當初「桌面版 Opera 的抉擇」是一樣的。

然而,Opera 的 Android 行動版本產品線分歧,共計有三種:
  • Opera Browser
  • Opera Mini
  • Opera Mobile Class

相信沒幾個人分得出其差別,在使用之前,可參考本文的分析與心得後,再做出抉擇。iOS 的版本比較,請直接跳到「五、iOS 系統﹍Opera Coast / Mini」。

2015年3月28日

Blogger 單篇文章瀏覽數 V2﹍(2) 新版本特點及安裝程式碼

既然改了版,V2 程式碼順便改善舊版的某些功能。舊版要在一個頁面、多個位置擺放計數器不太方便,新版的優點為,一篇頁面要在多少個位置擺放計數器都沒有限制,程式彼此間不會打架。

因此裝了 V2 後,如果你熟悉程式碼,只要發揮想像力,可以自己想辦法擴充到其他 Blogger 工具,例如最新文章、熱門文章、相關文章、隨機文章...等等,只要其他能顯示文章的小工具,也能出現文章的瀏覽數。

以下接續「Blogger 單篇文章瀏覽數 V2﹍(1) 取得 Google Analytics 數據」的步驟。

2015年3月27日

Blogger 單篇文章瀏覽數 V2﹍(1) 取得 Google Analytics 數據

最近發現計數器呈現停滯狀態,進了 Google 試算表才發現,原來官方已經強制升級為新版試算表,因此舊版試算表抓取 Google Analytics(簡稱 GA) 的功能跟語法已經失效,導致計數功能無法執行,請見這個「Google 試算表升級公告網頁」。

若你安裝的舊版「Blogger 單篇文章瀏覽數」還能運作,如官方公告所言,試算表升級動作從 2014 年就開始,日前我的試算表已被強制升級,因此所有的舊版試算表終將無法運作。

為了讓新版試算表能運作「單篇文章瀏覽數」,整個製作流程得全部更改,後端與前端的程式碼也都要重寫。算算這已經是「單篇文章瀏覽數」第 3 個版本了,雖然有點無奈,不過使用網路的免費服務就是這樣,得習慣每幾年就可能出現的大改版。

也因為如此,從現在開始,為了讓這個功能可長久運作,「單篇文章瀏覽數」必須開始酌收維護費用,請見後述細則。

(圖片出處: freevectorgraphics.org)
2015年3月25日

iPhone 製作 mp3 鈴聲﹍絕對成功的方法


(Pic from: pixabay.com)
習慣 Windows 系統後,對於蘋果系統有很大的不適應性,例如簡單就能播放的 mp3 鈴聲,在蘋果設備要播放或製作都不是那麼容易。

最簡單的方法是藉由 iTools 這個軟體,就能輕鬆幫 iPhone 製作 mp3 鈴聲,而以前也是用這個軟體來進行,不過現在對於大陸軟體較有疑慮,因此捨棄了這個方案,可參考「iPhone 檢測電池容量」→「二、iTools」→「1. 簡體版」。

還好利用官方軟體 iTunes 也有方法可以製作 mp3 鈴聲,無論 mp3 時間多長都可以,就是步驟多了點,以下為詳細的操作流程筆記。

2015年3月23日

[教學] 快速回到網頁上方 Go Top 按鈕 + 各種動畫效果(CSS / jQuery)


(Pic from: keytothecity.co.uk)
之前做過兩個「回到頂端」按鈕的版本,分別是「Go Top 按鈕符合使用者體驗的友善設計」、「Go Top 按鈕放在浮動導覽列」。最近處理的 case 需要炫一點的特效,因此將之前的版本增加一些動畫效果。

以下為修改的筆記,如果熟悉 CSS / jQuery 的話,可以改為符合自己風格的效果。

2015年3月19日

iPhone 檢測電池容量的方法 (免越獄JB) + 挑選副廠電池心得

家人使用了很久的 iPhone 4s,電池已經換過一次,但最近又開始出現耗電快速的情形,看來又該換電池了。原本準備讓店家換,但打了幾家電話,每個都說自己電池是原廠的...看倌你知道原廠電池要多少錢嗎?行情價約 NT. 2800

然而這些收費 NT. 600 ~ 900 的店家,竟然都大言不慚地說自己是原廠電池,只能說劣幣驅逐良幣,難道敢說自己不是原廠的人都會沒生意?台灣大企業無良當道,小的自然是跟風追隨,消費者若想抵制歪風,最好的手段就是別姑息,讓抱著僥倖心態、不誠實的店家賺不到錢。

做了一些功課後,改從露天購買「iPhone 電池 + 工具組」自己來。而為了確保從拍賣買到的電池,品質及壽命是良好的,需要有檢測電池容量、健康狀態的方法,以下為整個過程的筆記。

2015年3月17日

[工具] Blogger 隨機文章 + 自適應尺寸縮圖

2016.5.26 公告:目前已有新版本,可改安裝「隨機文章 V2 + 輪播效果」。

前陣子幫朋友安裝放在文章結束處的「系列文」功能,以及放在留言區塊前面、類似 Linkwithin 的「相關文章」工具,跟他解釋「系列文可以從文章相關的標籤,隨機抽選指定的文章數量列出」,結果他反問「系列文挑出來的推薦文章跟 "相關文章" 會重複,可不可以把 "相關文章" 改成 "隨機文章"?」。

果然眾人智慧超越個人智慧,我原本的使用方式無法將效用最大化、來讓更多不同的文章曝光,如果放了 "系列相關文章" 功能,那麼有縮圖的推薦文章區塊,就應該使用隨機文章才是。

因此最近把「相關文章」的模組改一下,就成了「隨機文章」。以下先說明原理、特點,如果想直接安裝,請跳至「二、安裝 jQuery 及 CSS」。

2015年3月13日

[CSS] 美化 Blogger 官方標籤雲

最近朋友買了一個漂亮的 Blogger 範本,除了配色一定比官方範本好看之外,也會有一些 jQuery 特效。不過非官方範本想要自己修改版面,就不是那麼容易了,同時也會有一些相容性問題,例如本文的主題 "標籤雲",不巧執行就遇上版面破裂的情形。

Blogger 官方的標籤雲功能其實已經做的不錯,有多種選項可以自訂,就只差在版面沒那麼美觀。如果自己改造一下 CSS,那麼就能做出不錯的效果。以下分享這次調整標籤雲的筆記,想先看效果可點這個網頁:


2015年3月11日

[教學] Blogger 行動版如何讓 Adsense 最佳化

過去 一直使用的是 Blogger "官方" 行動版,其實這也不啻為懶人的好選擇,不但讀者用手機閱讀時載入速度快、版面簡潔,自己也不用管理第二套範本內容,而依照「行動版擺放 Adsense 的簡易技巧彙整」也能讓 Google 及自己有所收益,算是三贏的局面。

使用 Blogger "自訂" 行動版範本則有更多好處,能選擇版面更大的 Adsense 廣告,放置在更好的位置,創造更多收益。當然,對範本不熟悉、害怕語法的話,這部分就比較麻煩一些。

以下會分享在 Blogger 自訂行動版放置 Adsense 廣告的心得、最佳化的方法,並解決一些異常的狀況。

2015年3月6日

舊筆電回春日記﹍XP + SSD 硬碟使用心得

這陣子需要幫家人弄一台可以上網、玩 Line 的文書機,想起了十年前買的筆電小狗機(TravelMate 3000),當初用了三年後,一過保固期螢幕馬上就異常,時間算得還真準!

小狗機退役期間雖然找到了方法解決異常(可參考「五、舊筆電螢幕異常的處理」),不過老舊配備連跑 Chrome 20 都慢得無法忍受,因此大部分時間仍是待在倉庫。現在重新打點之後,不但開機速度飛快,就算跑最新版的 Chrome 40 都很順暢!

能讓舊筆電再度回春,這種感覺簡直比買新筆電還興奮,似乎 XP 還能再戰 10 年呢!此次升級的零件有這些:

  • 二手記憶體:1G x 2 / NT. 300
  • 二手 IDE SSD 固態硬碟:32G / NT. 500
  • USB 無線網卡:NT. 200

花 1K 能得到這樣的效果算是很滿意,以下記錄舊筆電升級的處理心得,讓有相同需求的讀者參考。

2015年3月4日

[工具] 在 Blogger 文章各種位置插入 Adsense 廣告﹍安裝懶人包

上一篇「Blogger 自訂安裝 Google Adsense 的各種位置及方式」,雖然內容很詳盡,只是對不熟悉語法與 Blogger 範本的讀者,可能看得有點吃力。

另外一點是,很多讀者想在文章中放入 Adsense 廣告,但得一篇篇手動加入安裝碼,這對網站有數百篇文章的站長而言,是非常頭大的一件事。還好根據「BLOGGER 繼續閱讀隱藏廣告和物件」的概念,這件事現在可以交給程式自動執行。

本篇的懶人包,能讓對語法及範本不熟的站長也可輕鬆安裝,如果你想讓 Adsense 廣告自動出現在以下四個位置,那麼就可繼續看下去:
  • 文章標題之前
  • 文章標題之後
  • 繼續閱讀的位置
  • 文末的位置

2015年3月2日

[教學] 改造 Blogger 官方分享按鈕﹍新增熱門社交分享按鈕

在網站擺放各式熱門的分享按鈕,可方便讀者主動幫我們宣傳,有助於散播文章到不同的平台。這件事已經有不少第三方服務可替我們代勞,例如「Shareaholic 超完整社群網站分享按鈕」,讓我們不必單獨安裝個別分享按鈕,省下不少麻煩。

本站沒使用這類服務的原因,主要考量為減少 js 的使用,可參考「優化網站效能該注意哪些事?」。除此之外,使用「第三方服務得擔心外部伺服器不穩」,導致分享按鈕開天窗,就像前陣子發生的「Google Drive 外連失效三天」事件。

因為分享按鈕幾乎都能以超連結的方式放在網頁上,如果改用這樣的方式,就不需用 js 來處理了。而「Blogger 官方分享按鈕」正是採用超連結語法,網頁效能較佳、沒有外部伺服器的顧慮。可惜的是,有不少缺點及侷限性,本篇就來一一解決這些問題,並加入以下常見的社交分享按鈕:
  • Line
  • 撲浪(Plurk)
  • 微博(weibo)
  • tumblr
  • 修改 G+ 按鈕