Blogger 最新文章 V3﹍相容新舊圖片網址 + WebP 格式
去年底(2021) Blogger 更改了圖片網址格式,詳情可參考「 Blogger 圖片大瘦身!官方提供密技轉換成 WebP 格式 」→「二、新舊圖片網址格式差異」。 雖不知官方為何要這麼做,但此舉卻是影響很大,許多需要顯示縮圖的工具都可能異常,也包括以前製作的「 Blogg...
繼續閱讀全文Blogger 文章自動產生目錄大綱區塊

今年的 Blogger 架站案例中,好幾個都要求在文章中製作一個區塊,裡面擺放多個錨點超連結,點擊後可跳到文章中對應的大標題。 雖然每個案例的客製執行效果都不同,有的將這個區塊放在側邊欄浮動,有的希望每個錨點分別出現在自訂位置,有的希望所有錨點集中在文章開頭,不過目的都是相同...
繼續閱讀全文統計歸納網站所有連結的點擊成效﹍GA 事件追蹤器(會員加值文章)

2023.3.27 公告: 從 2023.7.1開始舊版 GA 將失效,請改用 GA4 並閱讀這篇「 GA4 如何追蹤自訂事件的成效及建立報表 」。 上一篇「 GA 事件追蹤器 」的免費版功能比較少,本篇的版本可以做到這些事: 排除 Blogger 站長自己的點擊 對小工...
繼續閱讀全文查詢網站所有連結的點擊成效﹍GA 事件追蹤器

2023.3.27 公告: 從 2023.7.1開始舊版 GA 將失效,請改用 GA4 並閱讀這篇「 GA4 如何追蹤自訂事件的成效及建立報表 」。 我們的網站可能裝了各式各樣的小工具,例如: 首頁的輪播 側邊欄的標籤、熱門文章、精選文章... 文末的相關文章、延伸閱讀...
繼續閱讀全文Blogger 相關文章 V4﹍行動版專用

不少讀者都詢問過「 相關文章 V2 (含縮圖功能) 」能否裝在手機版,實際上如果真的這麼做的話,一定馬上就破版,因為行動裝置有著各種不一樣的螢幕寬度,加上直立、橫躺的操作,各種專為行動版而設計的工具一定要符合 RWD 才行。 除此之外,V2 的版面也不適合做成 RWD,如果要...
繼續閱讀全文Blogger 隨機文章 V2 + 輪播效果

前陣子介紹完最熱門的 jQuery 輪播外掛「 Owl Carousel 」,聯想到部落格文章結束處,經常會配置的 "推薦文章" 工具,例如「 相關文章 」,如果搭配輪播功能的話,應該會有不錯的效果。 要進行輪播之前,得先隨機抽出足夠的樣本數,而 ...
繼續閱讀全文Blogger 讓讀者以 Email 訂閱最新文章﹍任何位置都能擺放, 免註冊 FeedBurner

用「 RSS 」訂閱網站最新文章,是非常方便又強大的工具,可惜只有網路重度使用者比較知道 RSS 是什麼,一般的讀者並不熟悉 RSS、且不一定想要瞭解。 為了讓各種層次的讀者都能收到網站最新文章的通知,提供 Email 訂閱會是最簡單的方式,且操作方便、不需另外研究相關工具。...
繼續閱讀全文Blogger 延伸閱讀 [小工具][文字版]
![Blogger 延伸閱讀 [小工具][文字版]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieEme0aVa0F1UJh1LAo9ecr57flsrggvxDxfnQlWdeC8dMQSAuknHLREqwOZO0O_WfGRVsVKb_gL8ja6hrkWqe1zfxbOv6vy997QsuPMPH7ZtZdBVGkor1g-BAB-4ajXh0soH_vc21WNQl/s1600/blogger-related-post-in-text.jpg)
為了讓訪客看完文章不馬上離開,我們通常會在文末設計一個區塊,稱為 "延伸閱讀" 或 "您可能對這些文章有興趣" 等等,接著手動挑選、安插一些相關文章的連結。 手動複製這些連結自然是很麻煩,也是可安裝一些小工具來替我們做這件事。其實 WF...
繼續閱讀全文Blogger 隨機文章 + 自訂尺寸縮圖 (側邊欄工具)

除了「 熱門文章 」,側邊欄另一個可吸引訪客停留、讓網站舊文章曝光的常用工具,就是 "隨機文章" 了。 之前曾製作了「 Blogger 隨機文章 + 自適應尺寸縮圖 」,由於是橫式版面,只適合擺放在文章結束處。不過將程式碼稍微修改一下,變成直式版面的話,就...
繼續閱讀全文Blogger 最新文章 V2﹍任意尺寸縮圖 + HTTPS

2022.02.07 公告: 此工具目前已更新到 V3 版,請前往新版安裝頁面:「 Blogger 最新文章 V3﹍相容新舊圖片網址 + WebP 格式 」。 之前寫的舊版工具「 最新文章 」已經很久沒有更新,由於前陣子「 BLOGGER 支援 HTTPS 」之後,很多 B...
繼續閱讀全文Blogger 相關文章 V3

這個工具使用了「相關文章」的版本號,但其實跟「 相關文章 V2 」的市場、用途並不相同。V2 版的文章會顯示縮圖,而 V3 版完全只有文字,難不成這個工具退化了嗎? 其實他比較偏向「 系列文功能 」的風格,只列出建議閱讀清單的文章標題。但篩選方式又不同, 系列文是利用 ...
繼續閱讀全文Blogger 圖片語法轉換器﹍改變行動版圖片尺寸

從這篇「 加快 Blogger 行動版圖片載入速度 」我們瞭解到,Blogger 有辦法讓行動版的圖片改用小尺寸,進而讓網頁載入速度非常有感地提升,只要符合這兩個要件: 1. 使用 PICASA 圖床 2. 為每張圖片設定寬度 手動設定圖片寬度的方法,請參考該篇文章的...
繼續閱讀全文[工具] Blogger 隨機文章 + 自適應尺寸縮圖
![[工具] Blogger 隨機文章 + 自適應尺寸縮圖](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj33Z1SlNzuxk_Bz1ZnGCkuQu_lza1mQbIsmsLIo21cWtiMiBP1xx_5UOjt7_Q1vf-qDc0WHFh6RDv95hzXJOOQrDU3Ht36pZSpJLEVYDjbgoLEvFeOt7a57Pu4N1zg7y062XuPKJvN7Q6l/s1600/blogger-random-post-rwd-thumbnail.jpg)
2016.5.26 公告: 目前已有新版本,可改安裝「 隨機文章 V2 + 輪播效果 」。 前陣子幫朋友安裝放在文章結束處的「 系列文 」功能,以及放在留言區塊前面、類似 Linkwithin 的「 相關文章 」工具,跟他解釋「系列文可以從文章相關的標籤,隨機抽選指定的文章數...
繼續閱讀全文讓 Blogger 過長的文章自動產生數字分頁﹍系列文加強版

上一個版本「 讓 Blogger 自動顯示系列文章 」留言 #5 WHY 詢問「有時文章過長,想幫文章變更為好幾頁 ( 寫好幾篇 ),能否讓【 自動顯示系列文章 】的顯示結果不出現標題,而出現數字」。基本上「文章分頁」算是常見的功能,當文章內容較長,分頁功能可以讓讀者稍微喘口氣。...
繼續閱讀全文專業的「網站維修中」及倒數計時功能, 不用擔心訪客看到異常頁面

喜歡裝潢門面的站長可能三不五時會有一點小困擾,在站內維護的期間,例如調整版面 CSS 配置、測試安裝某些外掛時,網站不可避免地會讓訪客經歷版面異常、或局部功能失效的狀況。而這還算小問題,因為多半只影響不到一天的時間。 如果是網站大改版、或是更換新範本(模版)等,那問題可就大了...
繼續閱讀全文[小工具]Blogger 數字分頁導覽 + Ajax 動態頁面載入效果
![[小工具]Blogger 數字分頁導覽 + Ajax 動態頁面載入效果](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiENPf1V7NW4p0lgxEK2gHvzRSRypeefzm7_eP7CNBYdMTjVHrd5PSGIB9PjN2MG6rH-i3s2LTi6I5yUTsRaA34D45bvnkcIciwILGD-_dQss8eauDdkhg6he_FFl4lW5fH3FOVLz6X4HeQ/s1600/number-page-navigation-ajax-loading.jpg)
網站使用數字分頁功能,來方便訪客跳頁尋找、閱讀文章,這是各大網站很常見的設計。但 WFU BLOG 一直以來未採用,原因有二: 1. 如果不瞭解 Blogger 的機制,裝了這樣的外掛一定抱怨連連,請參考「 Blogger官方自動分頁機制 」,分頁的狀況常常會不如預期。 ...
繼續閱讀全文[小工具]讓 Blogger 自動顯示系列文章
![[小工具]讓 Blogger 自動顯示系列文章](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUsj9ioegAdXqp77SGufoBk05NnudNDWxl-Hq8xZKWEzQAfY8hI3ACl6lyp9M9vnx9k2mIsCHr2CHospvByPTRvj0B3dub1vF8VQ8ApCzrOYDUeMhpTpvinjhTVDlFLmdjZf5LT9cIOkkd/s1600/blogger-post-series.jpg)
過去在撰寫系列文時,比較頭痛的一點是,在文末想列出所有的相關系列文章時,是一件麻煩的事情。而更麻煩的是,每增加一篇系列文,那麼之前所有的系列文,還得一篇篇去手動新增最新一篇的連結!因此整理系列文列表這件事,真是考驗耐心的絕佳試煉... 現在使用了本篇的系列文小工具後,不但安裝...
繼續閱讀全文[小工具]Blogger 相關文章 V2__安裝懶人包
![[小工具]Blogger 相關文章 V2__安裝懶人包](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp4UeL7gmvpfGK-nnB4bXo2DTpvIGtpzrfs7zhw42b09_CM1L-3vJYZIiWNuODSJnZ-mgRnSn8_hxgDWWpiCt1ao5WG7Qius09EiRSsz_OrGlBHH9LKbg2tI_jJ2H1LeNtOwCH3BilI5R6/s1600/blogger-related-posts-2.jpg)
「 舊版相關文章 」的安裝方式稍微麻煩、複雜一些,如果對 Blogger 範本的操作不太熟的讀者,可能就無法安裝成功。因此,這個新版本改成安裝懶人包的方式,算是一個步驟就能完成安裝,相信不會再有安裝失敗的情形發生。 另外,WFU BLOG 的工具更新不一定會有版本號,但這個相...
繼續閱讀全文Blogger 相關文章+任意尺寸縮圖+更多相關文章

(Pic from: kickstarter.com ) 2016.4.9 公告: 因 Google Drive 外連失效,請勿使用本篇的程式碼,請改用新版「 Blogger 相關文章 V2__安裝懶人包 」 部落格想要於文末附上相關文章+縮圖功能的話,目前最常見的選擇是...
繼續閱讀全文Blogger 留言相關工具及技巧推薦 (筆記)

(Pic from: iconspedia.com , Jeremybennett Sticky Note Pad And Pencil clip art ) 串聯式留言 ◎ 串聯式留言──作者設置高亮 : 「 Highlight Author Comments in ...
繼續閱讀全文