Blogger 自製「精選文章」小工具﹍文字版

其實這個工具很久以前就很想做了,原因是側邊欄放了「 熱門文章 」小工具,但本站性質比較奇特一點: 網站主題以 Blogger、部落格經營設計為主 而網站流量主要從 Google 搜尋引擎而來 可是流量較大的文章多半與網站主題無關 導致這個熱門文章排行榜,對主力客群吸引力...
繼續閱讀全文讓 Google 商家評論星等在網頁顯示﹍製作流程研究

前陣子接到需求,希望在網頁上顯示「 Google 我的商家 」使用者評論內容、及評價星等。這個概念引起我的興趣,因為會是有力的行銷工具。 現在商家經營 SEO 需要的手法比過去複雜很多,除了基本的網站要顧,Facebook 粉絲團也不能荒廢,如上圖,Google 搜尋結...
繼續閱讀全文Blogger 側邊欄分頁工具﹍相容官方小工具

以前曾寫過多個「 Blogger 側邊欄自製分頁(Tab)小工具 」,而共通點是某些官方小工具無法使用,例如 "熱門文章"、"網誌存檔"、"網誌統計資料" 等等。 因為這些官方工具的原理,是使用 Ajax 技術延遲取...
繼續閱讀全文Blogger 側邊欄隱藏開關工具

喜歡版面簡潔的部落格站長,有不少會想使用單欄式版面,也就是沒有側邊欄的設計。然而側邊欄捨棄其實也是有點可惜,這個區塊的空間若好好運用,除了可以帶給讀者不少便利性,還可撥一部份空間擺放廣告獲得收益。 如果網站花一些心思設計的話,我想最佳解會是讓有需求的使用者各取所需,不想看到側...
繼續閱讀全文讓 Blogger 官方 RWD 範本側邊欄小工具能預設展開

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

Blogger 官方幾年前推出「精選文章」小工具,我認為這個功能非常有必要性,因為跟側邊欄的「熱門文章」、「最新文章」工具一樣,都具有維持訪客注意力、減少跳出率的用途。 不過本質上,「精選文章」還是有所不同: 「熱門文章」顯示的文章無法由自己決定,熱門程度是由訪客決定。 ...
繼續閱讀全文Blogger 側邊欄自製分頁(Tab)小工具﹍Bootstrap 應用

多年前曾寫過「 Blogger 側邊欄簡易分頁功能 」系列文章,當時做的 Tab 分頁樣式比較簡單,沒有使用任何外掛,效果算是堪用。 從當年的版面樣式也可看到歲月的痕跡,頁簽形狀用 CSS 刻得很辛苦,還有瀏覽器相容度問題。現在網頁技術太進步,有各種處理 CSS 版面的框架(...
繼續閱讀全文Blogger 熱門文章 V2﹍卡片式縮圖 + 自適應尺寸 (RWD)

幾年前寫的「 Blogger 熱門文章+任意尺寸縮圖 」,由於修改方式比較複雜,不熟悉程式碼的讀者,有可能不小心會把範本改壞。 本篇 V2 版,除了可算是懶人包,安裝十分簡單,版面也比較有設計感。以下先介紹改版特點,想直接安裝可跳至「二、準備動作」。 點此看範例網頁 ...
繼續閱讀全文[CSS] 美化 Blogger 官方標籤雲
![[CSS] 美化 Blogger 官方標籤雲](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXaQk8xbqqJChrQ6zzJ8Ya50uMn7Dot45-Vxj5PV_7-sF-hnwnCYMk5pnTvE0OO6kx9NkBp_O1DEVU8nbZTYx0bIUnVKIaDlt3cojwnqrb_9RftQDZ2_HG4XwsL5_lMrbz8rHPRJajeDLg/s1600/blogger-label-cloud-css.jpg)
最近朋友買了一個漂亮的 Blogger 範本,除了配色一定比官方範本好看之外,也會有一些 jQuery 特效。不過非官方範本想要自己修改版面,就不是那麼容易了,同時也會有一些相容性問題,例如本文的主題 "標籤雲",不巧執行就遇上版面破裂的情形。 Blogg...
繼續閱讀全文讓 Blogger 側邊欄有個簡易安裝的分頁(TAB)功能__(3) 隨機分頁功能

本篇的主題為分頁(TAB)功能的應用: 1. 隨機顯示分頁功能。 2. 特定頁面 之下的(隨機)顯示分頁功能。
繼續閱讀全文讓 Blogger 側邊欄有個簡易安裝的分頁(TAB)功能__(4) 各種疑難雜症

系列文「 第一篇 」提供了基本安裝的程式碼,如果有客製的需求時日後容易擴充。本篇的主題為解決分頁功能的一些疑難雜症,而如果有提出客製的相關問題,之後一併集中更新到此篇。
繼續閱讀全文讓 Blogger 側邊欄有個簡易安裝的分頁(TAB)功能__(2) 安裝 Blogger 官方小工具

(Pic from: jQuery TOOLS ) 上一篇的「 留言 #02 」Frank Liu 詢問「 能否把 Blogger 官方小工具裝進這個分頁功能 」。我的回答是,由於這個分頁功能是適用於安裝「HTML / Javascript」小工具,若要把 Blogger 官方...
繼續閱讀全文[小工具]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 內建的熱門文章小工具,附帶了一個美觀的...
繼續閱讀全文[教學]讓 Blogger 側邊欄有個簡易安裝的分頁(TAB)功能__(1) 安裝 HTML 小工具
![[教學]讓 Blogger 側邊欄有個簡易安裝的分頁(TAB)功能__(1) 安裝 HTML 小工具](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjptp1cDhsyT_rIE-CpHS4SwC-MWwr127qm5LP-55vlsMwu39ZB6GVL7JXcuPxrhGPZNx5Yja46_UocWeyk90QJqFRGOXX9m3sXBV-1QSYg-wsfF_pKKwdzQNW3enRTQQS5izJav5aHCslM/s1600/tabs.jpg)
(Pic from: jQuery TOOLS ) 當側邊欄的 HTML 小工具(例如最新文章、最新留言)越來越多時,如果能有個分頁功能將數個小工具合併為一欄,那麼不但側邊欄看起來清爽很多,訪客也不會覺得滑鼠滾輪好像滾不完似的。 最近想幫側邊欄裝個簡單的分頁功能,原本考慮這...
繼續閱讀全文[教學]Blogger 網誌清單的妙用+網站小圖示的調校
![[教學]Blogger 網誌清單的妙用+網站小圖示的調校](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm0YpH2r7zU5y0bxGTQIiuAaMD5KXKYTSTEsp18cBvai0G8UcsJnzlASdONA3Mu0wx7XEmhyphenhyphenQg1TJm_UJytE9s-54qze0HGONKzkICCTtfpHTKYsMMrpzqEqIUPvFckgL6iAgcPOQTA3gK/s1600/BlogList.jpg)
之前在友站看到交換連結清單,發現竟然除了基本的網站名稱之外,還能夠抓到最新文章的標題、時間等等資訊,而且 就像即時排行榜一樣 ,只要交換連結發佈了最新文章,該網站就能立即攀上排行榜第一名,位置自動跳到最頂端! 當時覺得實在太神奇了,這是那個強大的外掛竟然可以做到這一點,後來才...
繼續閱讀全文Blogger 側邊欄相關工具及技巧 (筆記)

(Pic from: Jeremybennett Sticky Note Pad And Pencil clip art ) 最新文章、回應小工具 ◎ Abin 最新回應 : 「 Abin's Tech Note──「最新回應」模組 (Recent Comment...
繼續閱讀全文