ad_728x90

參觀我的【 伊生活小舖】

2013年6月15日 星期六

LinkWithin 網站服務讓 Google 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 貼上後,按下儲存範本就一切完工了。

COMMENTS HAVE BEEN DISABLED FOR THIS POST [文章的評論已被禁用]

Ratings and Recommendations by outbrain