利用 LinkWithin 網站服務讓 Google Blogger 用縮圖顯示相關文章

月鈴老師問我如何在部落格之中以縮圖顯示『相關文章』？

要做到每一篇文章都有相關文章其實很容易，我祇是利用 LinkWithin 這個網站提供的服務而已。不需要註冊，祇要填幾個簡單的資料，就可以在部落格中呈現相關文章了。

網路上其實滿多 LinkWithin 的教學文章，不過針對如何讓 LinkWithin 不要顯示在 Blogger 首頁的教學有些比較難，所以我想，還是再重寫一篇相關的介紹吧！

那麼，我們就開始吧。

首先，要先連到 LinkWithin 網頁，在它的首頁可以看到有幾個要填寫的資料項目，一一填寫即可。

LinkWithin 所需填寫項目

Email：填入你的 Email 即可
Blog Link：你的部落格網址，這個要填對，否則就白搭了
Platform：部落格平台種類，使用 Google Blogger 的直接選就好
Width：要顯示幾篇相關文章？依部落格寬度來決定吧！

最後面有個勾選項目：『My blog has light text on a dark background』是給黑底白字的部落格使用的，如果你的部落格是淺色底黑色字，這個項目就不要勾選。

填好資料後，按下 Get Widget! 按鈕進到下一步。

圖、到 LinkWithin 首頁填寫部落格資料

再來就是將 LinkWithin 的服務安裝到 Blogger 去了。在指示畫面中按下 Install Widget 的連結就會跳到 Blogger 去繼續下一步。

圖、點擊 Install Widget 連結

上一個步驟做完後就會跳到 Blogger 這邊繼續。

要讓 Blogger 以縮圖呈現相關文章最簡單的方法就是在新增網頁元素的畫面上直接點選『新增迷你組件』，然後選擇要顯示在左邊、右邊就可以了。

祇是這樣子新增 LinkWithin 的方式會讓首頁出現一堆小圖，很煩人，所以我不會在這個畫面按『新增迷你組件』，而是會修改一下 Blogger 範本後再呈現 LinkWithin 的相關文章功能。

修改 Blogger 範本

要用修改範本的方式在 Blogger 的文章中呈現 LinkWithin 的方法很簡單，首先，在新增網頁元素這個畫面上不要選新增迷你組件，而改選『編輯內容』。

圖、選擇編輯 LinkWithin 的組件內容

點選了『編輯內容』後會出現一個文字框，裡面有一大堆程式碼，我們祇要把兩段 <script>……</script> 複製起來就好了，其他的部份不用理它。

圖、複製 LinkWithin 的 Script 連結

複製好後，進到 Blogger 的範本修改功能區中，選擇『設計 ==> 修改 HTML』，並勾選『展開小裝置範本』。

圖、進入 Blogger 範本修改功能區

按 Ctrl-F 叫出網頁搜尋功能，然後搜尋底下列出來的這個字串，找到這字串第二次出現的地方。

<b:if cond='data:post.allowComments'>

圖、搜尋 <b:if cond='data:post.allowComments'> 字串

找到我們所要的字串後 (記得是要找第二筆喔)，把剛剛複製的 <script>……</script> 貼到那一行字串之後。

圖、將 Script 加入範本中

將那一串的 Scrip 貼上後，按下儲存範本就一切完工了。

動作說明

好，來解釋一下為什麼要這樣做吧！

我們搜尋的這個 <b:if cond='data:post.allowComments'> 字串是在指示 Blogger 判斷我們的部落格是否開放文章迴響，它會在範本中出現兩次。

第一次，Blogger 看看文章迴響功能是否開放，如果開放就在首頁顯示本篇文章有幾則迴響，是一則、兩則，或是還無人回應等相關訊息。

第二次出現時，是在指示 Blogger，如果文章迴響功能有開放，就在單篇文章裡顯示『張貼回應』的連結。

因為這個張貼回應的的連結祇會出現在單篇文章而不會出現在首頁裡，所以我們把 Script 放在這個張貼回應的選項附近，就順便擁有了『不出現在首頁、祇出現在文章中』的好處了，這樣就不用像其他的教學文章去修改一堆東西，初學者應該也可以很容易的把 LinkWithin 的功能放進自己的文章中了！:)

希望這樣的教學能讓月鈴老師操作順利。

Technorati : google, 免費與自由軟體, 資訊化教育, 資訊融入教學, 資訊課程, 電腦密技