2012年4月30日

文章列表+「讚」統計(依標籤排列)


(Pic from: iconfinder.com, iconarchive.com)
2016.4.8 公告:因 Google Drive 外連失效,請勿使用本篇的程式碼,請改用新版「Blogger 文章列表極速版﹍(2) 依標籤排列


自訂安裝篇

如果不需要自訂版面配置,那麼只需要依「簡易安裝」來安裝程式碼即可;而本篇則是列出可以修改版面配置的程式碼位置。

在「簡易安裝」的第一個 js 檔,作用為收集所有要印出的資料,第二個 js 檔則印出文章列表的表格,因此自訂安裝主要是改第二個 js 檔的內容。以下的內容可複製到文書處理軟體,將欲自訂的部分修改完後,依照同樣的步驟:新開一篇文章 → 複製修改後的程式碼貼上 → 存檔即完成。

2013.8.10 公告

由於近日存放在 Google Code 的 js 檔全部被刪除了,本文的外連 js 檔已改放到 Google Drive 空間。曾安裝過本文程式碼的讀者,請修改程式碼中 A 行的 js 檔連結。為了避免日後有其他意外,也建議讀者參考「取代 Google Code 外連 js 檔的選擇__Google Drive」,自行備份 js 檔並上傳到自己的 Google Drive 空間。


文章列表+「讚、推文」統計(依樹狀標籤排列)


(Pic from: iconfinder.com, eldoradomedicalbuilding.com, iconarchive.com)
2016.4.8 公告:因 Google Drive 外連失效,請勿使用本篇的程式碼,請改用新版「Blogger 文章列表極速版﹍(1) 依日期排列


自訂安裝篇

如果不需要自訂版面配置,那麼只需要依「簡易安裝」來安裝程式碼即可;而本篇則是列出可以修改版面配置的程式碼位置。

在「簡易安裝」的第一個 js 檔,作用為收集所有要印出的資料,第二個 js 檔則蒐集推文數目,第三個 js 檔印出文章列表的表格,因此自訂安裝主要是改第三個 js 檔的內容。以下的內容可複製到文書處理軟體,將欲自訂的部分修改完後,依照同樣的步驟:新開一篇文章 → 複製修改後的程式碼貼上 → 存檔即完成。

Blogger「文章列表+快速顯示讚統計」__簡易安裝


(Pic from: designdownloader.com, Installation sous Linux : Autopackage)
2016.4.8 公告:因 Google Drive 外連失效,請勿使用本篇的程式碼,請改用新版「Blogger 文章列表極速版﹍(1) 依日期排列


以前所做的「文章列表+讀者反應」雖然能夠勉強列出每篇文章的「讚」統計,不過執行速度真是個大悲劇,有興趣挑戰耐心的話,可以點擊這個「展示頁面」觀看效果。當網站規模不大時,這速度是可以忍受的;但文章累積到一定數量,速度慢就是個大問題。歸咎其原因,之前列表裏的的讀者反應有三種,讀取資料時得分別跟三個 server 送出 request(請求),請求的數目還得乘上文章的數量...光用想像就知道這要等多久了。

為了效率著想,Google 的 +1 使用者相對上極少──刪除;讀者反應的點擊量也不大──刪除,使用刪去法後只需要等待「讚」按鈕顯示的時間。但,當網站有幾百篇文章、甚至上千時,等待 server 傳來這數百、上千個 request 也是一種沒效率,於是花了一點時間研究 facebook 資料庫,終於找到了方便的統計資料存取方式。以下直接說明新版「文章列表+"讚"統計」的安裝方式,而 facebook 資料庫的存取另外再找時間專文討論。

2013.8.10 公告

由於近日存放在 Google Code 的 js 檔全部被刪除了,本文的外連 js 檔已改放到 Google Drive 空間。曾安裝過本文程式碼的讀者,請修改所有程式碼的 js 檔連結。為了避免日後有其他意外,也建議讀者參考「取代 Google Code 外連 js 檔的選擇__Google Drive」,自行備份 js 檔並上傳到自己的 Google Drive 空間。



2012.7.30 增補

本篇的文章列表均包含"讚"統計,如文章列表不需要讚統計,可參考「動態檢視 Blogger 文章列表──簡易安裝」→ 文末 2012.7.30 增補 → 四、個別安裝,有依日期排列、依標籤排列兩種格式。



文章列表+「讚」統計(依日期排列)


(Pic from: iconfinder.com, iconpng.com, iconarchive.com)
2016.4.8 公告:因 Google Drive 外連失效,請勿使用本篇的程式碼,請改用新版「Blogger 文章列表 RWD 版﹍(3) 依日期排列+讚統計


自訂安裝篇

如果不需要自訂版面配置,那麼只需要依「簡易安裝」來安裝程式碼即可;而本篇則是列出可以修改版面配置的程式碼位置。

在「簡易安裝」的第一個 js 檔,作用為收集所有要印出的資料,第二個 js 檔則印出文章列表的表格,因此自訂安裝主要是改第二個 js 檔的內容。以下的內容可複製到文書處理軟體,將欲自訂的部分修改完後,依照同樣的步驟:新開一篇文章 → 複製修改後的程式碼貼上 → 存檔即完成。

文章列表+「讚」統計__依標籤排列──DEMO

文章列表+「讚」統計__依日期排列──DEMO

文章列表__依標籤排列──DEMO

文章列表__依日期排列──DEMO

2012年4月29日

在 Blogger 水平功能選單(Menu Bar)使用語法產生動態效果


(Pic from: design.oneter.com)
2014.9.23 公告:由於 Blogger 官方「網頁」小工具已經改版,導致本文方法失效。要在網頁小工具使用本文使用的圖片、語法技巧,請改參考「回到頂端(Go Top)按鈕放在浮動導覽列」的實作方法。

一般而言,Blogger 本文區上方的水平功能選單,提供了快速跳轉網頁的功能,這代表著每個單獨選單都是超連結。不過有時會想要把某些動態顯示的功能按鈕擺在選單上,因為選單總是比較醒目,但這些功能偏偏又不是超連結,只是一個利用按鈕來啟動的功能,那麼就無法放在選單上了,只好到後台改範本,找地方安插這些按鈕,總是比較麻煩一些。本文要提供的,便是無意中發現的密技,讓這些功能性的按鈕也能放在選單上

2012年4月21日

Google 試算表 (筆記)


(Pic from: Jeremybennett Sticky Note Pad And Pencil clip art)
資料庫運用

取得試算表資料原理:海馬迴受損的天空──Google 資料庫方案–Spreadsheet–(1)資料呈現

取得試算表資料範例:Using Google spreadsheets as your database

取得試算表資料簡例:My Friend Blogroll

將資料存到試算表:How do I send external data from a non-Google form field into a Google Spreadsheet to be stored?

Google Spreadsheets API 參數:使用 Google Spreadsheets API 搭建線上應用

Blogger 留言相關工具及技巧推薦 (筆記)


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


串聯式留言

串聯式留言──作者設置高亮Highlight Author Comments in Blogger's New Threaded Comment System
Blogger 的新版串聯式留言,雖然幫作者留言區加了一個 logo "",但不仔細看還是無法直覺的辨認出留言者與作者。這個 hack 可讓作者留言區加上自訂底色,看起來不但清楚且美觀許多,非常建議安裝。

Blogger 周邊產物 (筆記)


(Pic from: Jeremybennett Sticky Note Pad And Pencil clip art)
寫部落格工具弱格吉米言──寫部落格,用 Windows Live Writer 就對了!

 製作部落格貼紙:一開始就不孤單Ⅱ──製作部落格貼紙

Blogger 小工具推薦 (筆記)


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

美觀、裝飾小工具

正妹報時工具彙整正妹報時(美人時計)彙整──小尺寸展示頁」、「正妹報時(美人時計)彙整──大寸展示頁(一)」、「正妹報時(美人時計)彙整──大寸展示頁(二)」、「正妹報時(美人時計)彙整+大尺寸圖片 hack
在網站擺個正妹報時的區塊應該有吸引目光的效果,WFU BLOG 整理了市面上主要的正妹報時工具,按照介紹網頁安裝程式碼即可。

Blogger 知識 (筆記)

Blogger 結構

 「Blogger 範本__(一)各種註解方式及區塊的修改
 「Blogger 範本__(二)標頭、導覽列、側邊欄、頁尾區塊的程式碼
 「Blogger 範本__(三)文章及留言區塊的程式碼

Blogger 資料來源用法與整理Abin's Tech Note──Blogger 資料來源用法與整理 (Site Feed Usage)
利用 feed 網址取得後台資料庫的方法,以及各種參數解說

 Blogger 模版結構:Abin's Tech Note──Template 的基本內容和結構
Blogger 模版簡單介紹。

 Blogger 模版彩色詳解ETBlue 外星人寄居地球──圖解:Blogger 新樣板系統的 html 頁面結構
Blogger 模版彩色圖表詳解,大推這一篇,看完 Blogger Hack 功力倍增。

Blogger 能見度、SEO 相關技巧 (筆記)


(Pic from: iconarchive.com, Jeremybennett Sticky Note Pad And Pencil clip art)
Google 官方 SEO 教學文件:「搜尋引擎最佳化 初學者指南

調整文章標題顯示順序:「Channel【X】──Blogger SEO 第一步 - 調整文章標題顯示順序
非常必要的動作,因為 Blogger 預設出現在搜尋引擎的標題為「網站名稱在前,文章標題在後。」這代表著網站名稱被搜尋到的優先權高於文章標題。但我們會希望所寫的文章能被優先搜尋到,而非期待有人在搜尋引擎搜尋我們的網站名稱吧?所以這個動作一定要做。

 淺談 Blogger SEO:弱格吉米言──淺談 Blogger SEO (Search Engine Optimization)

 十個 SEO 要點:My Blogger Tricks──10 Great SEO Tips For Startups In Under 10 Minutes by Google

 SEO 最高境界:福清SEO──SEO最高境界就是做好內容脫離SEO」、「SEO學習網──SEO最高境界就是不做SEO」、「好網站不必SEO也上第一

Blogger 小技巧推薦 (筆記)


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

讓版面美觀

隱藏 Blogger 導覽列How to remove the Blogger Nav bar?
應該沒多少站長不想隱藏 Blogger 上方的導覽列吧?這個網頁的語法是最最簡單又有效的一個。

2013.4.13 修訂

由於 Blogger 已經修改程式碼,現在要隱藏導覽列有更簡單方便的介面,請參考這個「Blogger中文社群討論串


標籤/搜尋頁面只列出標題:Abin's Tech Note──標籤/搜尋頁面只列出標題 (Simplify the result of label and search)
這個技巧有利有弊,缺點是如果從文章標題不容易判斷內容是否值得一讀的話,對我們網站不熟的訪客可能選擇離開,所以可能會流失網站閱覽率,畢竟有文章摘要比較好判斷是否要閱讀這篇文章,就像提供試吃的產品銷路會比較好;但是文章標題如果下得精確,能把所有要點全標示出來,這個技巧反而能讓同一頁面顯示更多文章數,同時也節省了訪客的搜尋時間,對雙方都有好處;所以,就看站長的抉擇了。

"標籤/搜尋頁面"能切換標題模式與文摘模式WFU BLOG──讓"Blogger標籤/搜尋頁面"能隨時切換標題模式與文摘模式
這個 hack 解決了 Abin 版本的難處,訪客能保持「文摘模式」,也能隨時切換到「標題模式」。

Blogger 側邊欄相關工具及技巧 (筆記)


(Pic from: Jeremybennett Sticky Note Pad And Pencil clip art)

最新文章、回應小工具

Abin 最新回應Abin's Tech Note──「最新回應」模組 (Recent Comments)
簡單的程式,又能動態讀取後台的資料庫,速度與功能兼備,四星級工具。

 LVCHEN 最新回應LVCHEN 的美國生活指南──最新回應 2.0 來囉!
殺手級程式,功能與速度都無可挑剔。

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

Blogger 文章相關工具及技巧推薦 (筆記)


(Pic from: designdownloader.com, Jeremybennett Sticky Note Pad And Pencil clip art)
提供額外資訊

系列文功能WFU BLOG──讓 Blogger 自動顯示系列文章

相關文章+縮圖WFU BLOG──相關文章+任意尺寸縮圖+更多相關文章
Blogger 功能最強的相關文章工具,用了就知道。

相關文章無縮圖:Abin's Tech Note──加入相關文章功能(Related Post)

 隨機文章+縮圖WFU BLOG──隨機文章 + 自適應尺寸縮圖

2012年4月20日

FB 及社交外掛相關資料 (筆記)

Facebook Graph API官方文件介紹:Gray Liao──Facebook ActionScript Graph API ( 0 ) Graph API與Facebook官方文件介紹

將 Facebook 資料轉成 json:Get Twitter and Facebook Link Statistics with JSON and jQuery

Facebook 分享內容、圖片錯誤的解決方式:Fix: Wrong Description and Image on sharing posts to Facebook

Google +1 按鈕安裝:+1 Button - Google+ Platform

Facebook 讚按鈕安裝:Like Button - Facebook 開發人員

Facebook 留言 API:Facebook comment ID issue

Google+ 徽章按鈕安裝:Google+ Badge - Google+ Platform — Google Developers

URL最大長度 :Allen's Blog──URL最大長度

url 跟 facebook 有何關係?因為取得 json 格式的 facebook 資料得透過網址得到,一旦資料量大,一次能到的資料量取決於瀏覽器 url 長度的限制。由這篇文章可知果然還是那個「爛瀏覽器」的 限制最大,url 的長度限制為 2083。不過經過 WFU 的實測(用 javascript 跑),長度超過四千多時 javascript 會當掉,所以四千這個數字是保險的;但無論如何,url 只能傳輸四千個位元還是遠低於任何一款瀏覽器。


筆記增補時間請見下方更新資訊。
2012年4月19日

CSS 相關 (筆記)

CSS 全參數彙整螞蟻的 CSS 速查表

CSS 寫法與效能PTT 的討論

線上學習 CSS:學習CSS佈局(中文版)

增進 CSS 效能:增進 CSS 效能、解 IE hack 的 Tips

有效率的CSS選擇器:如何撰寫有效率的CSS選擇器

 CSS 語法概念:通達人驛站──快速學習修改 Blogger CSS筆記

 CSS3 瀏覽器兼容性處理:css兼容性hack (ie6,ie7,ie8,firefox,chrome)

 簡易 CSS 下拉選單:純CSS下拉選單

 用CSS3做Logo:Jas9──用CSS3做Logo

 CSS 背景縮放:Dream Talker──CSS 背景縮放

 圖片、區塊水平置中的語法:圖片水平置中的用法

 把圖片轉換為灰階:Convert an image to grayscale in HTML/CSS

 斷行語法:word-wrap同word-break的區別-Web標準教程

 字體的英文名稱:指定CSS時 字體的英文名稱

 IE下不出現捲軸的方法:CSS overflow 屬性用法讓你掌握控制捲軸效果

 IE 下實現文字陰影效果:一棵樹──IE下實現類似CSS3 text-shadow文字陰影的幾種方法
簡單的文字陰影效果只要使用 text-shadow 就能實現,不過獨一無二的 IE 就是必須繞遠路,試了多種 IE 的 filter 效果都是慘不忍睹,唯一還能接受的是使用這篇文章的 filter:glow。但事情沒這麼簡單,filter:glow 丟到 <span> 標籤裡面 IE 照樣不吃,因為 filter:glow 必須丟到符合「hasLayout」的元素裡面才行,真是夠了。

WFU BLOG 標題使用的陰影,便是將 filter:glow 丟到 <table> 裏;,再加上置中的參數,多打了不知多少文字,好不容易才勉強在 IE 下有類似文字陰影的效果


筆記增補時間請見下方更新資訊。
2012年4月18日

HTML 相關 (筆記)

工具彙整

 HTML 標籤列表:HTML 標籤列表

 HTML 色碼紫貝殼網頁資源網──網頁色碼選擇器

 特殊符號大全All Characters

Javascript 語法教學、技巧 (筆記)


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

Javascript 教學

 JavaScript 基礎教學:JavaScript 教學

 JavaScript 處理 W3C DOM 教學:KingKong Bruce記事── JavaScript - W3C DOM簡介

◎ JavaScript 進階概念、整理、教學:KingKong Bruce記事── JavaScript 標籤

2012年4月17日

相容各大瀏覽器的全網頁簡繁快速轉換語法


(Pic from: ibm.com, ibm.com)
2014.12.11 公告:請改用目前最新的版本「讓網頁根據訪客語言設定, 自動轉換簡繁文字」。

雖然一些瀏覽器有簡繁轉換的外掛,但不是每個使用者都有裝,所以如果自己網站的訪客性質是簡體、繁體需求都有的話,那麼提供簡繁切換的功能會是比較友善的閱讀介面。然而,找了一些網路上流傳的簡繁轉換語法,沒有一個能做到相容於各大瀏覽器,有的 IE 下失效,有的 FireFox 下當掉,總之現存的語法沒有單一的完美解決方案,想要相容於各大瀏覽器,目前只能靠「Google 翻譯」。

先說結論好了,目前想了一個辦法,結合網路上各種語法的優點,整合成一個執行快速、安裝簡便、又相容於各大瀏覽器的套裝語法,這樣至少比「Google 翻譯」來得快又方便許多,以下為安裝方式:

太七 低等級挑戰紅綠寶石巨獸__超省時通關流程(下)

本篇為真正的省時通關流程,再重複一下最省時的通關條件:「不練等級、不練寶石、不練極限技、不偷 武器防具 、不養鳥、不買武器防具、只打 boss 戰。」稍微解釋一下為何特別增加「不偷武器防具」的條件,因為偷東西的成功率是看我方等級與被偷者的等級差距,我方等級越高則越容易偷到,但以低等級進行通關時,偷等級高的怪物身上好的武器防具,往往得浪費一、二十分鐘以上,這時間還不如拿來練極限技,因此不建議在低等級的玩法偷東西。好的,以下為概略的流程簡介。

2012年4月15日

jquery 語法 (筆記)

Jquery 語法技巧

外部超連結自動另開視窗:Wax Way──將Blogger的外部超連結(Hyperlink)另開視窗(Target)

 使用 ajax 無刷新改變頁面URL-1:welefen的隨筆──使用ajax和history.pushState無刷新改變頁面URL

 使用 ajax 無刷新改變頁面URL-2:AJAX History State

 IE流覽器下Ajax不刷新的問題:IE流覽器中文網站 ──IE流覽器下Ajax不刷新的問題

 用 jquery 執行 replace:How to Find text and replace using jQuery

網頁多媒體效果 (筆記)

 aJax 載入動畫:ajaxload.info

 JavaScript 圖片滑動切換效果:cloudgamer

 JavaScript 圖片滑動展示效果:cloudgamer
2012年4月13日

太七 低等級挑戰紅綠寶石巨獸__超省時通關流程(上)

時隔十多年,第三次重玩(等於玩第四次)想回味一下太七的劇情,這次只想跑完流程重溫一下故事情節,除了 boss 戰無可避免沒辦法,其他時間不想多花,於是把以前的低等級通關流程拿出來檢討一下,看看還有沒有可以 "精簡時間" 的步驟。以前古早的打法除了只打 Boss 戰以外,還會特地練極限技以及特定魔石,而低等級下為了得到好的武器、防具,也花了不少時間在偷東西上。於是這次決定把太七通關的時間壓到最少,看看有沒有可能「不練等級、不練寶石、不練極限技、不偷武器防具、不養鳥」,在這麼節省時間的狀態下,還能夠只打 Boss 戰,而且──戰勝「紅、綠寶石兩大巨獸」

2012年4月12日

太七 __ 低等級挑戰紅綠寶石巨獸(Aerith 單打)


(Pic from: FF7 Cloud的傳奇)
接續「上一篇」,由於紅寶石只要隊伍中有二人以上進行攻擊便會隨機捲走隊員,通常必須用單打的方式對付紅寶石。但,好不容易將 Aerith 復活,捨不得再讓她 "戰鬥不能",因此只好幫她想想辦法如何在低等級下單打紅寶石。

太七 __ 低等級挑戰紅綠寶石巨獸(Cloud+Aerith 雙打)


(Pic from: FF7 Cloud的傳奇)
拜太七中文化之賜,有幸再度重拾塵封已久的太七,這是第二次重玩太七,距上次發表低等級挑戰巨獸已有將近六年,而這次重玩算是一方面藉著中文化更瞭解故事劇情,一方面則是不讓憾事重演──讓 Aerith 復活, 倒也是新鮮有趣的玩法,尤其是挑戰巨獸。(至於 Aerith 要如何留在隊伍就不是這篇討論的重點了… 請自行 google 一下囉~~)

太七 __ 低等級挑戰紅綠寶石巨獸(Cloud 單打)


(Pic from: FF7 Cloud的傳奇)
最近把太七重玩了一遍(首次重玩太七),其實主要目的是看到底不練功、不練魔石能夠以多少等級結束這遊戲,所以遇敵就逃,敵人身上有重要裝備、道具的也是偷了就跑(學敵技可不能學了就跑),只有在為了練出 Clood 的第三級極限技時被迫昇了三級(昇 Cloud極限技所要殺的人數還真多)。因此遊戲中、前期的 BOSS 打起來倍嘗艱辛(有挑戰性),HP不夠是主因,像五台山上的 BOSS 會放 AERO3,一次損一千五左右,我三位隊員 HP 均不破千,還好有 BARRET 的 Mindblow 耗掉牠所有 MP,三人才把牠圍毆致死....

2012年4月1日

文章列表+「讚」統計__依樹狀標籤排列──DEMO