2016年6月23日

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

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

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

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

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

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

(圖片出處: pixabay.com)
2016年6月16日

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

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

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

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

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

(圖片出處: youtube.com)
2016年6月13日

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

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

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

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

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



<< 請注意!本篇文章含會員加值文章內容,需點數兌換 >>


(圖片出處: pexels.com)
2016年6月9日

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

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

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

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

2016年6月6日

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

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

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

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

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

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

(圖片出處: pixabay.com)