Blogger 最新文章 V3﹍相容新舊圖片網址 + WebP 格式
去年底(2021) Blogger 更改了圖片網址格式,詳情可參考「 Blogger 圖片大瘦身!官方提供密技轉換成 WebP 格式 」→「二、新舊圖片網址格式差異」。 雖不知官方為何要這麼做,但此舉卻是影響很大,許多需要顯示縮圖的工具都可能異常,也包括以前製作的「 Blogg...
繼續閱讀全文Blogger 文章自動產生目錄大綱區塊
![Blogger 文章自動產生目錄大綱區塊](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZO4C-WRzT121fTaUFc8sR99HKwf_VzevyyO3NooTrABFyEsy6Z_qOSuMBeo0PgcZWTaoJhNeCU1ZW7MT1wu8IRAhm0WzOTjSdqP-siBQAWk97XQzk97FJymnEdi5JH8Hszob0asfY3sdh/s1600/blogger-post-headline-anchor-area.jpg)
今年的 Blogger 架站案例中,好幾個都要求在文章中製作一個區塊,裡面擺放多個錨點超連結,點擊後可跳到文章中對應的大標題。 雖然每個案例的客製執行效果都不同,有的將這個區塊放在側邊欄浮動,有的希望每個錨點分別出現在自訂位置,有的希望所有錨點集中在文章開頭,不過目的都是相同...
繼續閱讀全文統計歸納網站所有連結的點擊成效﹍GA 事件追蹤器(會員加值文章)
![統計歸納網站所有連結的點擊成效﹍GA 事件追蹤器(會員加值文章)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR8NWxeqdbmt_gyBBFeKF77PnPITGLPCbkebyEPBpHmJ8PZWAdJUgXX3rAbRRs2vhwfzf6BhxtTV8JHrlEh3_I4vH1lfpcgDkTsSY669wkchZ6D0qfKF4IqYc6AGoM6e6MM4KfTEtpvSeq/s1600/website-track-google-analytics-event-widget-free.jpg)
2023.3.27 公告: 從 2023.7.1開始舊版 GA 將失效,請改用 GA4 並閱讀這篇「 GA4 如何追蹤自訂事件的成效及建立報表 」。 上一篇「 GA 事件追蹤器 」的免費版功能比較少,本篇的版本可以做到這些事: 排除 Blogger 站長自己的點擊 對小工...
繼續閱讀全文查詢網站所有連結的點擊成效﹍GA 事件追蹤器
![查詢網站所有連結的點擊成效﹍GA 事件追蹤器](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR8NWxeqdbmt_gyBBFeKF77PnPITGLPCbkebyEPBpHmJ8PZWAdJUgXX3rAbRRs2vhwfzf6BhxtTV8JHrlEh3_I4vH1lfpcgDkTsSY669wkchZ6D0qfKF4IqYc6AGoM6e6MM4KfTEtpvSeq/s1600/website-track-google-analytics-event-widget-free.jpg)
2023.3.27 公告: 從 2023.7.1開始舊版 GA 將失效,請改用 GA4 並閱讀這篇「 GA4 如何追蹤自訂事件的成效及建立報表 」。 我們的網站可能裝了各式各樣的小工具,例如: 首頁的輪播 側邊欄的標籤、熱門文章、精選文章... 文末的相關文章、延伸閱讀...
繼續閱讀全文Blogger 相關文章 V4﹍行動版專用
![Blogger 相關文章 V4﹍行動版專用](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGmPh0XO4imimLSy6DMARU0bgazcGSfxFso_PADRUj9PJ14yp6p-pIO8i3xCkFTDVSF0kbLrvH8sJo0DiV49JkOeNhDjp2DW7owsCQ8Q12AxO6MPRC0RLWaWcPhViS1IZVaBIp-XDP-Jdq/s1600/blogger-related-posts-v4.jpg)
不少讀者都詢問過「 相關文章 V2 (含縮圖功能) 」能否裝在手機版,實際上如果真的這麼做的話,一定馬上就破版,因為行動裝置有著各種不一樣的螢幕寬度,加上直立、橫躺的操作,各種專為行動版而設計的工具一定要符合 RWD 才行。 除此之外,V2 的版面也不適合做成 RWD,如果要...
繼續閱讀全文Blogger 隨機文章 V2 + 輪播效果
![Blogger 隨機文章 V2 + 輪播效果](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOFN4SM6SYmFjjRQ7B6UWhmvYKRFrMr2K0E8I4VRRVkerd4qP59MvPL8ao2_XaoQt8rFAKzp4s3KD0QSkv8ch4yPtYrpTp5fl3NvswRk73bBfCnPaCsqcMw7Y0h8uETgVzAUK2WmaeW5O-/s1600/random-post-v2-slider.jpg)
前陣子介紹完最熱門的 jQuery 輪播外掛「 Owl Carousel 」,聯想到部落格文章結束處,經常會配置的 "推薦文章" 工具,例如「 相關文章 」,如果搭配輪播功能的話,應該會有不錯的效果。 要進行輪播之前,得先隨機抽出足夠的樣本數,而 &quo...
繼續閱讀全文Blogger 讓讀者以 Email 訂閱最新文章﹍任何位置都能擺放, 免註冊 FeedBurner
![Blogger 讓讀者以 Email 訂閱最新文章﹍任何位置都能擺放, 免註冊 FeedBurner](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrRpFOpb-cZjdwtpgTi68bAhUlhyphenhyphenTkS6Pjt30otgruSXkgDfER7f5z3nmmGvph8XzfdQ5ACQvdOxahX7Hhdg5B2_c9G_5gFmf9oAsj_hqwYvJcDOVwhFA8KsfgU4pLCJakNB8QOHBUoe4V/s640/blogger-email-subscription-widget.jpg)
用「 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 隨機文章 + 自訂尺寸縮圖 (側邊欄工具)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh5cxJiE-u3iWc7TqMvCFDm_O8As9y5GS1giMTJkunCGdW84eVkw9ofQH-kGBJ1-jcDmEhllgjJQFzNOcUbrbzdI1ZOCZVi3pxJpwCR4n55kIwAuoVF0hWcV-_oFLsn1hCVOU5AySkP4kB/s640/random-number.jpg)
除了「 熱門文章 」,側邊欄另一個可吸引訪客停留、讓網站舊文章曝光的常用工具,就是 "隨機文章" 了。 之前曾製作了「 Blogger 隨機文章 + 自適應尺寸縮圖 」,由於是橫式版面,只適合擺放在文章結束處。不過將程式碼稍微修改一下,變成直式版面的話,就...
繼續閱讀全文Blogger 最新文章 V2﹍任意尺寸縮圖 + HTTPS
![Blogger 最新文章 V2﹍任意尺寸縮圖 + HTTPS](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYRD1b5OEzDdkrWpBzGkFGFWF2sbxUM8LXU2pSq6I_26IUJAgbTq-K_faCCIYmnDWp4X-SHjlSRo8GpnHUcjg5LeK3KkXl0BFCLPHpHNbyuXh_ami3AfBukNRgG7CDJ7d-VG1Vkl2q7ZZM/s640/blogger-recent-post-v2.jpg)
2022.02.07 公告: 此工具目前已更新到 V3 版,請前往新版安裝頁面:「 Blogger 最新文章 V3﹍相容新舊圖片網址 + WebP 格式 」。 之前寫的舊版工具「 最新文章 」已經很久沒有更新,由於前陣子「 BLOGGER 支援 HTTPS 」之後,很多 B...
繼續閱讀全文Blogger 相關文章 V3
![Blogger 相關文章 V3](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg81eIZXU4nxOqRLCHAn2t2_3tY9JDCFBpsTaXHfTt8xjZ7f5AaGxUGkOB1LW72Kp2tuAqC-bHQinhkndlkn1Y7sbVmMw_M0Ddq5TmfMWzP0tOHgDqMBujPJXTse-O4-gYU69Iz07VApoBq/s1600/blogger-related-post-v3.jpg)
這個工具使用了「相關文章」的版本號,但其實跟「 相關文章 V2 」的市場、用途並不相同。V2 版的文章會顯示縮圖,而 V3 版完全只有文字,難不成這個工具退化了嗎? 其實他比較偏向「 系列文功能 」的風格,只列出建議閱讀清單的文章標題。但篩選方式又不同, 系列文是利用 &qu...
繼續閱讀全文Blogger 圖片語法轉換器﹍改變行動版圖片尺寸
![Blogger 圖片語法轉換器﹍改變行動版圖片尺寸](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoc6iXRuKrpj9BVNqYM4btMHZp44Xl_jtdPOJRkaX8Xv1vykaFaV5IoO9aaa3OFZqkbJXCIFVlwF88seAszfQoR1EVgdnJtAoTm34LOy_GxT_d9uSXbdvCEoWoI95Yv8DsYfS4p5h8pUhL/s640/online-converter-tool.jpg)
從這篇「 加快 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 過長的文章自動產生數字分頁﹍系列文加強版](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYZI8mq3yJ0ugvIVlLxz0SVjlViHbkfCJ7UMQjVmw6BFpH57OKI64hZNrdgoujoOO-J3kNg_VJxrDCYK3uoRHvjWefyOu5mLaCMyhAA8Opj3lzXoeEm4HV0N3IixwOYKDR42_VhHQR12bj/s1600/blogger-post-page-navigation.jpg)
上一個版本「 讓 Blogger 自動顯示系列文章 」留言 #5 WHY 詢問「有時文章過長,想幫文章變更為好幾頁 ( 寫好幾篇 ),能否讓【 自動顯示系列文章 】的顯示結果不出現標題,而出現數字」。基本上「文章分頁」算是常見的功能,當文章內容較長,分頁功能可以讓讀者稍微喘口氣。...
繼續閱讀全文專業的「網站維修中」及倒數計時功能, 不用擔心訪客看到異常頁面
![專業的「網站維修中」及倒數計時功能, 不用擔心訪客看到異常頁面](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQPGpckSIKENmJ7UDqJMGM3ISEIEOGhZXsqYaWkrvq3dEVlmIpR_An-JmkmdVisI2lfmsDJr4Un48S16EXXMpmZbbsSDge4hcKyVMHVQU7SCSPuLrYERE0xRx1-8rTDSF8jKwgKj4RxF6X/s1600/under-construction-countdown.jpg)
喜歡裝潢門面的站長可能三不五時會有一點小困擾,在站內維護的期間,例如調整版面 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 相關文章+任意尺寸縮圖+更多相關文章
![Blogger 相關文章+任意尺寸縮圖+更多相關文章](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKRD8PQsHqk3G6NkNkd3Yuyc7nO3-XJEj0_Uxj4yXA6DE_f2r9GshTZ9xQ1tiM7JEjTEu04dMh20p-jyxvNPXSKMmWnKLs2jreROxOxSYdtgpYijKk-F-HXN42CVX8c5kxCYeaw0cHm3kj/s1600/related-post.jpg)
(Pic from: kickstarter.com ) 2016.4.9 公告: 因 Google Drive 外連失效,請勿使用本篇的程式碼,請改用新版「 Blogger 相關文章 V2__安裝懶人包 」 部落格想要於文末附上相關文章+縮圖功能的話,目前最常見的選擇是...
繼續閱讀全文Blogger 留言相關工具及技巧推薦 (筆記)
![Blogger 留言相關工具及技巧推薦 (筆記)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixw9qIaMICoxoULTPhliAbDgVJRAPFTLmTUdIUk-qahTo8Rvyc6Jr6wdmVBueaf2XUyW8BzQhP60O-O11wMHlW5DSCXqQQLwYIWVgxsRMvTc07mRjqgUs9_EfbrKgGAW2X_6L_vUFc2YNQ/s1600/comment-note.jpg)
(Pic from: iconspedia.com , Jeremybennett Sticky Note Pad And Pencil clip art ) 串聯式留言 ◎ 串聯式留言──作者設置高亮 : 「 Highlight Author Comments in ...
繼續閱讀全文