Blogger 圖片大瘦身!官方提供密技轉換成 WebP 格式
前陣子 FB 的 Blogger 社團分享了一篇「 Blogger 圖片無痛轉換 WebP 」,原來 Blogger 圖片網址加上特定參數後,就能直接轉換成 WebP 格式,檔案得以大瘦身,圖片載入時間縮短不少。 這對圖片為主的 Blogger 部落格站長可說是一大幅音,例如美...
繼續閱讀全文Blogger 使用錨點的操作方式(新版文章編輯器)

如果不熟悉 HTML 語法的話,要製作出錨點效果不太容易。Blogger 新版文章編輯器增加了不少功能,其中「錨點」算是非常實用的一個,就算不懂語法也能實現這個效果。 本篇會說明錨點的原理,以及如何在新版文章編輯器做出錨點。 (圖片出處: hippopx.com )
繼續閱讀全文讓 Blogger 文章標題及文末都出現編輯圖示,方便修改文章

為了方便站長們編修文章,Blogger 官方在後台提供了設定方法,可在文末指定位置顯示編輯文章的小工具圖示,點擊後可直接編輯文章,省下在後台搜尋指定文章再編輯的時間。 這功能算是很貼心了,但對我來說還不夠,因為捲到文末仍需要花一些時間,如果要做到最方便的話,我想在文章標題附近...
繼續閱讀全文讓 Blogger 官方 RWD 範本側邊欄小工具能預設展開

去年 Blogger 官方推出的 RWD 範本,側邊欄工具的設計我覺得有一點比較沒彈性,全部預設都是關閉的狀態,所以使用「 樹狀標籤 V2 」的讀者曾反應,希望小工具的內容預設為開啟的狀態。 當時解決的方法是在程式碼單獨處理,但這個作法無法套用到每個小工具,因此本篇提供比較好...
繼續閱讀全文讓 Blogger 首頁每篇文章都能顯示日期

2024.2.1 公告: 現在已經有更方便的作法,請參考「 Blogger 日期格式化詳解 」→「二、首頁每篇文章都顯示日期(新版)」 最近接到一個需求,希望Blogger 首頁每篇文章都能顯示日期,因為同一天發佈的文章只會顯示第一篇的日期。 官方會這麼設計也不能說不合...
繼續閱讀全文讓 Blogger 首頁能點擊圖片就進入文章頁面

最近接到一個需求:「能不能點擊首頁文章的大圖,就直接跳到文章網址?否則要點 "繼續閱讀" 才能進入」。仔細想想的確很有道理,這才是友善的操作介面設計,以前怎麼都沒想過! 於是現在 WFU BLOG 首頁文章封面圖,改為以最大尺寸呈現,並且加上文章頁面的連結...
繼續閱讀全文[教學]Blogger 較新/較舊文章按鈕改造__(一)顯示文章標題
![[教學]Blogger 較新/較舊文章按鈕改造__(一)顯示文章標題](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL4186PHQsJOfM1r5FEM9m-k7ZoNt4B42ZTKeNqLvgKlzdtTlNlYOE6lhtxLNauSp_c1BLqckbXGOTZtqhquBuGZdG6eOZ87uKUA2uto98E221NgMgk5pUtBZ_bL6ccOacYFWfniMV1c4H/s1600/newer-older-post-button.jpg)
在這個「 Blogger社群討論串 」討論的主題為 "Blogger 較新的文章與較舊的文章之連結",也就是 "上一篇/下一篇文章" 的功能(不是指首頁或搜尋頁面的 "上一頁/下一頁" 分頁功能)。在文章頁面時,這兩個 ...
繼續閱讀全文[教學]隨機顯示 Blogger 標頭(banner)圖片
![[教學]隨機顯示 Blogger 標頭(banner)圖片](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEgH8Tak-ZbobAllK__lmcirW0Rh6ftimnoJYdussWHS-JmRVPiFUzTvUui0_cysgeDiATX8qIV-A4oaVocRgc49Tm8oclcf9k8XLEw4LSi9J0MLxfDxM22Do0EP1dNeu5LBwDrjR_1u0M/s1600/blogger-random-banner.jpg)
在這個「 Blogger社群討論串 」有成員詢問 "如何令 blogger 標題圖片隨機出現 ?",除了當時沒有閒暇研究 js 如何寫,另外就是直覺認為此功能或許使用率不高。 後來想想某些性質的網站,例如攝影、美食、旅遊、遊戲(模擬市民 ths sims)...
繼續閱讀全文[教學]Blogger 如何安裝兩個導覽列?
![[教學]Blogger 如何安裝兩個導覽列?](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguEwpq5STIiYpdSMRYlZ8Qb4nNBhdOsLz_2wyquHtQhtKBG-hZ_9sgiE3MN9Xki1BmTVuQaMJQAGH4Sj-JqtWCvqoQ3Vd_C6jsdId-8QWDVZXORaqnvOevHPaQvh7R-8PqUQziAipLZYvw/s1600/blogger-two-navigation-bar.jpg)
常可在一些知名的網站看到,在網站名稱(標頭)的上方放置了一排導覽列,在網站名稱的下方也有另一排導覽列。一方面可能是網站的主題很多,一方面也可將主要與次要的導覽項目區隔開來。 不過 Blogger 預設只能安裝一個導覽列,如果想要在部落格顯示兩個導覽列的效果,請參考本文以下的說...
繼續閱讀全文[教學]Blogger 如何安裝兩個相同的小工具?
![[教學]Blogger 如何安裝兩個相同的小工具?](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw0BKVgepCpVksxJakg9vgWZpu7t5k4m45iw85bLApfputxz5aCNUSJFqoieoDimdpKLeckXosCQozKFjIWY2e-XVMvsMnyUHwBia9BVRxIc3P3uM1Hve4u2ygB9flgWIbJGslI5pCQ9dq/s1600/blogger-two-same-widget.jpg)
這個問題看起來不像是個問題,只要重複安裝兩次不就好了?其實官方提供的小工具中,有某些只准安裝一次,因而這些「獨一無二」的小工具,無法在部落格上重複出現。 本文除了介紹如何重複安裝這些「獨一無二」的小工具,也探究一下有哪些合適的應用情境。
繼續閱讀全文[教學]讓 Blogger 能在文章下方顯示作者簡介
![[教學]讓 Blogger 能在文章下方顯示作者簡介](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje854y03yx3ZMicRoBPqeaAHd__nZNMcNJNn3ggUJV6cZw1ZgxhJdYcK27BMtfRSeynzpWIkas8-G-Ngp58OQyKh0mJa-A1bqgmKpwTo2QLeM5fShNZscB84txhDj4aRfA0RJoFjttPTs1/s1600/blogger-author-profile.jpg)
(Pic from: iconfinder.com ) 對於從搜尋引擎而來的訪客,首次拜訪對於作者總是不太瞭解,在不熟悉的情況下看完文章很容易直接離開。如果自認經歷能夠引起陌生訪客的注目,那麼文末放個作者簡介會是個留住讀者的好主意。 感謝 +Almighty Demiurg...
繼續閱讀全文讓 Blogger 有快速載入的展示(DEMO)頁面

(Pic from: midches.com ) 有時我們可能需要一些「展示頁面」,來秀出某些網頁效果(例如語法教學網頁)、或展示特定資訊(例如「 文章列表 」),這樣的頁面最好能載入速度快,頁面上只需要出現 DEMO 的主題,不需要出現側邊欄、其他小工具。因此,在 Blogg...
繼續閱讀全文Blogger 修改「G+ 追蹤者」小工具的版面及編輯按鈕

Blogger 最近推出顯示 G+ 追蹤者的小工具,有人的反應是與 Google Freind Connect 的性質重疊,而 G+ 專頁也會顯示追蹤者頭像,如果再加上這個小工具,那版面真是好不熱鬧。 目前我暫時在網頁上只擺這個 G+ 追蹤者的小工具,可以裝作看起來很有人氣的...
繼續閱讀全文[教學]將 Blogger「標籤」小工具放在導覽列實作
![[教學]將 Blogger「標籤」小工具放在導覽列實作](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTIbCUw80NLOawW5RK3j9sPp7JlGnMDpAS-rqG5HWrrbq-mLcJ6AGW7emFv2WTPUIrqT4qfbjTPHvJFlPojWQL_LOZXbWiG3MucUP2vjvYx7A0VE0H7mU_cwUDc83tv8rJEj-Vnrw2ga-G/s1600/label-pagelist.jpg)
(Pic from: Office Worker ) 之前在「 +Shu-Yuan Tien ── Office Worker 」看到標籤出現在導覽列覺得挺神奇的,研究了一陣後發現可以在後台先把導覽列用滑鼠拖曳到網頁最上方,接著再把「標籤」小工具拖曳到導覽列,那麼網站所有的...
繼續閱讀全文讓「Blogger標籤/搜尋頁面」能隨時切換標題模式與文摘模式

(Pic from: iconfinder.com ) 2016.3.28 公告: 2016.3.28 公告: 目前已發佈新版,請前往「 Blogger 標籤文章列表 V2 」 Abin 大發表的「 標籤/搜尋頁面只列出標題 」非常實用,過去曾使用過一段時間,但最後還是將此...
繼續閱讀全文[小工具]Blogger 最新文章+任意尺寸縮圖﹍Json 縮圖資料解析
![[小工具]Blogger 最新文章+任意尺寸縮圖﹍Json 縮圖資料解析](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEfN4HmRWTdVEHbjMtISeABb1e-aq3lY-Wak6ziGpRnWltPePb2kmd8FM-nJAPmZRYvDFiTNr7nlJ0Z91bEN92IjbXxCnDmFdEMaOVuZiIdtzlz5kLpBISMW0_f4HJ11zclfO-gg06NZWj/s1600/new-post.jpg)
(Pic from: designdownloader.com ) 2015.10.21 公告: 此工具目前已更新到 V2 版,請前往新版安裝頁面:「 Blogger 最新文章 V2﹍任意尺寸縮圖 + HTTPS 」。 改完「 熱門文章縮圖 」功能後,下一個要動手的便是「...
繼續閱讀全文[小工具]Blogger 熱門文章+任意尺寸縮圖__兼談圖示製作技巧
![[小工具]Blogger 熱門文章+任意尺寸縮圖__兼談圖示製作技巧](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSUtQxNKKILaABpTrnxFBdpIRHYnu_Oad4O_jsbzAC-pr6JV0prkrtagZ8BtMjXNeDK2oR-lVbAPRomzMm6hsPzWwzNTczNFCJGaa4aNb4_NcGFdb9pI9DCjV3vl3vu7EF_AGSx_Gjmy5q/s1600/popular-post.jpg)
(Pic from: psdgraphics.com , dreamstime.com ) 2016.8.15 公告: 已推出 V2 版本,請前往這篇「 Blogger 熱門文章 V2﹍卡片式縮圖 + 自適應尺寸 」。 Blogger 內建的熱門文章小工具,附帶了一個美觀的...
繼續閱讀全文[教學]讓網頁文字使用各種底線圖案__(1) 安裝與使用 (CSS 技巧)
![[教學]讓網頁文字使用各種底線圖案__(1) 安裝與使用 (CSS 技巧)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDDaAhrD5srZojohjvbhxwC2XnjrjGud5N9bNftVLCK_PfuUHmvAr6UhAV1tjIKMfwm8QpN39wLVC_l82EPRGOzPxQ5uwsvELzGarZgp5zVeMnxf7kijnO8cODHuMUKMnZvmtmbu74wldH/s1600/underline.jpg)
以文字內容為主的部落格,先天上吸引目光的能力已經輸旅遊、美食、攝影等以圖片為主的部落格一大截,如果整篇文章都是密密麻麻的文字,那麼再有深度的內容,也會如同嚴肅的講課內容一般,讓人昏昏欲睡。 幫純文字上色、讓文章的可看性加點分大致有兩個途徑,一個是改變標題、關鍵字的顏色,另一個...
繼續閱讀全文[教學]Blogger 網誌清單的妙用+網站小圖示的調校
![[教學]Blogger 網誌清單的妙用+網站小圖示的調校](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm0YpH2r7zU5y0bxGTQIiuAaMD5KXKYTSTEsp18cBvai0G8UcsJnzlASdONA3Mu0wx7XEmhyphenhyphenQg1TJm_UJytE9s-54qze0HGONKzkICCTtfpHTKYsMMrpzqEqIUPvFckgL6iAgcPOQTA3gK/s1600/BlogList.jpg)
之前在友站看到交換連結清單,發現竟然除了基本的網站名稱之外,還能夠抓到最新文章的標題、時間等等資訊,而且 就像即時排行榜一樣 ,只要交換連結發佈了最新文章,該網站就能立即攀上排行榜第一名,位置自動跳到最頂端! 當時覺得實在太神奇了,這是那個強大的外掛竟然可以做到這一點,後來才...
繼續閱讀全文Blogger 能否一次修改多篇文章的文字或內容?

曾在 BBS 看過有人詢問能否一次編輯多篇文章的內容,得到的回答是只能一篇篇修改;由於當時沒有這樣的需求所以沒有深究這個問題。等到最近自己遇上幾個類似的問題── 想要一次修改全部文章的標籤名稱 、 一次修改文章內部標題的顏色 ,尋找答案後發現要達到這個目的還真是困難。一般而言,要...
繼續閱讀全文