Picasa 圖床的獨家應用:製作 RWD 自適應圖片,讓手機自動載入小圖,加快網頁讀取速度

過去曾在「 加快 Blogger 行動版圖片載入速度的密技 」告訴讀者,Blogger 使用的圖片只要從後台上傳,也就是使用 Picasa 圖床,行動版就會自動改為載入小尺寸的圖片。 因為有這樣的獨家功能,Picasa 只要上傳一張圖片,就會產生手機版尺寸的圖片,我一直認為 ...

繼續閱讀全文

jQuery 日期時間範圍選擇器 Date Range Picker (Bootstrap 外掛)

過去網頁表單要輸入日期不容易,往往得另外裝個外掛,例如基於 jQuery 的套件 datepicker。 而現在的瀏覽器使用 HTML5 已成為標準,Input 標籤內建就有簡易的選擇日期功能,只要加入屬性 type="date" 就可使用,不必另裝外掛...

繼續閱讀全文

Bootstrap 簡易版面實作範例﹍網格+面板+表單輸入+按鈕

Bootstrap 的使用說明內容不少,份量足以出一本書,不過工具書用從頭看到尾的方式來學習,效果不見得比較好。 如同「一圖勝過千言萬語」,從範例中來學習、吸收 Bootstrap,效率會來得更快,印象也比較深刻。 本篇提供一個簡單的小範例,可以熟悉以下這些功能的用法: ...

繼續閱讀全文

前端開發神器 Emmet 快速上手教學整理,減少 HTML / CSS 輸入的麻煩﹍Sublime Text

網頁製作久了就會發現,手刻 HTML/CSS 挺累贅的。就像 jQuery 可以讓 Javascript 寫起來更快、不必糾結瀏覽器相容性問題,「 Bootstrap 」可以縮短網頁版面設計的時間,那麼 HTML/CSS 的輸入,有沒有快速便利的工具呢? 「 Emmet 」(...

繼續閱讀全文

製作網頁表單時,如何讓複雜的配置也能完美對齊﹍Grid 網格系統

如果熟悉「 Bootstrap 」這套 CSS 框架,那麼製作網頁表單不是什麼難事,查閱一下適合表單使用的 class 名稱,就能快速做出美觀、有一定水準的表單。 最近處理一個大型專案,需要製作許多複雜的表單,結果碰上了難題。什麼程度稱為 "複雜" 呢?可...

繼續閱讀全文

分享到 Line 會遇到的問題整理﹍縮圖+影片+網址

有多位讀者、客戶都曾反應,分享文章到 Line 的效果不如預期,例如無法顯示縮圖、或者圖不是他要的等等。 那麼本篇就整理一下各種網址、影片分享到 Line 時,可能會遇到的問題有哪些,以 FAQ 形式的方式呈現。 (圖片出處: picsee )

繼續閱讀全文

線上查詢 FB G+ Twitter 社群分享按鈕數據 + 立即檢視 FB G+ 留言板內容

前陣子因為網站改用「 RWD 範本 」,同時在精簡 JS 外掛的前提下,移除了 FB 讚、+1 按鈕,而且 FB 及 G+ 留言板也都不使用了。 現在偶爾想要知道某篇文章的社群分享按鈕累積數據,或是那篇的 FB、G+ 讀者留言內容,就會比較麻煩一些。 於是就做了本篇的線上...

繼續閱讀全文

Blogger 刪了你的網站並告知是 Spam 垃圾網站怎麼辦?是否自架站會比較安全?

前陣子有讀者傳來訊息,表示知名的軟體下載網站「阿榮福利味」一度被 Blogger 刪除,詢問我的意見: 看起來是滿嚴重的事件,且阿榮也是我從小看著長大的網站,因此進 FB 瞭解一下是什麼狀況。 簡單說,是阿榮的分站被判定為垃圾網站(spam),且直接刪除未事先通知。如...

繼續閱讀全文
TOP