[Blogger Hacks # 05] 縮圖式相關文章

本文介紹強化版本的「縮圖式相關文章」。(相較於LinkWithin版)

在之前的這篇文章中曾介紹使用「LinkWithin」這個網頁服務所提供的縮圖式相關文章,但我發現它對於轉換成個人網域之後的BLOGGER之對應效果非常差,觀察了一陣子沒有發現改善,詢問了官方也沒得到回應,因此決定自力救濟,然後就找到了本文要介紹的強化版「縮圖式相關文章」!*

參考來源是這個國外網站:「Blogger Plugins」。**

最初其實是造訪了「0與1謎詭世界」這個部落格的此篇文章,發現它介紹了上面那個國外網站的作法,可是只能對應以BLOGGER編輯器直接上傳的圖片。因為我大部分的圖片其實都是先傳到Photobucket然後再從這裡連過去,如此一來就不能適用裡面的辦法。

本來非常灰心,但連到Blogger Plugins裡面的文章之後,發現原作者已經強化原本的javascript所以也允許外部圖片來源了!(灑花~)

以下就先介紹他的作法,然後提供一些我個人的使用與修改心得。



進入後台HTML編輯並展開小工具,找到</head>之後在它的前面放入以下的code

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

然後去找你的template中放置footer的地方,比方說<div class='post-footer'>。因為不同的面板對於footer(就是每篇文章的結尾部分)的物件定義會有差異,所以要自己辨別一下。找到post-footer的插入後,在它的後面放入以下code

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger gadgets</a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

如此一來基本上就大功告成了!



然後是個人客製化的一些細節。首先,在紅色的code部分可以更改要顯示多少文章。注意如果要顯示超過五篇,必須在var maxresults=的部分指定之外,還要去max-results=這邊指定比你要顯示的數量再加上1的數字。比方說要顯示七篇,則必須設定

var maxresults=7
max-results=8

因為我不會.js,所以理由我不明白。XD


接下來可以調整縮圖大小與每篇文章的板面大小。 (板面必須最少和縮圖一樣大否則應該會亂掉)這邊的作法是必須修改.js檔。存放位置顯示為綠色。注意這是原作者放置這個.js的位置,如果想要使用自己修改過的.js,你必須先有一個可以支援.js外連的網路空間。

打開.js之後,關鍵字搜尋「height」就可以快速找到更改縮圖與個別文章區塊大小的地方了。


然後是紫色部分,為沒有圖片的文章所會顯示的預設圖片。可以上傳其它圖片取代之。


最後是關於var splittercolor="#d4eaf2";這一行,是用來調整區塊分隔線的顏色的。不知為何我無法讓它產生效果,所以就不多討論了。使用者請自行研究。



最後,我將這個版本(簡稱BP)與LinkWithin(LW)的差異點整理如下:

  1. LW採用部分截圖,所以不會破壞整張圖的比例;BP對於外部圖片會強制縮整張圖,內部圖片則採部分截取,然而內部圖片是引用了BLOGGER自動縮圖,這個自動縮圖只會存取72*72大小的圖,所以如果要調整放大預設尺寸會讓內部圖片縮圖解析度變差;
  2. LW最多只能容許五則相關文章,BP原則上無限制;
  3. LW不公開它的.js內容,所以無法進一步修改細節,BP則可以;
  4. LW預設有自身廣告連結,BP則隱藏了。
  5. LW的篩選規則很複雜,BP則單純使用標籤作為篩選依據。

或與正是因為第五點的差異,才導致LW在個人網域上的部落格效果不盡理想吧?而BP則只是單純地抓TAG作為關聯,就沒有這個問題。






[Notes]

*主要問題點在於,轉換為個人網域之後新發佈的文章它所抓到的關連文章規則很怪,對於舊文章的部分則會有重複文章出現的問題(網址一個是原本網域、一個是新網域)。
**這個站蠻棒的,而且作者回應非常快。我在上面問一個問題竟然十幾分鐘就回覆了,是個值得bookmark的blogging好站!

2 comment(s):

Alex | 12 March, 2016 02:59
This comment has been removed by the author.
Alex | 12 March, 2016 03:03

站長你好
在搜尋相關套件時看到您的分享文
真的是幫了很大一個忙
至今2016年還是適用
謝謝您了! 好文一枚

Post a Comment

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

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

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