2009年8月31日 星期一

用縮圖顯示相關文章的功能(Thumbnails for Blogger)


最近看到很多部落格都有使用LinkWithin工具來顯示相關文章,不過綸太郎介紹的只適用Google Blogger的部落格,其實比較起來好像也沒什麼差異,只是blogger可以設定超過5篇以上的聯播,還有顏色、文字大小等可以自訂,自由度相較下會稍微高些。

文章參考於:
Related Posts with Thumbnails for Blogger~ Blogger Widgets

先決條件,你的圖片是在後台文章編輯上傳的圖檔,如果你是利用其他的圖庫,例如Flickr、photobucket或是經由url上傳等,這工具是無效的。


進入後台→版面配置→修改HTML,勾選展開小裝置範本,
然後找到
</head>
在上方加上以上語法
<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == "item"'>
<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, “Times New Roman”, 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 src='http://blogergadgets.googlecode.com/files/relatedthumbs19.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

以上是相關文章的CSS外觀區設定,然後再找到
<div class='post-footer-line post-footer-line-1'>
然後將以下語法加在後面即可,
<!-- Related Posts with Thumbnails Code Start-->
<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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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:if></b:loop><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 widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->


大概出現的位置如下圖,


其中
var maxresults=5;
你可以自行修改你要展示的相關文章篇數,我有試過最高可以展示到6篇,通常是你一篇文章有2個標籤分類,可能就能抓到,但有時你設6篇,他展示的只有3篇,我想應該是這個工具的判斷相關性的程度吧。

var relatedpoststitle="Related Posts";
另外英文標題的Related Posts,你也可改成你要的名稱,例如:同類型的文章,或許您也感興趣...等等

還有可以修改的就是圖片的標題名稱顏色及滑鼠划過的背景顏色,例如,這在最上方的
#related-posts h2{
標題部份,這是顯示Related Posts字型的大小、顏色

#related-posts a{
color:red;
也可以將文章標題的文字改成紅色或是其他顏色

#related-posts a:hover {
background-color:#d4eaf2;
背景顏色,本來是#d4eaf2;淺藍的,我改成紫藍色



#related-posts a{
border : 1px solid #666;
}
另外我在每篇縮圖文章加上邊框,border : 1px solid #666; 讓縮圖區有邊框,這都是可以自行修改的地方。


因為這個Hacks多了CSS區,所以你可以修改成你要的樣子,再加上html區你也可以加在你想加的地方,不一定要在文章末,在文章前亦可,只要你懂得整個版面的配置,這個工具也是相當的自由。

如果單篇文章沒有圖片,他就會顯示這張圖


而原先有裝Abin's Tech Note的加入相關文章功能 (Related Post),這是文字型的列表,先試驗幾天再拿掉,有興趣的朋友可以裝看看。

另外關於顯示欄位的寬度與高度,目前我是沒法修改,這是要告訴大家的。

Note:如果語法上出現錯誤,請至原網站Copy語法,因為有朋友反應無法安裝成功,目前找不出原因,綸太郎自己安裝這篇文章上的語法是沒有問題。

2009.11.13更新,
目前這項功能,已拆除,因為覺淂頁尾放太多東西,很雜,正在尋找更好的配置方法。

2009年8月27日 星期四

文章分類新增標籤雲功能(Label Cloud)


最近Blogger官方釋出最新的功能,就是標籤雲(Lable Cloud),我想應該很多人都已經知道了,喜歡這個功能的朋友,不用再安裝hacks程式就可以在後台直接設定成標籤雲狀態,還有也可以選擇是否顯示你的標籤(分類)名稱,及文章篇數的設定。

如何設定呢? 很簡單,
進入後台,版面配置→網頁元素→新增小工具,選擇"標籤",原先只有"清單",現在多了一項"雲端",就是標籤雲的選項,你也可以在原先的標籤小工具修改,或是再新增一個亦可。


原先的清單分類


雲端分類


這裡也可以選擇你想顯示的分類名稱,其實我想過將兩個文章分類顯示的項目不同,但目前似乎是無法這樣設定,如果你有兩個文章分類,要顯示的項目都是要一樣的,因為原先想說標籤雲設定顯示較熱門的文章類別,另外原始的就是全部的文章類別,但現階段官方好像是無法達成這種功能。

顯示功能裡面,點選"已選取的標籤 ",勾選你要顯示的分類,就可顯示特定類別了。



不過目前試用後,覺得很醜,還是喜歡目前的兩欄式分類,有需要的朋友可以自行修改,另外關於標籤的文字大小修改,可以參閱
Improved Label Gadgets - Now Supporting Label Clouds and More! 這篇文章的說明。

安裝有問題的朋友,則可以參考
小Ken思路不轉彎: [Blogger partly cloudy] Blogger官方版標籤雲與所需之樣板修改

延伸閱讀:
文章分類太長了嗎?教你將它變成兩行

2009年8月23日 星期日

找個喜歡的Twitter Button細細念吧


偶然間發現這個Twitter Button的網站,網站提供的Twitter的按鈕連結非常豐富,可以挑選一個適合你的部落格樣式,來碎碎唸吧。

網站:
Get Free Twitter Buttons - Great for a Blog, Forum, or Website


在上方空白填入處,輸入你的Twitter ID帳號即可,選擇你喜歡的按鈕格式,再將語法貼到邊欄裡即可,非常的方便。


By TwitterButtons.com

如果你有發現破圖的現象,就是圖片無法顯示的語法,注意一下img src的語法是否有問題,譬如http://wwww/變成4個W,刪除一個即可,或是少了www,或是多了一個images/資料夾的語法,是作者不小心多加上的,像上面這個藍色的twitter的語法即是。

正常圖片的語法是http://www.twitterbuttons.com/images/ex/圖片名稱.png
感覺這個作者還蠻粗心的,不過如果喜歡的話自己改一下即可。

也有動態的圖示

Maverick Money Makers


By TwitterButtons.com

直立式的


By TwitterButtons.com

蠻漂亮的,看起來蠻專業


By: Twitter Buttons

徽章式的


By TwitterButtons.com

可愛的小鳥




By: Twitter Buttons


By TwitterButtons.com


By TwitterButtons.com


By: Twitter Buttons


By TwitterButtons.com

無聊時就換換圖片按鈕,也不錯的。

2009年8月11日 星期二

新增Plurk、Twitter及Facebook推文按鈕


隨著網路工具發展愈來越多元的趨勢,當然部落格也要隨著時代日新月異來個更新,新增了三個部落格推文按鈕,分別是Plurk(噗浪)、Twitter(推特)及Facebook(臉書)。


其實這三個工具我很少在用,不過想想還是研究一下,畢竟最近這三者是大熱門的網路工具,參考了Browny Walking: [tip] 在 Blogger 加入 Plurk 推文按鈕Not My Business---在Blogger文章中放置噗浪與twitter推文按鈕這兩篇文章,如果你是初學者,建議使用這兩篇文章的方式即可,作者都寫得很詳細,綸太郎自己也設了一列推文工具列,和文章上方的共享書籤其實大同小異,可以說是第一代和第二代吧,也把文章原先前頭的Funp推文鈕整合到這個工具列上,讓版面看起來不致太過雜亂,不過建議比較熟悉html語法的朋友再來使用,記得修改前,一定要備份。

進入後台→版面配置→修改Html,勾選"展開小裝置範本"

先新增兩個定義,就是推文工具列(.bookmarkpush)的CSS外觀定義,還有推文工具列的圖片定義(.bookmarkpush img)這裡你可以依據你的版面自行調整,我的圖片都是60px*60px大小,你可以自行到網路上尋找適合你自己的圖片,或是用文字代替亦可。
.bookmarkpush {
padding-top: 10px;
}
.bookmarkpush img{
padding-right: 10px;
}

第一個定義是工具列與上方有10px的距離,第二個則是工具列內的圖片與右邊距離10px,這些都可自行調整。

以上這部分放在CSS區即可,即]]></b:skin>前就行了。

而以下這段則是放在內容結構區Html裡面了(以我的版面應該是在Labels這行下方,就是 <div class='post-footer-line post-footer-line-2'>......</div>這個區塊下),所以要比較熟悉版面配置的朋友再使用,不然很可能會加錯地方,因為每個模版的配置都不太一樣,在你的版面適當的位置自行加入,我是放在文章後面,訂閱文字之前,原始的語法如下,裡頭紅色的文字,及綠色圖片位址你可以換成你自己的,


<div class='bookmarkpush'>如果您也喜歡這篇文章&#65292;歡迎推文分享......<br/> <div class='funp_button' style='float:left; margin-right:10px; font-size:0px;'><data:post.url/></div> <a expr:href='&quot;http://www.plurk.com/?qualifier=shares&amp;status=&quot; + data:post.url + &quot; &quot; + &quot;(&quot; + data:post.title + &quot;)&quot;' target='_blank' title='推文至 plurk'><img src='http://sites.google.com/site/lunfiles/box/plurkc1.png'/></a>
<a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + data:post.url' target='_blank' title='推文至twitter'><img src='http://sites.google.com/site/lunfiles/box/twitterc1.png'/></a>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='分享至 Facebook'><img src=' http://sites.google.com/site/lunfiles/box/facebookc1.png'/></a></div>

其中上方紫色的Funp按鈕,你可以選擇不加入,如果要加記得要在</head>前面加入以下這段Java Script的程式碼才能運作,
<script src='http://blogger-ext2.googlecode.com/svn/trunk/3rd/funp_button2.js'/>另外因為綸太郎的推文工具列是在文章展開後(按下繼續閱讀後)才出現分享推文的工具列,所以前後會多加上兩行敘述,
<div align='left'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
推文分享工具列程式碼
</b:if>
</div>

如果沒有加入的話,會在首頁及文章本頁都會出現推文工具列。

另外先前有跟我一樣,在文章末放入訂閱的提醒文字列(歡迎訂閱RSS,最快收到最新的文章。)者,記得上面的
</b:if>
</div>
是要加到類似以下這段語法之後
<div class='subscribe2'><a href='http://feeds2.feedburner.com/lun01' title='訂閱0與1謎詭世界'>歡迎訂閱RSS&#65292;最快收到最新的文章&#12290;</a></div>
因為有幾個朋友有使用這個工具列,所以提醒一下。


每個模版都不盡相同,要自己找到對的地方加上去即可,或是加在你原先的共享書籤後頭也行,只是圖片你要自行搜尋較小的圖,然後參考這篇單篇文章加入共享書籤(Social-Bookmarks),不過這部份就有點複雜了,只要後頭再加上
<a expr:href='&quot;http://www.plurk.com/?qualifier=shares&amp;status=&quot; + data:post.url + &quot; &quot; + &quot;(&quot; + data:post.title + &quot;)&quot;' target='_blank' title='推文至 plurk'><img src='圖片網址'/></a>
<a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + data:post.url' target='_blank' title='推文至twitter'><img src='圖片網址'/></a>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='分享至 Facebook'><img src='圖片網址'/></a>
即可。

延伸閱讀:
Social Media Web 2.0 Cloud Icons
在文章下方放置訂閱RSS的文字敘述
Blogger template模板教學課程---概說及基本結構

2009年8月5日 星期三

四季春夏秋冬的Rss Feed Icon


最近看到一篇文章介紹許多Rss Icons的圖示,覺得這個四季圖案的設計非常特別,自己也很喜歡,跟大家分享。