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

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

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

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

Related Posts Step 1

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

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

Related Posts Step 2

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

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

將 Related Posts Widget 加入 Blogger

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

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

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

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

在 </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 -->

這樣就完成了。

參考資料:moretechtipsHelp Blogger
本站已經搬家了,欲查看最新的文章,請至 G. T. Wang 新網站