網頁教學：Blogger / Blogspot 版面設計與技術收錄（二）. 由 工程師 · 已發表 2011 年10 月10 日 · 已更新 2020 年12 月10 日. html-5-logo-design logo. 這是教學 ...Skiptocontent網站管理網頁教學：Blogger/Blogspot版面設計與技術收錄（二）由工程師·已發表2011年10月10日·已更新2020年12月10日這是教學綜合收錄第二篇。

我們舊版實際上是建構在Google的Blogger系統。

雖然Blogger具備有方便與安全的優點，但是自由度也會稍微受到約束。

不過Google讓我們在版面規劃的部份，具有相當高度的自由，因此我們可以依照自己的想法，讓部落格更俱個人風格。

下面我將針對網路上，談到Blogger版面設計與應用的許多零碎資料，重新進行整理、驗證與分類，希望對大家有用。

:)修改前請注意，一旦修改HTML內容，原本”版面配置”中的”網誌文章”的”編輯內容”，將會停止使用者再更新。

如果有需要使用特別設定，像是地址顯示等，請在修改範本前先行設定完成（但是新模板不一定支援）。

建議大家在做任何修改前，務必先行備份範本，或是弄個測試網站先做測試呦。

在文章頁面中增加延伸閱讀（相關閱讀、RelatedPosts）功能如果你看到本部落格的文章，會發現文章最後都會出現數個「延伸閱讀」的文章，其實這項功能是透過外掛程式辦到的。

Blogger提供的外掛工具，並沒有相同的功能，雖然我們可以「模擬」出類似的目的，好讓來我們網站的客人繼續留在網站中久一點。

譬如使用「最新文章」的外掛工具，以便我們可以用文章一直餵客人、一直餵、一直餵（咦，好像某種動物？）。

但是，最新文章並不一定會跟客人正在看的文章具有「關聯性」，代表客人可能根本沒興趣看你想餵的食物，呃，我是指延伸文章。

所以，如果有一種可以讀取各別文章的關鍵標籤（Tag），並從過去文章中，找出具有相同關鍵標籤的文章，那就可以讓客人容易發現到具有關聯性的文章。

正如古語所云：「條條大路通羅馬」，我們可以輕易的在網路上發現各式各樣的技術，有直接修改程式碼的，也有透過商業外掛達成目的。

但是，卻有不少商業外掛，都會在延伸閱讀的位置後方，投放大小不等的廣告，雖然是免費的外掛，但卻或多或少的會破壞版面的配置。

底下將要介紹的，就是我在把玩過許多高手所教導的技術後，決定使用的一套外掛工具（Source: RelatedPostsWidgetforBloggerwithThumbnails）。

首先，進到「Blogger」的後台，找出「範本」中的「修改HTML」選項並點選進入。

選擇「展開小工具副本」。

使用文章搜尋功能（或使用快速鍵「Control」+「F」），找出「」的位置。

在「」之前，複製貼上下面的程式碼：#related-posts{float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}#related-postsh2{font-size:1.6em;font-weight:bold;color:black;font-family:Georgia,“TimesNewRoman”,Times,serif;margin-bottom:0.75em;margin-top:0em;padding-top:0em;}#related-postsa{color:black;}#related-postsa:hover{color:black;}#related-postsa:hover{background-color:#d4eaf2;}vardefaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyT