公告版位

目前分類:Blogger 工具 (19)

瀏覽方式: 標題列表 簡短摘要

上一個版本「讓 Blogger 自動顯示系列文章」留言 #5 WHY 詢問「有時文章過長,想幫文章變更為好幾頁 ( 寫好幾篇 ),能否讓【 自動顯示系列文章 】的顯示結果不出現標題,而出現數字」。基本上「文章分頁」算是常見的功能,當文章內容較長,分頁功能可以讓讀者稍微喘口氣。雖然有的網站是為了增加瀏覽次數而使用這個功能,但畢竟太過火而引起讀者反感,總是得不償失,相信站長們心中自有一把尺。

在 Blogger 要做出分頁機制,並不是很好設計,需要說明的地方不少,因此把篇幅留給使用說明。建議先看 上一篇 →「一、系列文的原理」瞭解設計的原理,後續內容比較能理解。




Wayne Fu 發表在 痞客邦 PIXNET 留言(16) 人氣()

網站使用數字分頁功能,來方便訪客跳頁尋找、閱讀文章,這是各大網站很常見的設計。但 WFU BLOG 一直以來未採用,原因有二:

1. 如果不瞭解 Blogger 的機制,裝了這樣的外掛一定抱怨連連,請參考「Blogger官方自動分頁機制」,分頁的狀況常常會不如預期。

2. 本站屬於「資訊提供」的性質,訪客有七成來自搜尋引擎,主要目的為尋求問題的解答,平均停留頁數少,比不上旅遊、美食、心情抒發、插畫等等諸多類型的網站,訪客比較有輕鬆的心情進行跳頁式的閒逛。

不過最近一個案子需要分頁功能,且相信很多網站還是需要數字分頁的導覽效果,因此發佈此項研究成果。另外這個小工具能在跳頁時,頁面使用 Ajax 動態載入,算是獨家功能。以下先進行功能介紹,想直接安裝請跳至「二、準備動作」。




<< 請注意!本篇文章含會員限定內容 >>

Wayne Fu 發表在 痞客邦 PIXNET 留言(29) 人氣()

過去在撰寫系列文時,比較頭痛的一點是,在文末想列出所有的相關系列文章時,是一件麻煩的事情。而更麻煩的是,每增加一篇系列文,那麼之前所有的系列文,還得一篇篇去手動新增最新一篇的連結!因此整理系列文列表這件事,真是考驗耐心的絕佳試煉...

現在使用了本篇的系列文小工具後,不但安裝很簡單,操作上也完全不費力,一切以自動化流程實現,以後處理系列文這件事,就可以高枕無憂了!

不但如此,這個小工具還有不少絕佳應用,看完安裝及使用說明後,請務必參考「五、應用方式」。



<< 請注意!本篇文章含會員限定內容 >>

Wayne Fu 發表在 痞客邦 PIXNET 留言(26) 人氣()

舊版相關文章」的安裝方式稍微麻煩、複雜一些,如果對 Blogger 範本的操作不太熟的讀者,可能就無法安裝成功。因此,這個新版本改成安裝懶人包的方式,算是一個步驟就能完成安裝,相信不會再有安裝失敗的情形發生。

另外,WFU BLOG 的工具更新不一定會有版本號,但這個相關文章使用了 V2 的版本號,代表有重大變革,因此稍後會有詳細介紹。

有了這些新的功能,此版本可說是 Blogger 平台功能最強的「相關文章」工具,其勝過 LinkWithin 的理由可參考「舊版相關文章」→ 文章開頭的說明及舉例;而不建議安裝第三方工具的原因及影響請參考「為何部落格最好避免第三方外掛」。



<< 請注意!本篇文章含會員限定內容 >>

 

Wayne Fu 發表在 痞客邦 PIXNET 留言(68) 人氣()

前陣子在 +coke tech 的「首頁」看到,怎麼這個標籤分類工具有點眼熟?原來就是「Blogger 文章列表極速版__依標籤排列」。當初設計這個工具的原意本不在此,不過現在看起來,當成 Blogger 標籤工具也是一個很棒的應用!

其實長久以來,一直陸續有看到這樣的需求──「能不能讓 Blogger 按下標籤後出現文章列表」,尤其從別的部落格平台轉戰 Blogger 的使用者特別會詢問。因此感謝 +coke tech 的巧思,那麼就來動手調校一下原本的文章列表。

 

Wayne Fu 發表在 痞客邦 PIXNET 留言(6) 人氣()

市面上所有的 Blogger 文章列表工具,都有共同的兩大天生缺陷,當部落格規模較小時,還不會察覺到;但成長到數百篇、甚至上千篇文章時,就會發現:


(Pic from: forums.realmacsoftware.com)


1. 文章列表讀取的速度很慢 → 因為一次要讀取的 feed 資料太多

2. 只能列出最新的五百篇文章 → 因為 Blogger feed 一次最多允許讀取 500 項資料

過去寫了幾個「文章列表」的版本,同樣有以上問題。由於一段時間後,自己的部落格也會面臨 500 篇文章的關卡,因此未雨綢繆一下,使用新的技術來改善這兩個重大問題,這也是本篇「極速版」的由來。以下先說明這個版本的各項特點,想直接安裝請跳「二、安裝程式碼」。



Wayne Fu 發表在 痞客邦 PIXNET 留言(33) 人氣()

「下拉選單」是個從部落格建立以來便很想要的功能,不過大部分下拉選單除了安裝方式不容易,通常需要有 HTML 基礎才比較能成功;且另外比較麻煩的是,下拉選單很難具備管理性,也就是日後想調整選單內容、順序時,是個不太輕鬆的工程。



以上便是這篇安裝懶人包的源由,使用這個工具沒有語法基礎也能輕鬆安裝。另外本篇比較少見沒有先說明原理,因為私心偏好做了個 "三角頂端" 的選單形式,其原理十分複雜,需要專文解釋才清楚,如果想瞭解原理的讀者請再留言了,這樣目前可減少一些篇幅另外說明。(2014.12.30補充:三角頂單的原理可參考「簡單漂亮的 CSS 提示框(tooltip)懶人包實作」→「一、CSS tooltip 製作原理及參考資料」→「3. 三角尖端效果」)


<< 請注意!本篇文章含會員限定內容 >>

 

Wayne Fu 發表在 痞客邦 PIXNET 留言(97) 人氣()

Blogger 私密文章最傳統的作法為「將內容加密」,這最安全、但操作麻煩,若忘了密碼則連自己都看不到。


(Pic from: softicons.com)


去年曾研究出利用 js 來「偽裝的方案」,雖有人認為不安全、js 一關就會現形,不過 WFU 則認為從心裡層面來看是很安全的,因為站長不說的話沒人知道這個網站有私密文章,且相信沒有人會閒著特地關了 js 來測試每個網站有無私密文章,尤其在根本分辨不出某篇是否為私密文章的情形之下(只要不在文章開頭寫著「這是一篇私密文章...」)。

無論如何,想更保險的話,要在 Blogger 實現私密文章,現在還有另一種可能性──使用「網頁」官方小工具,可點以下網頁看效果:

 

Wayne Fu 發表在 痞客邦 PIXNET 留言(6) 人氣()

舊版 Blogger 私密文章+Lee Bruce 留言表示:「我覺得大家比較想要的是,類似臉書一樣給特定人士觀看,或是文章使用密碼上鎖的功能。(只讓有密碼的人看)」。原本對這個 idea 能否實現沒什麼頭緒,直到想起網址字串也是能玩很多花樣的。


(Pic from: bpm-ingenuity.com)


就像 PICASA 的圖檔網址,夾雜一長串的亂碼,只有知道 "完整網址連結" 的使用者才得以打開圖檔。那麼利用「把密碼加入網址」的概念,就能成功地把私密文章分享給知道密碼的人看了。

本篇的私密文章更新版,就是利用以上的 idea 來構思,請參考本文的步驟來安裝。不過由於牽涉到加密演算法,因此無法提供原始碼,這樣的作法跟「Blogger 私密留言」是一樣的。


2013.8.9 公告

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

Wayne Fu 發表在 痞客邦 PIXNET 留言(6) 人氣()

從別的部落格平台搬到 Blogger 的站長,應該有不少會懷念「文章上鎖」的功能,這在其他平台是常見的設計,但不知為何 Blogger 就是不開放?也許是 Google 以搜尋引擎起家,不希望大家都把文章上鎖,那麼機器人就沒文章可爬了吧!


(Pic from: bpm-ingenuity.com)


本文要提供的語法及技巧,可讓需要私密文章功能的站長,達到隱藏文章的目的,讓所有訪客都看不到特定文章的內容,只有以站長身份才看得到。

這篇文章的概念與「讓 Blogger 有快速載入的展示(DEMO)頁面」相同,都是從文章網址下手,只要自訂文章網址就能產生私密文章,以下說明如何安裝此功能。


2013.7.11 公告

本篇的程式碼可讓私密文章只有站長一人可看到。如果有給特定人看私密文章的需求(經由給密碼的方式),那麼請安裝更新版的程式碼:



Wayne Fu 發表在 痞客邦 PIXNET 留言(7) 人氣()

時隔半年,閱讀過一些「Javascript 的書」之後,回頭看當初樹狀標籤的程式碼算是很不成熟,加上「舊版本第一篇」留言 #24 iampisece 詢問相關問題,決定來修改「多層樹狀標籤」的程式碼。沒意外的話這一篇應該是最終版本了,因為所有的功能可整合在一起安裝,過去所有發現的大小問題在這新版本也都能解決。


(Pic from: I Loathe Multi Level Marketing)


若是第一次安裝樹狀標籤可直接跳「二、功能介紹、準備動作」;若曾安裝過舊版樹狀標籤,可從「一、更新摘要」看起。

Wayne Fu 發表在 痞客邦 PIXNET 留言(334) 人氣()

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


(Pic from: softicons.com,freepik.com,all-free-download.com)


Wayne Fu 發表在 痞客邦 PIXNET 留言(148) 人氣()

2014/5/18 公告:相關文章 V2 版本已經發布,還沒安裝過、或安裝過舊版的讀者,請前往此發布網頁:Blogger 相關文章 V2__安裝懶人包


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


(Pic from: kickstarter.com,psdgraphics.com)


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

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

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

Wayne Fu 發表在 痞客邦 PIXNET 留言(65) 人氣()



2013.8.9 公告

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


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


一、簡介


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

Wayne Fu 發表在 痞客邦 PIXNET 留言(12) 人氣()

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


(Pic from: jQuery TOOLS)


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

Wayne Fu 發表在 痞客邦 PIXNET 留言(41) 人氣()

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


(Pic from: designdownloader.com, tubaba.com)


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

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

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

Wayne Fu 發表在 痞客邦 PIXNET 留言(56) 人氣()

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


(Pic from: psdgraphics.com, dreamstime.com, tubaba.com)


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

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

Wayne Fu 發表在 痞客邦 PIXNET 留言(26) 人氣()

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


(Pic from: jQuery TOOLS)


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

Wayne Fu 發表在 痞客邦 PIXNET 留言(37) 人氣()

簡易安裝》    《安裝最新推文》    《使用說明



2013.8.9 公告

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


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


一、簡介


有關功能部分的說明及版本的歷程,請見「WPS 部落格推文系統發佈網頁

安裝後,會在文末出現推文留言框,效果大致如下圖:



Wayne Fu 發表在 痞客邦 PIXNET 留言(12) 人氣()

找更多相關文章與討論