2012年12月31日

[教學]Blogger 頁面判斷式(PageType)的各種應用

Blogger 跟其他部落格比較起來,比較不友善的地方就是一些工具說明得自己想辦法啃官方說明文件;而本文的主題「Blogger 頁面判斷式」,配合不同的頁面型態(PageType)參數,就能在不同頁面時展現不同的版面效果,只是就算啃了「官方說明文件」對其應用也可能是一知半解。在某方面說起來,Blogger 能否瞭解得深入,真的得靠有沒有前輩分享學習心得,大家才能延伸出更好的應用。

本篇文章部分內容一開始分享在「Blogger中文社群」的這個討論串:https://plus.google.com/108990319112241335296/posts/YEv1v5Nwcnt,經由討論後讓內容完整了一些。閱讀本文前需要一點 HTML、CSS、Javascript 的概念,且本文主要講的是各種應用及概念,因此建議先閱讀這一篇「淺談 Blogger 的判斷式以及 PageType 的應用」,來瞭解各種頁面(PageType)的基本定義。另外布丁大也有一篇「Blogger範本之網頁類型(pageType)應用」 內容比較細一些,同樣可以先參考一下。


一、基本使用法

1. 定義:為了方便閱讀,先簡單列出網頁類型(pageType)的定義─

index:首頁、標籤、搜尋頁面
archive:歷史文章列表
item:文章頁面
static_page:靜態頁面(網址含 "/p/" 的頁面)


2. 讓特定內容在 "文章頁面" 才出現:任何內容例如HTML、CSS、Javascript、Blogger語法,都可塞在判斷句之間。就像文章下方通常會有「張貼者」、「分享按鈕」等等資訊,或是很多人會裝「LinkWithin」;如果想讓這些資訊在 "文章頁面" 才出現,其他頁面不出現(主要是首頁),那麼用法如下──

2012年12月24日

部落格聖誕節裝飾實作 (CSS 技巧)


(Pic from: xox520.blogspot.com)
聖誕節到了來應應景,為自己的 Blogger 裝飾一下增添點節慶氣氛。+Mark X 整理了一個「懶人包工具」,不但容易安裝且設計精美、深具巧思,按下星星後不但會變色,還會隨機播放聖誕音樂。因此決定以此小工具為主體,來進行部落格的裝飾。

除此之外,以下的網址也能找到一些小裝飾:

http://www.widgetbox.com/tag/christmas
http://bloggerstop.net/2009/12/decorate-your-blog-with-these-awesome.html

2012年12月22日

如何使用本站


2012年12月19日

部落格即時留言板──WYBOARD(安裝及使用說明)

2016.4.9 公告:因 Google Drive 外連失效,請勿使用本篇的程式碼,請改用新版「部落格即時留言板 WYBOARD + 表情圖案


會寫這個「即時留言板」小工具,大概是逛別人部落格時,想留言卻找不到留言板;若隨便找篇文章留言,與主題無關又顯得唐突。如果在側邊欄醒目處能有個留言板的話,對訪客而言就很方便。

比較知名的即時留言板是 Cbox,而 Cbox 的缺點是無論你的網站是否熱門,都可能被留言機器人洗板,且 Cbox 免費版有留言數的限制。若想體驗這個輕爽方便的中文留言板,以下點大標題可直接跳到對應區塊。

2012年12月17日

Blogger 修改「G+ 追蹤者」小工具的版面及編輯按鈕

Blogger 最近推出顯示 G+ 追蹤者的小工具,有人的反應是與 Google Freind Connect 的性質重疊,而 G+ 專頁也會顯示追蹤者頭像,如果再加上這個小工具,那版面真是好不熱鬧。

目前我暫時在網頁上只擺這個 G+ 追蹤者的小工具,可以裝作看起來很有人氣的樣子(XD);但是才剛裝上後便發現他會超出邊界,弄了一陣才瞭解到可能因為本站並非使用新範本,blogger 已經懶得測試這些老用戶的環境,如果是裝在新範本就不會有這個 bug 了。

而這陣子逛到不只一個部落格把這個小工具放在頁面底部,可能是發現放在側邊欄會超出邊界,所以才將位置挪到底部吧!或許會跟這個小工具不合的部落格,還是有一定的數量,若有以上情形的話,可參考以下我的修改方式──

2012年12月12日

[教學]將 Blogger「標籤」小工具放在導覽列實作


(Pic from: Office Worker)
之前在「+Shu-Yuan Tien ── Office Worker」看到標籤出現在導覽列覺得挺神奇的,研究了一陣後發現可以在後台先把導覽列用滑鼠拖曳到網頁最上方,接著再把「標籤」小工具拖曳到導覽列,那麼網站所有的標籤就會自動出現在導覽列,不必像以前導覽列的使用方式,得一個個手動把標籤連結加上去。

這給了我一個靈感,如果把「標籤」拉到導覽列,而側邊欄其他工具拉到最底下,那麼整個版面可以全部留給文章,閱讀起來實在太舒服了,而且所有重要的導覽功能仍在網頁上方,訪客不會找不到想要的功能,就像我的「三國志分站」這樣的效果。

只不過在實作時遇上了一些要解決的狀況:

1. 分站使用的官方範本為「圖片視窗」,導覽列的頁籤有圓角效果,當導覽列拉到網頁最上方時,頁籤變成飄浮在空中的感覺(囧~)。
2. 標籤拉到導覽列,按下標籤時,該標籤會顯示不正常。

最後花了一番功夫解決,以下第一點為大致說明 Blogger 運作的原理,想直接看安裝及解決過程的實作請跳「二、調整導覽列」。

2012年12月7日

避免 G+ 訊息混亂 歡迎加入「Blogger 中文社群」

Google+ 今天正式推出了「社群」功能,作用相當於一個小型論壇,可以細分不同主題的討論區。而每個人都能參與討論、也能各自發起新的主題,不像 G+ 是由主人唱獨腳戲。

其實本站一開始使用 G+ 時便覺得定位有點尷尬,因為本站為 Blogger 相關的主題,而 G+ 是社交工具,兩者連結後,追蹤本站 G+ 的朋友除了會接收到 Blogger 的相關資訊,也會接收到我個人轉貼的非 Blogger 訊息(例如有趣圖片、影片),G+ 的使用者無法將接收的訊息自動分類。

但今天「社群」功能發佈後,這個問題便獲得解決,例如愛貓人士、想學習英文者可自行尋找相關社群加入討論,若搜尋不到還可以自己創立社群,步驟很簡單──可參考「介紹網頁」。

目前我發現 Blogger 除了 G+ 的「社群」,連其他地方也找不到專屬的中文討論區,因此算是自告奮勇先成立了一個「Blogger 中文社群」,以後本站有新的 Blogger 訊息就不貼 G+ 了,直接貼到社群裏,如此資訊就能被有效過濾。若只想看 Blogger 相關資訊,那麼就可加入「Blogger 中文社群」:https://plus.google.com/u/0/communities/103807083735607134704

2012年12月5日

Javascript 優良部分(筆記)__糟糕與不良的部分

這一篇還滿莞爾的,書名叫做「Javascript 優良部分」,不過可能是因為已經看過「Javascript 設計模式」的關係,略微掃過後覺得大部分內容沒有很特別,唯一引起我興趣的是他的附錄,歸納了「Javascript 糟糕與不良的部分」,剛好與書名完全相反,也是我決定作筆記的內容。記錄這些 javascript 比較有問題的部分,遇上了才知道怎麼避免、學習與他們共處,就像學習與 IE 共處一樣...

2012年12月1日

幫部落格安裝一鍵訂閱新版Google Reader(閱讀器)的按鈕


(Pic from: joshrimer.com)
Google Reader」可說是訂閱、整理網站 RSS 最方便的閱讀器工具了,透過他可以蒐集我們需要的各類資訊,不管是娛樂、學習或是情報。網路上介紹他的文章非常多,如果對這個工具不瞭解,可以參考「介紹網頁」、「使用技巧網頁1」、「使用技巧網頁2」。

也因為 Google Reader 好用,我發現用它訂閱網站 RSS 的讀者數量比較穩定,而使用其他閱讀器或用其他方式訂閱的使用者比較不穩定(見「一、FeedBurner 訂閱數」),因此若部落格能提供一鍵訂閱 Google Reader 的按鈕,相信這個友善介面對累積忠實讀者有幫助。以下先是 FeedBurner 的經驗分享、及安裝方法的原理,若想直接安裝請跳「三、安裝 Google Reader 訂閱按鈕」。

2012年11月25日

Blogger 最新回應+留言者頭像+文章標題


(Pic from: softicons.com,freepik.com,all-free-download.com)
2015.10.10 公告:此工具目前已更新到 V2 版,請前往新版安裝頁面:「Blogger 最新留言 V2﹍頭像 + 文章標題 + HTTPS」。

這個版本的「最新回應」小工具,其基本架構仍是延用「上個版本」的程式庫,主要差別為每則留言多了文章標題。優點是一眼就能清楚瞭解哪篇文章有了新留言,不過每則留言的區塊面積也增加了,如果喜歡介面簡潔一點的話還是可以選擇「無文章標題的版本」。以下照例先說明撈後台資料的原理,想直接安裝可跳「三、安裝程式碼」。

2012年11月20日

讓「Blogger標籤/搜尋頁面」能隨時切換標題模式與文摘模式


(Pic from: iconfinder.com)
2016.3.28 公告:2016.3.28 公告:目前已發佈新版,請前往「Blogger 標籤文章列表 V2

Abin 大發表的「標籤/搜尋頁面只列出標題」非常實用,過去曾使用過一段時間,但最後還是將此功能下架。原因無他,雖然自己使用時找資料快速,但畢竟部落格不是只有自己在用,訪客很需要看文摘來判斷文章是否值得閱讀,標題模式對訪客而言不是個友善介面。再加上現在每篇文章都花費了心力製作主題意象圖,如果訪客在「標籤/搜尋頁面」看不到圖片,那豈不可惜?

最近在想,有沒有兩全起美的方法,讓我自己可以只看到標題,但訪客能看到完整的圖文簡介,而熟客若只想查資料時,也可自由選擇切換到標題模式?實作了一下發現這不是很容易的任務,最後是使用變通的方法解決,想瞭解原理請看「一、原理及 Blogger 語法」,對程式碼不熟可直接跳「二、安裝程式碼」。

2012年11月16日

[教學]Blogger 自訂安裝 Google Adsense 的各種位置及方式


(Pic from: Installation sous Linux : Autopackage)
本篇的內容為紀錄我安裝 Google Adsense 各種方式及位置的筆記;因篇幅及方便閱讀的關係,如何運用本篇的筆記來進行部落格廣告位置優化的各種應用,留待下一篇詳述。

一般而言,Google Adsense 最簡單的安裝方式為使用官方的小工具,而小工具能拖曳到的位置有限,例如拉到側邊欄、導覽列上方、文章區塊上方、文章區塊底部等,簡言之就是所有「文章區塊」以外的位置。不過想要找出最好的擺放位置,只測試這幾個地方是不夠的,以下提供我安裝到範本中「文章區塊」的位置、以及限制各種條件下的方法。

2012年11月11日

Blogger 文章置頂+首頁公佈欄實作技巧


(Pic from: psdgraphics.com)
過去在「Blogger 小技巧」曾整理了一些公佈欄的筆記,以備實作時參考之用。一般而言,在 Blogger 要找到一個區塊能長期置頂實現公告的功效,大致有以下這幾個作法:

A. 放在導覽列上方
B. 放在文章區塊上方
C. 放在側邊欄頂端
D. 發一篇未來文章長期置頂

其中 A~C 的作法很簡單,在後台新增 HTML/Javascript 小工具,再拖曳到 A~C 的位置即可。而 D 的作法需要用到一點小技巧,因為如果開一篇新文章後選擇未來的日期發佈,那麼這篇文章會列入排程,等到日期到了才會出現在部落格,自然就無法長期置頂。

正確的作法為開一篇新文章後立即儲存發佈,接著再重新編輯這篇文章 → 文章設定 → 發佈日期 → 設定日期及時間 → 改為未來的日期 → 完成 → 更新。回到首頁之後,如下圖,就可以看到這篇到 2100 年之前都會置頂的文章了:

2012年11月8日

Javascript 設計模式(筆記)__(2) 函式

第三章:實字與建構式

建立各種物件比較有效率的方式──

1. 物件

// 舊的方式
var car = new Object();
car.color = "blue";
car.wheels = 4;

// 新的方式
var car = {
color: "blue",
wheels: 4
};


2. 陣列

// 舊的方式
var brand = new Array("BMW", "HONDA", "CIVIC");

// 新的方式
var brand = ["BMW", "HONDA", "CIVIC"];


3. 正規表示式

假設建立一個符合反斜線 "\" 的例子──

// 舊的方式
var re = new RegExp("\\\\", "gm");

// 新的方式
var re = /\\/gm;

2012年11月3日

讓作者頭像出現在搜尋結果__申請Google Authorship的撇步與心得(頭像篇)


(Pic from: freepik.com,danzxncrd.blogspot.com)
上一篇」曾提到基於個人隱私因素,不想在 G+ 放上個人的大頭照;因此如果跟我一樣,不想將玉照公諸於世的話,可參考本篇的心得。

2012年11月2日

讓作者頭像出現在搜尋結果__申請Google Authorship的撇步與心得(流程篇)

首先,這篇的詳細步驟是提供給 Blogger 參考,其他部落格只提供官網步驟;另外,第一篇的內容為正規流程;第二篇的部分內容也許不是出於 Google 的原意,所以標題的"撇步"代表有點走偏鋒。投機的方法目前可行,但未來 Google 政策會如何變更無人知曉,如何抉擇就看個人需求了。


一、Google Authorship 介紹

其實這並非新的工具,推出已經有一年了,相信很多人都不陌生,因此介紹的部分簡單帶過。根據「官方網頁」的說明,Google Authorship 中文稱為 "原創性標記"。通過驗證之後,所寫的原創文章(不是複製貼上而來的)出現在 Google 搜尋結果時,會一併附上作者大名及頭像圖案。至於作用為何有很多文章介紹過,可參考上面的官網、「參考網頁1」、「參考網頁2」等。

2012年10月30日

正規表示式線上自動產生器(以Javascript舉例)

相信正規表示式對很多學習 js 的人而言是頭痛的一塊,而我也不例外。各種參數的定義已經夠難記了,還有各種符號及括號要分辨、還有需要使用反斜線的字元要注意,就算這次記住了,等下次要用時大概也差不多忘了。

直到最近發現國外有高手寫了個正規表示式的「線上自動產生器」,總算讓我不再苦惱,趕快把這個工具的使用方法記錄起來,方便以後查詢。

以下提供兩個操作此工具來產生正規表示式的實例,相信對上手有很大的幫助。使用這個工具另外的好處是,自己操作的範例看多了之後,一些常用的參數自然而然就能記起來了。

2012年10月24日

Blogger 最新回應+留言者頭像(更新版)__留言內容收合


(Pic from: softicons.com,freepik.com,all-free-download.com)
一方面「原版本」 發現了一些 bug,因此需要出更新版;一方面也是讀了「Javascript 設計模式」 之後,剛好來練習新的 Javascript 撰寫模式,例如只用一個全域變數、規律的空格與縮排、集中 var,以及後面章節會提到的 HTML、CSS、Javascript 分離。由於撰寫模式變動很多,本篇的程式碼可說是近乎重寫。

2012.11.26 補充

如果需要顯示最新留言的文章標題,請參考另一個版本「
Blogger 最新回應+留言者頭像+文章標題


一、修正 bug 及更新要點

1. 刪除內容之留言:前陣子發現在原版本之下,若 "留言內容" 被「留言者」或「站長」刪除,但該則留言尚未被站長永久刪除時,最新回應的某個變數讀不到資料會導致當掉;本更新版修正了此 bug。

2. 含超連結之留言:在原版本之下若留言內有超連結,且留言摘要結束處截斷了超連結語法,會造成最新回應的該則留言與下則留言顯示格式錯誤;更新版修正了此 bug,且顯示留言全文時,超連結仍可正常作用。

3. 處理無留言的狀態:若部落格一篇留言都沒有時,原版本會顯示 "讀取中" 的動畫圖案,且永遠不會停止;更新版修正了此 bug,並加上 "目前尚無留言" 字樣。

4. 新增留言全文開合功能:按下留言內容、或各處的提示開合圖案,均可方便迅速的開合留言內容。可看右邊側邊欄的「最新回應」小工具測試效果。

5. 改變留言頭像圖案的真實尺寸:前陣子使用 Google 的「PageSpeed」測試網頁讀取速度時發現某些留言者的頭像圖案檔案很大,雖然原版本有將頭像 img 圖案的 width 參數改小,但實際上網頁還是會去讀取原本尺寸的圖案,因此會拖慢載入速度;更新版可自動將頭像圖案的 "真實尺寸" 改小

2012年10月19日

Javascript 設計模式(筆記)__(1) 精要

「Javascript 設計模式」不是一本初學者的書,作者自言這是給 "專業程式開發者" 看的,而我這業餘愛好者並不屬於此領域。但這本書對於 Javascript 寫了一段時間的人還是有很大的幫助,可以讓程式「寫得更有效率、執行得更有效率、dubug 的時間縮短、日後維護更方便」,以上這幾點對我而言有深刻的體驗。

只是礙於實力不夠,書中大概有一半的章節看不懂,也可以說還沒寫到那麼複雜的程度,因此筆記只能節錄自己可理解、以及好歸納的部分,適合已經學習 Javascript 一段時間的讀者參考,而高手則建議請直接買書來看吧,因為這是一本高手推薦的參考書籍!

本系列內容摘要採用正常字體,而自己的筆記、註釋使用斜體。

2012年10月17日

Blogger「留言欄訊息」自訂版面及樣式的方法__兼談留言字詞驗證


(Pic from: designdownloader.com,solarxsarasota.com)
撰寫 Blogger 的「留言欄訊息」(就是留言欄上方的張貼意見)時,長期以來一直有幾個困擾:

1. 只有少數幾個 HTML 標籤可使用(例如 <a>、<b>、<i>)。
2. <a> 標籤無法使用 target="_blank" 屬性。
3. 訪客不太會注意這些內容。

關於第 3 點,如果字很少一點的話或許訪客會瞄一眼;只要字一多、看到密密麻麻的一片,相信沒幾個人會去細讀。

2012年10月12日

Chrome 開發人員工具__調整部落格版面實作


(Pic from: developers.google.com)
主流瀏覽器的體積大、吃記憶體兇、功能包山包海,如果只拿來上網是有點可惜。既然已經佔用系統那麼多資源,是該讓他多做點事,以 Chrome 為例,可「收信」、「記事待辦」、或「其他功能」。如果純上網的話,其實可用輕量、不佔資源、速度快的瀏覽器,如「K-Meleon」即可。

本篇介紹的 Chrome 附加功能 "開發人員工具",主要是用來協助 debug、分析網頁程式碼。可惜這工具能 google 到的教學網頁很少,畢竟是屬於進階的功能,想瞭解大略的功能操作可參考「這個網頁」。其實想真正學會這個工具的完整功能,光靠參考網頁是不夠的,說不定得等有人出書;而本文的內容為,藉由調整部落格版面配置的操作過程,來一窺這個強大工具的冰山一角;另外閱讀本文內容之前,最好先具備一點 HTMLCSS 概念。

2012年10月5日

[教學]讓網頁使用各種特殊文字區塊__(2) 實作範例「公告+修訂區塊」(CSS 技巧)


(Pic from: psdgraphics.com)
寫完「第一篇」後,覺得內容稍微硬了一些,如有個實作的例子相佐會比較容易吸收,奈何文長已經無法再塞入舉例內容,因此就把實例留到本篇了。

一般文章常見的特殊文字區塊有公告區、修訂(增補、註釋)區、參考資料區等等,而本站的 "參考資料區塊"(可參考「這篇文章」的文末)、"系列文區塊"(可參考「這篇文章」的文末),其作法與"程式碼區塊"雷同,可參考「第一篇」的 CSS 設定以及那塊程式碼區域的樣式即可;以下要詳述的是本站 "公告區塊" 與 "修訂區塊" 的作法。

2012年9月29日

讓網頁文字使用各種底線圖案__(2) 找出行高的簡易方法


(Pic from: ASE Buzz-Picasa,psdzzle.com)
一、找出行高值的困難性

上一篇」製作底線圖案的一個重要步驟為找出「行高」line-height 的像素(px) 值,如此底線圖案才能正常顯示。不過經由上一篇【留言 #04】、【留言 #05】的提問,才赫然發現這個 line-height 的 px 值似乎沒這麼好找。

首先不是每個 BSP 平台都能檢查後台範本內容,有的部落格只能藉由瀏覽器提供的開發人員工具,而開發人員工具的操作步驟說不定得發上一篇長文才能講得清楚。而最糟糕的是,用開發人員工具查出來的 line-height 數值,如果是 px 值當然就沒問題,但每個 BSP 平台提供的範本寫法都不同,上一篇【留言 #05】廣告小妹的範本的 line-height 數值為 "180%",而我查了自己的範本,line-height 竟然是 "1.4",這是代表 1.4em(預設文字大小的 1.4倍)的意思。這下可好,真的要發文把所有狀況都概括進去可能要連載了。


二、找出行高的簡易方法

靈光一閃想到平常調整部落格版面的技巧──利用圖片編輯軟體調整 px 值,剛好可以套用到這個任務上,以下就來看實作的步驟。

2012年9月26日

部落格廣告(BloggerAds)卡住網頁載入的完整解決方案


(Pic from: htcexperiments.org)
目前台灣部落格的前兩大廣告商為「Google Adsense」與「BloggerAds」,Google Adsense 挾帶自家龐大資料庫的優點,因此廣告相關性很精準;BloggerAds 的好處是只要放的位置高,就算沒有點擊數也是有固定收入。而如果部落格有放這兩個廣告一段時間的話,應該可以感受到這兩家在網頁載入效能的差別──

1. Google Adsense:龍頭老大的程式碼當然是專業、沒話說,javascript 使用動態載入,完全不會阻礙頁面其他區塊的載入

2. BloggerAds:台灣的公司要多加油,程式碼使用同步載入,這樣只要伺服器一出問題或是網路塞車,那麼網頁所有在 BloggerAds 後面的 HTML 程式碼就只能眼睜睜地被塞住,完全無法執行。

以下為尋找解決 BloggerAds 此問題的過程及原理,想跳過請直接看「三、最佳安裝解決方案」。

2012年9月25日

部落格廣告商及使用技巧整理 (筆記)


(Pic from: iconfinder.com, Jeremybennett Sticky Note Pad And Pencil clip art)

各大廣告商

 Google Adsense:官網
 Google Adsense:中文 Blogger 網站
 Google Adsense:論壇
廣告相關性精確

 BloggerAds:官網
曝光就能計價

 BlogAD:官網

 UrLAD:官網

 SCUPIO:官網
單月瀏覽頁數需超過30萬才能申請

 博客來AP策略聯盟:官網

 Yahoo!奇摩購物中心 - 大聯盟計畫平台:官網

2012年9月20日

讓 Blogger 側邊欄有個簡易安裝的分頁(TAB)功能__(3) 隨機分頁功能


(Pic from: jQuery TOOLS,newcelebritweets.com)
本篇的主題為分頁(TAB)功能的應用:

1. 隨機顯示分頁功能。
2. 特定頁面之下的(隨機)顯示分頁功能。

2012年9月19日

讓 Blogger 側邊欄有個簡易安裝的分頁(TAB)功能__(4) 各種疑難雜症


(Pic from: jQuery TOOLS,psdzzle.com)
系列文「第一篇」提供了基本安裝的程式碼,如果有客製的需求時日後容易擴充。本篇的主題為解決分頁功能的一些疑難雜症,而如果有提出客製的相關問題,之後一併集中更新到此篇。

2012年9月12日

Blogger 相關文章+任意尺寸縮圖+更多相關文章


(Pic from: kickstarter.com,psdgraphics.com)
2016.4.9 公告:因 Google Drive 外連失效,請勿使用本篇的程式碼,請改用新版「Blogger 相關文章 V2__安裝懶人包


部落格想要於文末附上相關文章+縮圖功能的話,目前最常見的選擇是 LinkWithin 與無覓。使用這兩個外掛的優點是,安裝簡單、設定容易、圖片大小相同(都是正方形)、版面一致,不需懂語法就能輕易上手。而我考慮的因素有:

1. 使用外掛的隱憂:伺服器是否穩定、該公司能營運多久。
2. Google 查到的資料:LinkWithin 安裝後抓資料要一段時間;另外可能是因為中文的緣故,抓到的相關文章不一定很相關。
3. 不喜歡圖片被裁切,很多非正方形圖片被裁成正方形很難看。

P.S. 這篇 +Julius Zhan 寫的「更新圖相關顯示小工具」,提供了使用 LinkWithin 等等一些第三方外掛的不好經驗,非常值得參考借鏡!

所以,有了製作「最新文章+任意尺寸縮圖」的經驗後,便自己著手來寫這個 hack,並增加自己想要的功能──更多相關文章、排除特定標籤的文章。使用本 hack 可以自訂所有的細項,下面第一大點為說明這個 hack 的原理,想直接安裝請跳「二、安裝程式碼」。

2012年9月10日

三國志11 __ 251 孔融北海開局

PTT KOEI 板有人詢問 251 北海孔融開局,以下為發表於該板的內容──

提到停戰同盟的話,我猜原 PO 是種田派,那麼以下提供的小技巧,想要安心種田五年十年不成問題,可以龜到軍備充足、也可以隨時想撿尾刀就溜出去撿尾刀,給原 PO 參考一下:

2012年9月3日

Blogger 最新回應+留言者各種身份頭像


(Pic from: softicons.com,freepik.com,all-free-download.com)
完成「最新文章+縮圖」之後,聯想到文章的 json 資料既然有儲存縮圖網址,那麼留言的 json 資料應該也會儲存留言者頭像網址吧?有了上一篇的經驗之後,很快地找到頭像圖片網址,再加上一年前就寫過「修改留言者的各種身份頭像顯示+尺寸變更」,本篇的任務可說是駕輕就熟。

以下第一大點為找出留言者頭像資料的原理,想直接安裝本文的 hack 請跳到「二、修改 Abin 最新回應模組」。

2012.10.24 更新

本篇的版本目前發現一些 bug,例如刪除內容之留言、或內含超連結的留言,都可能會造成這個小工具的執行錯誤。若曾安裝這個小工具的話,請改安裝這個「更新版本」。


2012年9月2日

Blogger 各種 Hack 及工具教學大全

本文列出主站與分站使用的 hack 及工具。以下排列的順序依照 Blogger 執行顯示的順序:由上到下 → 由左至右




《網址及標頭區塊》

2012年9月1日

2012 BLOG 更新紀要索引

2012年8月28日

Blogger 私密留言(悄悄話)系統發佈網頁


(Pic from: iconfinder.com,iconspedia.com)

◎ 簡介

私密留言系統的幾大特點──

1. 可匿名留言:不必登入部落格帳號,任何人都可對站長私下留言。

2. 自動儲存留言身份:留言後自動儲存暱稱、密碼到 cookie,以後只要使用同一瀏覽器,即可不必再輸入暱稱、密碼。

3. 索引清楚:每則留言都有樓層索引。

4. 站長功能強大:可插隊回覆、重複回覆、刪除留言、收到 email 留言通知。

5. 系統動態載入:非同步動態載入的方式,加快部落格頁面載入的速度。

Blogger 私密留言系統 V2.0__簡易安裝及使用說明


(Pic from: iconspedia.com,Installation sous Linux : Autopackage, macin.wordpress.com)



一、簡介


有關功能部分的說明及版本的歷程,請見「Blogger 私密留言(悄悄話)系統發佈網頁

2012年8月27日

Blogger 私密留言(悄悄話)系統 FAQ 彙整


(Pic from: iconspedia.com,rvdailyreport.com)
一、留言者相關

Q:我留悄悄話很久了,但站長好像都不知道我有留言怎麼辦?
A:站長可能沒有使用 email 通知,請另外用 Blogger 的留言系統通知站長,提醒他使用 email 通知的功能

Q:密碼忘了怎麼辦?
A:建議第一次留言時,留下 email 資料,且以後均用同樣暱稱留言。如此若是密碼忘了,可從留下的 email 寄信給站長,詢問留言內容。

Q:為什麼留言內容不能使用 HTML 語法?
A:主要是安全考量,因為本系統無法驗證身份,為防止使用者利用語法進行破壞,故封鎖語法使用。

建議避免使用 IE8(含)以下瀏覽器


(Pic from: taiwanhouse.org.tw)
本文為公告網頁。

您記憶中的小叮噹是什麼模樣呢?市面上的主流瀏覽器都能完整呈現小叮噹的原貌,只有 IE8(以下本文提及 IE8 時,意指包含其以下之所有版本)顯示出他車禍送修的樣貌。IE 系列的瀏覽器,一直到 IE9 才能勉強跟上所有主流瀏覽器的語法規格、網頁相容性、javascript 執行能力等等,但 IE9 也僅僅能夠看到車尾燈而已,那麼 IE8 的效能及支援性更是不必多談。

2012年8月20日

[教學]讓網頁使用各種特殊文字區塊__(1) 安裝與使用 (CSS 技巧)


(Pic from: youtoart.com)
在我的「Blogger 文章相關工具及技巧(筆記)」 → 「美化文章內容」區塊記錄了一些 "標示特殊文字區塊" 的文章,例如標示 "程式碼"、"重點筆記"、"引文" 區塊等,由於本部落格目前主要是提供 Blogger 的相關工具及技巧,所以使用最多的是 "標示程式碼區塊"。其實各種不同的標示區塊原理相同,而一路使用下來也遇過不少問題,因此本篇來分享自己的心得與解決方案。

2012年8月14日

讓 Blogger 側邊欄有個簡易安裝的分頁(TAB)功能__(2) 安裝 Blogger 官方小工具


(Pic from: jQuery TOOLS)
上一篇的「留言 #02」Frank Liu 詢問「能否把 Blogger 官方小工具裝進這個分頁功能」。我的回答是,由於這個分頁功能是適用於安裝「HTML / Javascript」小工具,若要把 Blogger 官方小工具裝進去,受限於 Blogger 語法的關係,最多只能擺放一個;而且要修改 Blogger 語法的部分,說明起來得再整理一些 Blogger 語法知識。因此,原本認為這是個需要花點時間的任務。

沒想到睡前靈光一閃,突然想到一個「偷天換日」的點子,利用 javascript 來操作轉移 DOM 物件內容,把 Blogger 官方小工具的內容搬到我們的分頁功能裡,就達到了移花接木的效果,既輕鬆又簡單,完全不需要動到 Blogger 語法的部分,而且要擺放幾個 Blogger 官方小工具都行。只是現在要感嘆的是,如果老早就想到這個點子,我的側邊欄滿滿的分頁效果,當初就不用 hack 得那麼累了...好的,以下就來看看如何實做。

2012年8月13日

讓Blogger的標籤能「多層」樹狀分類__(三)各種疑難雜症


(Pic from: I Loathe Multi Level Marketing, psdzzle.com)
系列文「第一篇」提供了基本安裝的程式碼,如果有客製的需求時日後容易擴充。本篇的主題為解決多層樹狀分類標籤的一些疑難雜症,而如果有提出客製的相關問題,之後一併集中更新到此篇。

2013.1.4 公告

樹狀標籤更新版本已經發佈,請「按此跳至新版頁面」,安裝新版本可避免舊版本會發生的狀況與問題。


2012年8月8日

多媒體影音HD機上盒 IBT-1283VOD 開箱心得

最近趕搭奧運熱潮,藉著無線「HD 四頻道」開播的機會,購入可收看 HiHD 數位頻道的多媒體播放機──IBT-1283VOD,讓買了數年的 LCD TV 終於能真正發揮收看 HD 的功用。本篇是使用了一個禮拜以來柳暗花明又一村的摸索過程,以及心得、感想、一些密技等。怎麼幾天之中就能發現密技呢?這是我自己的定義啦,只要是說明書沒有的東西,應該都可以稱為密技吧?



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

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

2012年6月30日

功能強大的 Gmail 檢查新信工具__Checker Plus for Gmail™ (Chrome 套件)

這個 Chrome 瀏覽器的擴充套件「Checker Plus for Gmail™」,可隨時檢查 Gmail 是否有新信,會介紹也是因為他對處理部落格事務滿有幫助的;當然如果生活上的事務也用 gmail 處理,那幫助就更大了。這個工具以前也是滿有好評,可惜後來在「Chrome 線上應用程式商店」下架,導致比較少人知道;現在他又重新上架,因此取代了我長久以來使用的「Mail Checker Minus(Beta)」,成為最新的「即刻收信」 得力工具,以下就來介紹這個工具以及我的使用心得。

2012年6月26日

[教學]如何用語法保護網頁文章著作權__(2) 阻止全文轉載


(Pic from: 123rf.com)
接續「上一篇」,掌握了使用語法來控制訪客複製內容的關鍵技術後,也就擁有了保護自己創作的「倚天劍」,接下來看看這把寶劍能夠使出什麼樣的劍法。


一、基本招式

1. 阻止全文複製:複製內容既然可以偷加版權資訊,那麼當然也可以狸貓換太子──換成不相干的內容;不過掉包內容是太狠了一點,允許複製部分資訊是合理的作法,其餘的部分就改成「更多內容請見 WFU BLOG...」等自設版權宣告。

2. 不傷及無辜:這一點跟第 1 點是一體兩面,有時訪客只是複製個標題、網址、或是一句話,那麼就沒必要「寧可錯殺、不可放過」。利用語法計算複製的字數,低於自設標準就不加版權資訊

3. 轉換超連結語法:此為「上一篇」未解決的問題,把第 1 點的自設文字內容加上超連結,對於我們自己或是複製的訪客都有好處。

4. 允許自己複製:阻止全文複製這招其實是七傷拳,殺敵一萬、自損三千,像我常常搜尋自己 Blog 的資料,搞得自己也不能複製那還得了。因此使用語法,設定特殊按鍵組合,按下後允許全文複製,才不會中自己的招。

以上四點是本篇內容的概念,以下為實作方法。

2012年6月22日

[教學]Blogger 網誌清單的妙用+網站小圖示的調校

之前在友站看到交換連結清單,發現竟然除了基本的網站名稱之外,還能夠抓到最新文章的標題、時間等等資訊,而且就像即時排行榜一樣,只要交換連結發佈了最新文章,該網站就能立即攀上排行榜第一名,位置自動跳到最頂端!

當時覺得實在太神奇了,這是那個強大的外掛竟然可以做到這一點,後來才發現,原來這個所謂的強大外掛就是 Blogger 提供的小工具──「網誌清單」。


一、網誌清單當作交換連結的好處

網誌清單的真正用途其實是追蹤自己喜愛的網誌,放在網站的側邊欄就能隨時知道喜愛的網誌是否有了最新文章。但是如果拿來當作交換連結的話,其實有不少好處:

2012年6月19日

[教學]如何用語法保護網頁文章著作權__(1) 附加版權宣告


(Pic from: 123rf.com)
過去對於如何保護網頁著作權曾寫過一系列的構思,其中「純文字」的網頁最難防盜,所以必須花費最多的心力設計保護機制。想要讓嫖竊者知難而退,就得花一定的時間安排這些機制。

過了一陣子在網路上看到「某種語法」,可以在訪客複製文章時,自動附加一些訊息進去。這個點子很不錯,跟「保護網頁著作權的初階構思__(一)文章篇」→「三、暗藏文字」的構想類似,但執行起來更方便省時。再加上因為友站的文章多屬純文章內容,因此決定構思這個議題,是否純文字網頁有"更方便"、"更省時間"的防盜方法?由此開始的一系列文章,就是從這個點子出發,變化出各種的防盜機制。

2012年6月16日

太七__低等級學得敵技 Beta

太七低等級要學得敵技 Beta 的難處在於,HP 不足的情況下,大蛇放完 Beta 後會馬上接一個普通攻擊,等於連續攻擊兩次;而 Beta 放完如果我方只剩要學敵技的那個人活著,再一個普攻也等於全滅。那麼如果把 HP 增加到可以擋下 Beta+普攻,就可以學到 Beta,只不過,此時的 HP 就不能稱為「低等級」啦!

因此設計戰術必須解決最困難的此點,取回「當初」低等級通關流程的存檔,第一次可以挑戰大蛇時 Barret 為 10 級、HP 四百出頭,還無法擋下 Beta 一擊;等到後來取得沙灘車可以回來找大蛇學 Beta 時,Barret 已經成為 12 級、HP 近五百,擋下 Beta 綽綽有餘。

由於取得沙灘車前必能取得 Fire Ring,使得拿 Beta 變得無難度,因此本文就假設還沒拿到沙灘車前,Barret 等級為 12 的情況下,就當作是首次遇上大蛇時,該如何安排戰術學到 Beta。