Blogger／Blogspot 版面設計教學與網頁技術收錄（二）

這是教學綜合收錄第二篇。我們舊版實際上是建構在 Google 的 Blogger 系統。雖然 Blogger 具備有方便與安全的優點，但是自由度也會稍微受到約束。不過 Google 讓我們在版面規劃的部份，具有相當高度的自由，因此我們可以依照自己的想法，讓部落格更俱個人風格。

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

修改前請注意，一旦修改 HTML 內容，原本“版面配置”中的“網誌文章”的“編輯內容”，將會停止使用者再更新。如果有需要使用特別設定，像是地址顯示等，請在修改範本前先行設定完成（但是新模板不一定支援）。建議大家在做任何修改前，務必先行備份範本，或是弄個測試網站先做測試呦。

在文章頁面中增加延伸閱讀（相關閱讀、Related Posts）功能

如果你看到本部落格的文章，會發現文章最後都會出現數個「延伸閱讀」的文章，其實這項功能是透過外掛程式辦到的。

Blogger 提供的外掛工具，並沒有相同的功能，雖然我們可以「模擬」出類似的目的，好讓來我們網站的客人繼續留在網站中久一點。譬如使用「最新文章」的外掛工具，以便我們可以用文章一直餵客人、一直餵、一直餵（咦，好像某種動物？）。

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

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

正如古語所云：「條條大路通羅馬」，我們可以輕易的在網路上發現各式各樣的技術，有直接修改程式碼的，也有透過商業外掛達成目的。但是，卻有不少商業外掛，都會在延伸閱讀的位置後方，投放大小不等的廣告，雖然是免費的外掛，但卻或多或少的會破壞版面的配置。

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

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

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

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

在「」之前，複製貼上下面的程式碼：

到這邊為止已經完成所有的工作，相當簡單對吧。裡頭有些參數可以自行設定，有需要可以再詢問囉。現在，當我們回到文章頁面時，應該就可以看到與文章具有關聯性的延伸文章，敬請各位慢慢享用。:)

在 Blogger 安裝 Facebook 的留言功能

Blogger 提供讓讀者透過留言板，與作者討論各文章的想法與心得的留言功能。不過，如果可以讓部落格結合臉書的留言討論模組，那將可以讓更多人觀看我們嘔心瀝血寫出來的作品。因此，底下將要介紹如何在部落格中，增加臉書留言的設計。

首先，我們連結臉書提供的開發者網頁：「Facebook Developers, Comments Pulgin」。

在該頁面中包含有數個欄位，請依照個人喜好填寫，並按下「Get Code」按鈕，以取得留言程式碼。當然，之後都可以在程式碼中進行修改，以符合版面實際需求。

在取得程式碼後，依照先前所說，進入後台的「HTML編輯器」中，並將留言程式碼貼在適當的位置上，該位置可依個人喜好自行決定。

另外，如果直接就將該程式碼原原本本的貼上我們部落格，大家應該會發現到不管在哪篇文章或頁面，留言內容都會完全一致，無法依照各頁面內容產生變化，這主要是因為該程式碼中的預設中，是以「部落格網址」為主定義，並以此進行留言系統的佈置。

因此，如果我們希望每一篇文章都有各自留言內容的話，我們可以將該程式碼中：href=‘Your Domain Link’ 改以 Blogger 內建的定義進行修正，並用下列程式碼進行取代即可：

expr:href=‘data:post.url’

在 Blogger 頁面上佈置浮動式圖片的設計

我們平常在逛許多部落格時，常會發現有圖片像幽浮一樣漂浮在視窗上，隨著我們上下捲動頁面而跟著移動，這就是所謂的「浮動式圖片」，當然，他的功能不僅只是用來展示圖片。

具體的作法是將下面程式碼，複製並貼到前述的「CSS 設計空間」中：

/* Fixed Bar */ .menu_by_dnowba { position: fixed; bottom: 0px; right: 0px; width: auto; margin: 0 0px 0px 0px;

opacity:.900; filter: alpha(opacity=90); padding: 0px 0px 0px 0px; -moz-border-radius-topright: 10px; -moz-border-radius-topleft: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; } .fixed_menu a:hover img { position: relative; top: 2px; left: 2px; border-top: 0px solid #b3b3b3; border-left: 0px solid #b3b3b3; border-bottom: 0px solid #999999; border-right: 0px solid #999999; } .fixed_menu a { display: block; } /Optional : This puts each link in the menu on a new line, remove if you want a horizontal menu/

html .fixed_menu {position:absolute;} /IE only change the position mode of the menu/

接著，我們還需要將下面的程式碼，複製並貼到「版面配置」中的「HTML/JavaScript 小工具」，或是直接貼到「修改 HTML」中適當之位置：

![](https://www.Vedfolnir.com)

這邊要注意的是，這個程式碼包含一段網址：「https://www.Vedfolnir.com」，請直接以你想取代的圖片完整位址進行取代即可。

設定隱藏或顯示網頁元件的方法

在部落格頁面中，每一項功能或小工具都可以視為一個「元件（Element）」。因此我們可以透過撰寫網頁程式，透過「if 判斷式」加上「網頁控制碼」，讓我們在瀏覽網頁過程中，依不同頁面產生各式控制碼，以便網頁程式可針對該等控制碼進行判別，並決定各元件是否需要在特定網頁上被隱藏或顯示。

依慣例，這次的作業也是在「修改 HTML」中進行。一般而言，Blogger 正式的網頁元件，主要以「<b:widget…>…</b:widget>」的包裝方式進行撰寫，因此我們可以在該元件上添加如下所示之包含有「<b:if…>…</b:if>」判斷式的程式碼：

<b:widget id=‘’ locked=‘false’ title=‘’ type=‘’> <b:includable id=‘’> <b:if cond=‘data:blog.pageType != “item”’> ．．． </b:if> </b:includable> </b:widget>

其中，該段「<b:if…>」程式碼可使用下列各式擁有不同網頁控制碼之程式進行取代，便可以達到在不同頁面中顯示或隱藏元件之目的；另，程式碼的「==」可以「!=」取代，以表示相反之意思。

<b:if cond=‘data:blog.pageType == “item”’> <b:if cond=‘data:blog.pageType == “archive”’> <b:if cond=‘data:blog.pageType == “index”’> <b:if cond=‘data:blog.url == data:blog.homepageUrl’>

繼續閱讀

Blogger／Blogspot 版面設計教學與網頁技術收錄（一）
Blogger／Blogspot 版面設計教學與網頁技術收錄（三）
Blogger／Blogspot 版面設計教學與網頁技術收錄（四）

✦ 獨立報導 · 讀者支持 ✦

以實際行動支持獨立觀點，與我們一同走得更遠

每一篇條理清晰的分析、每一次不隨波逐流的觀察，背後都是對真實與品質的堅持。我們拒絕內容農場與演算法流量綁架，堅持自由獨立的客觀發聲。

維持高品質的原創寫作與獨立營運，需要持續的實質力量。您可以選擇一次性贊助或每月定期支持，透過 Google 安全結帳，與我們一同守護這份深刻與清醒。

由 Google 安全處理付款 · 可隨時於 Google 帳戶管理或取消

留言板

為節省資源，留言將於捲動至此處或點擊按鈕後載入。