2012年7月31日

[小工具]Blogger 最新文章+任意尺寸縮圖﹍Json 縮圖資料解析


(Pic from: designdownloader.com, tubaba.com)
2015.10.21 公告:此工具目前已更新到 V2 版,請前往新版安裝頁面:「Blogger 最新文章 V2﹍任意尺寸縮圖 + HTTPS」。


改完「熱門文章縮圖」功能後,下一個要動手的便是「最新文章」加任意尺寸的縮圖功能。找了一些資料後發現:

1. 「不連續x思考斷x面解構」、「0 與 1 謎詭世界」 介紹的 hack 需要「網誌文章資訊提供」設定為 "完整":我個人的考量是,如此一來訂閱者不需上我們的網站就能看到全文內容,且文章內容很輕易地就被複製走,無法設防盜機制。(這個設定位於後台 → 設定 → 其他 → 允許網誌資訊提供)

2. Blogger 提供的最新文章小工具有縮圖功能:但這個小工具在「Blogger 轉址事件」後會受到影響,有的部落格可能會失效,且其縮圖雖能改變尺寸,但實為假象,只是按比例放大縮小而已。

所以花了點時間研究,是否一定要「網誌文章資訊提供」設定為 "完整",才能讓最新文章有縮圖功能?以下為找答案的經過,想直接安裝本文的 hack 請跳「二、修改 Abin 最新文章模組」。

2012年7月25日

[小工具]Blogger 熱門文章+任意尺寸縮圖__兼談圖示製作技巧


(Pic from: psdgraphics.com, dreamstime.com, tubaba.com)
2016.8.15 公告:已推出 V2 版本,請前往這篇「Blogger 熱門文章 V2﹍卡片式縮圖 + 自適應尺寸」。

Blogger 內建的熱門文章小工具,附帶了一個美觀的顯示縮圖功能,只要文章中有插入任何圖片的話,Blogger 會抓取第一張圖片轉換為縮圖。不過這個小工具的縮圖功能還是有一些限制,例如──

1. 從 Blogger 上傳或是 Picasa 圖床的縮圖可以正常顯示,以外的圖床則無法 100% 保證全部顯示
2. 縮圖的尺寸固定為寬 72px,長方形的圖通常會被裁切成正方形,導致圖案不完整。
3. 文章中沒有任何圖片時就無法顯示縮圖,且無法使用替代圖片當成預設縮圖。

關於第 1 點,自家產品的相容性當然較佳,想避免意外只能盡量不外連其他圖床;而本文的內容就是針對第 2、3 點來 hack。想直接修改程式碼可跳到「三、修改有縮圖、無文章摘要的程式碼」,不過還是建議先瞭解一些必要知識,再來修改程式碼,比較能符合預期的效果。另外,其他的圖床如果也想要套用本文的 hack,請見文末的說明。

2012年7月17日

[教學]讓網頁文字使用各種底線圖案__(1) 安裝與使用 (CSS 技巧)


(Pic from: ASE Buzz-Picasa)
以文字內容為主的部落格,先天上吸引目光的能力已經輸旅遊、美食、攝影等以圖片為主的部落格一大截,如果整篇文章都是密密麻麻的文字,那麼再有深度的內容,也會如同嚴肅的講課內容一般,讓人昏昏欲睡。

幫純文字上色、讓文章的可看性加點分大致有兩個途徑,一個是改變標題、關鍵字的顏色,另一個就是本篇的主題──幫重點文字加上各種不同的底色圖案。以下為尋找最佳方案的過程,想直接看安裝方法請直接跳「四、安裝方式」。

2012年7月11日

[教學]讓 Blogger 側邊欄有個簡易安裝的分頁(TAB)功能__(1) 安裝 HTML 小工具


(Pic from: jQuery TOOLS)
當側邊欄的 HTML 小工具(例如最新文章、最新留言)越來越多時,如果能有個分頁功能將數個小工具合併為一欄,那麼不但側邊欄看起來清爽很多,訪客也不會覺得滑鼠滾輪好像滾不完似的。

最近想幫側邊欄裝個簡單的分頁功能,原本考慮這個簡潔無外掛不耗系統資源的「陽春模式」,後來看多了「jQuery Tab」的外掛又覺得陽春版有點單薄,應該要有個頁籤的圖案比較美觀些。結果這些外掛實際安裝起來才發現,有的是安裝方式繁雜,又要下載外掛、又要上傳到自己的空間、程式碼還得分批在範本中的不同區塊安裝;不然就是把「最新文章」等 HTML 小工具加進去之後,結果不知道哪裡的程式碼互相衝突而無法執行。所以弄了半天回到原點,決定動手把陽春版加工,自己用 CSS 刻出頁籤的圖案。如果你安裝側邊欄分頁功能時,也不喜歡太複雜的步驟,那麼以下是我加工後的簡易安裝程式碼與心得。

2012年7月6日

[教學]如何用語法保護網頁文章著作權__(3) 超連結偽裝術


(Pic from: 123rf.com)
先來個前情提要,「上一篇」 的測試區在部分 WIN7 + IE8 會失效的情形,由於最終找到了替代方案,使得本篇內容得以繼續連載下去。

第二篇」防盜機制的缺點在於,只能防範初階複製者,就像機車上了大鎖,一般的竊賊覺得破壞大鎖麻煩,為了節省時間就另外尋找目標了。第二篇的機制很明顯地告訴訪客,我不讓你複製全文,因此覺得麻煩的人就不會複製了。而對於中階竊賊,他覺得他時間很多,也不怕麻煩,願意把機車扛回家慢慢鋸大鎖,例如網頁另存新檔,鉅細靡遺地把 html 標籤慢慢剔除來獲取全文;或是想辦法找到瀏覽器 javascript 的開關,不斷地進行開關的動作來複製全文。雖然這麼閒的人不多,但對於不怕麻煩的閒人,有沒有機制可以防範他們呢?

2012年7月2日

[教學]Blogger 自訂文章網址的要訣__兼談文章設定選項


(Pic from: 123rf.com)
這幾天發表文章時突然發現,文章設定多了一個選項,一試之下才發現這就是被大家嫌了很多年,現在終於開放的功能──自訂文章網址。以往想要自訂文章網址,文章標題不能輸入中文,得先用英文打好想要的網址名稱,將文章發佈之後再重新編輯一次,把英文名稱改回中文名稱,才能避免無意義的網址。現在功能開放之後,就可省去這道多餘動作。

以下順便研究了一下文章設定的選項,如果只看文章網址的設定,請直接跳「三、永久連結」。