WFU BLOG

讓Blogger能顯示「單篇文章瀏覽數」__(二)安裝程式碼

(Pic from: psdgraphics.com , freevectorgraphics.org ) 2015.3.27 公告：由於 Google 試算表全面強制升級，本篇的程式碼已經無效，請前往新版安裝網頁「 Blogger 單篇文章瀏覽數 V2 」。 三、安裝程...

讓Blogger能顯示「單篇文章瀏覽數」__(一)準備動作

(Pic from: psdgraphics.com , freevectorgraphics.org ) 「單篇文章計數器」對大部分部落格而言，是個幾乎都會內建的功能。訪客從文章的瀏覽數，可以方便地辨識出哪些是比較熱門的文章，這是個重要的參考指標，相信也能增加新訪客留在網站的...

Blogger 後台文章瀏覽數與 Google Analytics 數據差別很大的原因

(Pic from: freevectorgraphics.org ) 會寫這篇文章是因為最近幫部落格裝了「 單篇文章瀏覽數 」的功能，放在每篇文章的 右上角 以及 文末資訊區 。其數據是從 Google Analytics 撈的，結果跟 Blogger 後台文章瀏覽數一比對之...

Javascript 設計模式(筆記)__(3) DOM

很抱歉前一篇第四章「函式」的後半部內容，由於間隔了一段時間，儲存資料不小心被覆蓋掉了，而先前借的書早已歸還，只好有頭無尾了...另外中間的幾個章節，目前還想不出可以應用的地方，因此全部跳過。 第八章：DOM 和瀏覽器的模式 1. 關注點分離 網頁三個主要關注點為 內容...

Google Code 簡易使用教學__部落格外連 js 檔的好選擇

我想部落格使用外掛或是外連 js 檔時，最讓人無法安心的就是外部伺服器不穩定、 js 檔失效(或失連)了。外部伺服器是我們無法控制的，而外連 js 檔若是能改放到自己的網頁空間，那就能放心不少。 2013.6.19 公告 由於最近 Google Code 宣布中止對新使用...

[教學]Blogger文章分類﹍多層樹狀標籤(更新版)

(Pic from: I Loathe Multi Level Marketing ) 2016.5.23 公告： 目前已有新版本，請改用「 Blogger 樹狀標籤 V2.0﹍安裝懶人包 」、「 Blogger 樹狀標籤 V2.1﹍切換標題模式 」 時隔半年，閱讀過一些「...

2013 BLOG 更新紀要索引

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

Blogger 跟其他部落格比較起來，比較不友善的地方就是一些工具說明得自己想辦法啃官方說明文件；而本文的主題「Blogger 頁面判斷式」，配合不同的頁面型態(PageType)參數，就能在不同頁面時展現不同的版面效果，只是就算啃了「 官方說明文件 」對其應用也可能是一知半解。...

如何使用本站

本站最初架設的目的，是為了方便自己查找筆記，因此設計上對於搜尋資訊非常方便，也很注重友善的使用者體驗。那麼就來看看有哪些設計，可以讓網站逛得更流暢！ (圖片出處: pixabay.com )

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

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

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

2016.4.9 公告： 因 Google Drive 外連失效，請勿使用本篇的程式碼，請改用新版「 部落格即時留言板 WYBOARD + 表情圖案 」 會寫這個「即時留言板」小工具，大概是逛別人部落格時，想留言卻找不到留言板；若隨便找篇文章留言，與主題無關又顯得唐突。如果...

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

Blogger 最近推出顯示 G+ 追蹤者的小工具，有人的反應是與 Google Freind Connect 的性質重疊，而 G+ 專頁也會顯示追蹤者頭像，如果再加上這個小工具，那版面真是好不熱鬧。 目前我暫時在網頁上只擺這個 G+ 追蹤者的小工具，可以裝作看起來很有人氣的...

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

(Pic from: Office Worker ) 之前在「 +Shu-Yuan Tien  ──  Office Worker 」看到標籤出現在導覽列覺得挺神奇的，研究了一陣後發現可以在後台先把導覽列用滑鼠拖曳到網頁最上方，接著再把「標籤」小工具拖曳到導覽列，那麼網站所有的...

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

Google+ 今天正式推出了「社群」功能，作用相當於一個小型論壇，可以細分不同主題的討論區。而每個人都能參與討論、也能各自發起新的主題，不像 G+ 是由主人唱獨腳戲。 其實本站一開始使用 G+ 時便覺得定位有點尷尬，因為本站為 Blogger 相關的主題，而 G+ 是社交工...

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

這一篇還滿莞爾的，書名叫做「Javascript 優良部分」，不過可能是因為已經看過「 Javascript 設計模式 」的關係，略微掃過後覺得大部分內容沒有很特別，唯一引起我興趣的是他的附錄，歸納了「 Javascript 糟糕與不良的部分 」，剛好與書名完全相反，也是我決定作...

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

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

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

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

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

(Pic from: iconfinder.com ) 2016.3.28 公告： 2016.3.28 公告： 目前已發佈新版，請前往「 Blogger 標籤文章列表 V2 」 Abin 大發表的「 標籤/搜尋頁面只列出標題 」非常實用，過去曾使用過一段時間，但最後還是將此...

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

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

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

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

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

第三章：實字與建構式 建立各種物件比較有效率的方式── 1. 物件 // 舊的方式 var car = new Object(); car.color = "blue"; car.wheels = 4; // 新的方式 var car ...

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

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

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

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

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

相信正規表示式對很多學習 js 的人而言是頭痛的一塊，而我也不例外。各種參數的定義已經夠難記了，還有各種符號及括號要分辨、還有需要使用反斜線的字元要注意，就算這次記住了，等下次要用時大概也差不多忘了。 直到最近發現國外有高手寫了個正規表示式的「 線上自動產生器 」，總算讓我不...

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

(Pic from: softicons.com , freepik.com , all-free-download.com ) 一方面「 原版本 」 發現了一些 bug，因此需要出更新版；一方面也是讀了「 Javascript 設計模式 」 之後，剛好來練習新的 Javasc...

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

「Javascript 設計模式」不是一本初學者的書，作者自言這是給 "專業程式開發者" 看的，而我這業餘愛好者並不屬於此領域。但這本書對於 Javascript 寫了一段時間的人還是有很大的幫助，可以讓程式「 寫得更有效率、執行得更有效率、dubug 的時間...

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

2017.7.25 公告： 留言訊息注意事項已有新版處理方式，可參考「 讓 Blogger 留言注意事項能隨留言框移動，訪客才能真正看到 」。 撰寫 Blogger 的「 留言欄訊息 」（就是留言欄上方的張貼意見）時，長期以來一直有幾個困擾： 1. 只有少數幾個 HTML...

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

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

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

(Pic from: psdgraphics.com ) 寫完「 第一篇 」後，覺得內容稍微硬了一些，如有個實作的例子相佐會比較容易吸收，奈何文長已經無法再塞入舉例內容，因此就把實例留到本篇了。 一般文章常見的特殊文字區塊有公告區、修訂(增補、註釋)區、參考資料區等等，而本...

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

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

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

(Pic from: htcexperiments.org ) 目前台灣部落格的前兩大廣告商為「 Google Adsense 」與「 BloggerAds 」，Google Adsense 挾帶自家龐大資料庫的優點，因此 廣告相關性很精準 ；BloggerAds 的好處是只要...

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

(Pic from: iconfinder.com , Jeremybennett Sticky Note Pad And Pencil clip art ) 各大廣告商 ◎   Google Adsense： 「 官網 」 ◎   Google Adsense： 「 中...

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

本篇的主題為分頁（TAB）功能的應用： 1. 隨機顯示分頁功能。 2. 特定頁面 之下的(隨機)顯示分頁功能。

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

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

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

(Pic from: kickstarter.com ) 2016.4.9 公告： 因 Google Drive 外連失效，請勿使用本篇的程式碼，請改用新版「 Blogger 相關文章 V2__安裝懶人包 」 部落格想要於文末附上相關文章＋縮圖功能的話，目前最常見的選擇是...

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

PTT KOEI 板有人詢問 251 北海孔融開局，以下為發表於該板的內容── 提到停戰同盟的話，我猜原 PO 是種田派，那麼以下提供的小技巧，想要安心種田五年十年不成問題，可以龜到軍備充足、也可以隨時想撿尾刀就溜出去撿尾刀，給原 PO 參考一下：

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

(Pic from: softicons.com , freepik.com , all-free-download.com ) 完成「 最新文章＋縮圖 」之後，聯想到文章的 json 資料既然有儲存縮圖網址，那麼留言的 json 資料應該也會儲存留言者頭像網址吧？有了上一篇的...

Blogger 各種 Hack 及工具教學大全

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

2012 BLOG 更新紀要索引

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

(Pic from: iconfinder.com , iconspedia.com ) ◎ 簡介 私密留言系統的幾大特點── 1. 可匿名留言： 不必登入部落格帳號，任何人都可對站長私下留言。 2. 自動儲存留言身份： 留言後自動儲存暱稱、密碼到 cookie，以...

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

(Pic from: iconspedia.com , Installation sous Linux : Autopackage , macin.wordpress.com ) 一、簡介 有關功能部分的說明及版本的歷程，請見「 Blogger 私密留言(悄悄話)系統發...

Blogger 私密留言（悄悄話）系統 FAQ 彙整

(Pic from: iconspedia.com , rvdailyreport.com ) 一、留言者相關 Q：我留悄悄話很久了，但站長好像都不知道我有留言怎麼辦？ A： 站長可能沒有使用 email 通知，請另外用 Blogger 的留言系統通知站長，提醒他 使用 ...

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

(Pic from: taiwanhouse.org.tw ) 本文為公告網頁。 您記憶中的小叮噹是什麼模樣呢？市面上的主流瀏覽器都能完整呈現小叮噹的原貌，只有 IE8（以下本文提及 IE8 時，意指包含其以下之所有版本）顯示出他車禍送修的樣貌。IE 系列的瀏覽器，一直到 ...

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

(Pic from: youtoart.com ) 在我的「 Blogger 文章相關工具及技巧(筆記) 」 → 「美化文章內容」區塊記錄了一些 "標示特殊文字區塊" 的文章，例如標示 "程式碼"、"重點筆記"、&qu...

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

(Pic from: jQuery TOOLS ) 上一篇的「 留言 #02 」Frank Liu 詢問「 能否把 Blogger 官方小工具裝進這個分頁功能 」。我的回答是，由於這個分頁功能是適用於安裝「HTML / Javascript」小工具，若要把 Blogger 官方...

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

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

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

最近趕搭奧運熱潮，藉著無線「 HD 四頻道 」開播的機會，購入可收看 HiHD 數位頻道的多媒體播放機──IBT-1283VOD，讓買了數年的 LCD TV 終於能真正發揮收看 HD 的功用。本篇是使用了一個禮拜以來柳暗花明又一村的摸索過程，以及心得、感想、 一些密技 等。怎麼幾...

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

(Pic from: designdownloader.com ) 2015.10.21 公告： 此工具目前已更新到 V2 版，請前往新版安裝頁面：「 Blogger 最新文章 V2﹍任意尺寸縮圖 + HTTPS 」。 改完「 熱門文章縮圖 」功能後，下一個要動手的便是「...

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

(Pic from: psdgraphics.com , dreamstime.com ) 2016.8.15 公告： 已推出 V2 版本，請前往這篇「 Blogger 熱門文章 V2﹍卡片式縮圖 + 自適應尺寸 」。 Blogger 內建的熱門文章小工具，附帶了一個美觀的...

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

以文字內容為主的部落格，先天上吸引目光的能力已經輸旅遊、美食、攝影等以圖片為主的部落格一大截，如果整篇文章都是密密麻麻的文字，那麼再有深度的內容，也會如同嚴肅的講課內容一般，讓人昏昏欲睡。 幫純文字上色、讓文章的可看性加點分大致有兩個途徑，一個是改變標題、關鍵字的顏色，另一個...