[Blogger Hacks # 01] 相關文章功能

發現自己使用Blogger也有半年了,其間玩過不少有趣的Hack,決定透過文章把一些我覺得很有用的Hack記錄、整理下來,並把一些我自己的使用心得分享出來,藉此順便推薦給同樣有在玩部落格的網友也能順便參考參考。

Photobucket


這篇要介紹的是「縮圖顯示相關文章」的工具!

「相關文章」的基本概念就是在每篇文章最後面以特定隨機的方式顯示部落格上其它文章的連結。類似的Hack很多,挑選文章的方式也莫衷一是,有的是完全隨機、有的是按照標籤,也有混合概念的......

但我獨鍾於自己現在採用的這個縮圖式相關文章。除了它的縮圖效果我很喜歡之外,它挑選文章的方是也感受得出來是蠻用心的,屬於混合式的概念。(不過官網上好像沒有明確描述挑選的機制是如何運作的)

這個名為LinkWithin的Hack是由這個網站所提供,無須註冊可以直接使用。但是各位會發現它有一個(我認為是)明顯的缺點,就是它不只會在全文閱讀時顯示在文章最後面,就連繼續閱讀的縮減版面它也會跟在每篇文章的屁股後面!這個問題非常大,因為它會破壞首頁的版面規劃,除非你最初就是設計要讓所有首頁縮減文章後面都有相關文章連結跑出來。

解決方法是,我們利用「在特定頁面隱藏Widget」的方式來把它在首頁上封印掉!這個技巧我是從ABIN'S TECH NOTE這個網站學來的:

進入後台版面配置的html修改,展開小工具後,尋找想要進行隱藏的元件(widget)的code,在它的

<b:includable id="main">

後面加上這行
<b:if cond='data:blog.url != data:blog.homepageUrl'> 

然後在元件code結束的地方,也就是這兩行

</b:includable>
</b:widget>

前面放上
</b:if> 

把這個if給close就可以了。

如此一來這個相關文章就不會出現在首頁,只會在全文閱讀模式下才追著文章的結尾出現,比較清爽也比較符合閱讀直覺。這個技巧的進一步運用(比方說想要在其他條件下隱藏元件)可以直接參考上面引用的那個網站,裡面的教學十分清楚。



接下來要對這個Hack進行進一步的客製化。
注意到,它在縮圖前面的預設顯示文字是「您或許對這些文章有興趣:」而這很可能不是你想要的描述。要客製化個人的描述,進入後台版面配置的網頁元素調整頁面,點進這個Widget後你會看到以下的code:

<script>
var linkwithin_site_id = 151441;
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts with Thumbnails" style="border: 0" /></a>

只要在第一個</script>後面加上這一行
<script>linkwithin_text='XXXX'</script>

即可。其中XXXX就是你想要呈現的文字。
這邊也可以透過<br>把要顯示的文字拆成多排,或者如果覺得相關文章距離本文結尾太接近的話,可以在要呈現的文字前面放它三、五個<br>把行距拉開就好了。

如此一來,縮圖式相關文章就搞定啦!

4 comment(s):

紅眼兔 | 18 October, 2010 11:04

正找尋一個可用的LinkWithin hack就想起這篇,感謝XD

EverDark | 22 October, 2010 20:04

(^_-)db(-_^)

Christine | 30 March, 2011 07:48

5 顆星,不, 是 6 顆星的教學文章...謝謝你!!!

EverDark | 07 April, 2011 17:24

不客氣~

Post a Comment

回應文章前請注意下列三勿原則:

1)勿拍照;(→會有靈異的照片從你的相機裡跑出來...
2)勿餵食;(→會有飢渴的猛獸從我的網誌裡跑出來...
3)勿告白。(→會有奇怪的東西從站長體內裡跑出來...

謝謝大家的配合。
( > ー <)b