2014年2月25日

在Blogger導覽列安裝搜尋框__Google自訂搜尋+語音功能


(Pic from: design.oneter.com, refurbishnotebook.blogspot.com)
在這篇「Blogger 如何安裝兩個導覽列?」留言 #7 詢問「有沒有辦法將google的搜尋框直接放到浮動的導覽列上?」。當時我回答「按照 "密技!在 Blogger 水平功能選單使用語法產生動態效果" 的方法,導覽列可以放圖片也可以放語法進去。」不過後來自己測試了一下,發現每個範本的頁籤可能都不一樣,因此如果用這個方法將搜尋框放在導覽列,會出現何種效果不是那麼容易預期及調整。

因此另外寫了個簡單的安裝懶人包,使用的是「Google 自訂搜尋」。以下先大致介紹「在導覽列安裝搜尋框」的優點,及「Google 自訂搜尋」新增加的 "語音搜尋" 功能;想直接安裝程式碼請跳至「三、安裝懶人包」;下面範例網頁的上方導覽列,最右邊即為搜尋框:


2014年2月22日

文章列表極速版﹍依日期排列+讚統計 (RWD 版)──DEMO

2014年2月20日

讓 Evernote 在 PC 能隨時同步


(Pic from: iconpng.com)
Evernote 在行動裝置(Android、iOS)端的同步能即時處理,只要是連上網路的狀態,剛寫好的記事便能自動上傳到雲端。不過在 PC 上就沒這麼方便了,無法隨時同步常常會發生一些慘劇,例如:
  • 明明寫過一些備忘,但怎麼在行動裝置就是找不到?懷疑 Evernote 某些記事並沒有真的同步。(→ 其實是 PC 端尚未同步)
  • 出了門才想到,前一晚準備的資料都存進了 Evernote,可是關機前忘了同步,但都已經上了交通工具而無法回頭...(→ 後果會多嚴重端視這些資料的重要性)

當 PC 端未同步而造成的困擾超過忍耐的臨界值後,決定一勞永逸解決這件事,以下先對 Evernote 的同步機制進行分析,想直接看解決方案請跳「二、可行的解決方案」

2014年2月17日

解決 Blogger 匯入文章時「繼續閱讀」出錯的問題

上一篇「部落格文章如何全自動備份」 的操作需用到
"匯出文章" 及 "匯入文章" 的步驟,而 +Pan Kuan 於 留言 #1 詢問:「我部分文章的html裡有發現這一行 <a href = "http://www.blogger.com/blogger.g?blogID=123456789" name = "more"></a> 不知道這是什麼東西?放著或刪除會有什麼影響嗎?」

這才回想起以前匯出匯入時,會遇上「繼續閱讀」功能出錯的狀況。以下先描述異狀的狀況,再提供解決的操作方式。

2014年2月16日

文章列表極速版__依標籤排列──DEMO

2014年2月15日

[教學]部落格文章如何全自動備份__IFTTT 應用

部落格文章放在雲端不安全嗎?其實以 Blogger 來說,由於是 Google 的產品,可靠度相對而言較佳,印象中只有幾年前系統不穩,某個時段的發文曾暫時消失。

撇除雲端系統自己出的狀況,其實有時候是我們自己手殘,不小心將文章給刪除,當 Blogger 的文章一經刪除,要想救回來還得憑運氣;而更多時候是我們在重新編修文章時,操作錯誤將某段內容誤刪或覆蓋而不自覺,就按下了「更新」按鈕。總之,需要備份的原因,比較大的成分是避免人為失誤。

本篇將介紹一些常見的備份方法,並提供個人認為的最佳方式──利用 IFTTT 同步備份。

2014年2月12日

使用 Hotkeyz 設定連續組合鍵__Windows 8 睡眠模式快速鍵

Hotkeyz 是 Windows 下非常強悍的一套免費軟體,大部分的動作都能利用 Hotkeyz 設定成熱鍵來執行。雖然另一套軟體 AutoHotkey 功能最強大、自訂性最高,不過需要不少基礎知識及一點語法底子,相較之下 Hotkeyz 則適合每個人使用,且大部分的操作、設定都十分簡單,不需要參考說明文件也能輕鬆上手。

而本文要介紹的是,Hotkeyz 比較不易操作、但功能比較強大的部分──重新定義鍵盤(設定連續組合鍵)。這個功能可模擬連續的鍵盤輸入,而達到機械化的自動流程。以下先說明原理及操作方法,最後附上一個實用範例解說──Win8 睡眠模式快速鍵。

2014年2月10日

文章列表極速版__依日期排列──DEMO

2014年2月6日

[教學]Blogger導覽列下拉選單﹍安裝懶人包

「下拉選單」是個從部落格建立以來便很想要的功能,不過大部分下拉選單除了安裝方式不容易,通常需要有 HTML 基礎才比較能成功;且另外比較麻煩的是,下拉選單很難具備管理性,也就是日後想調整選單內容、順序時,是個不太輕鬆的工程。

以上便是這篇安裝懶人包的源由,使用這個工具沒有語法基礎也能輕鬆安裝。另外本篇比較少見沒有先說明原理,因為私心偏好做了個 "三角頂端" 的選單形式,其原理十分複雜,需要專文解釋才清楚,如果想瞭解原理的讀者請再留言了,這樣目前可減少一些篇幅另外說明。(2014.12.30補充:三角頂單的原理可參考「簡單漂亮的 CSS 提示框(tooltip)懶人包實作」→「一、CSS tooltip 製作原理及參考資料」→「3. 三角尖端效果」)

2014年2月3日

網頁中英文字型(font-family)跨平台設定最佳化

中文字體由於先天上的諸多限制,無法像英文字體般,在網頁上能有多樣性的呈現。若是想與眾不同,最簡單的方式是將特殊中文字型做成圖形(例如網站標題及敘述),不過缺點是不利於 SEO。

而不使用圖形也是有辦法來顯示自訂字型,可參考這篇「自製中文網頁字形(Web Font)並內崁至網頁中」,不過操作步驟很多,需要一些基礎知識,且 IE8(含)以下不支援;另外的方法就是付費使用某些線上的服務了。

那麼退而求其次,假設不滿意 "新細明體" 的效果,能否讓網頁在各種作業系統下都能顯示其最佳字型呢?以下為整理 CSS 語法 font-family 的心得筆記,先說明各種設定的原理,若想直接看結果請跳到「五、最佳化設定」。