分類：網頁開發

在 Google 部落格 Blogger 加入「相關文章」（Related Posts）小工具教學

網路上許多部落格的文章結尾處，都會列出相關的其他文章，方便讀者閱讀與搜尋，這裡介紹如何在 Google 的部落格 Blogger 中加入「相關文章」（Related Posts）這個小工具。

在 Blogger 內建的小工具中，並沒有「相關文章」的功能，所以網路上就有人自己寫了這樣的功能給大家使用，使用上很方便，以下是使用教學。

Step 1
打開瀏覽器連到 Related Posts Widget for Google Blogger v2.0 -- Setup 網頁。

這個網頁可以幫你自動產生「相關文章」的程式碼，在 Options 中有許多選項，可依照自己的喜好選擇，而右上角也有一些 Demo 範例可以參考，調整好參數後，就按下「Update Demo & Code」。

Step 2
在按下「Update Demo & Code」之後，在右方的 Demo 方塊就會產生所選擇的樣式範例，可以不斷重複的修改，直到滿意為止，而每次修改完記得要再按下「Update Demo & Code」，Demo 的部分才會更新。

如果看起來感覺沒問題，就可以將這個「相關文章工具」加入自己的 Blogger 部落格中。

Step 3
要將產生好的「相關文章」小工具加入 Blogger 有兩種方式，一種是直接按下右方的「Add to Blogger」的圖示，然後就會跳出「匯入網頁元素」頁面，

再直接點選「新增迷你組件」就可以了，這樣的做法會在部落格中新增一個 HTML/JavaScript 小工具，之後可以從管理界面的「版面配置」中調整擺放的位置。

Step 4
而另外一種做法是直接修改 Blogger 範本，將剛剛「Code」方框中所產生的程式碼複製起來，然後貼在 Blogger 的範本中（修改範本的詳細做法請參考這裡）。

再貼上的時候，要注意有一部份的程式碼要貼在 <head> 中，另一部份則是貼在要顯示「相關文章」的位置，而其中  需要修改成 。

我的做法如下，給大家參考。

在 </head> 之前，貼上以下程式碼：

<!-- Begin: Add by Seal -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js"></script>
</b:if>
<!-- End: Add by Seal -->

在 <div class=’post-footer’> 之前，貼上以下程式碼：

<!-- Begin: Add by Seal -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='related-posts-widget'>
  &lt;!-- {
        thumbs:0
  } --&gt;
  Loading ...
  </div>
</b:if>
<!-- End: Add by Seal -->