Site Network: Home | Photos | Blogroll | About

Top of this page
Home
collection of blogger Hacks and Plugins
exchange Links
subscribe to blog Posts
subscribe to blog Comments
follow me on Twitter
be my friend on Plurk
Taiwan



簡單好看的部落格文章評分工具 JS-Kit

Language:
正在閱讀:簡單好看的部落格文章評分工具 JS-KitTweet this Plurk this

幾個月前曾提過一個讓讀者對部落格文章表達看法的工具 ClickComments, ClickComments 預設了幾個可能的回應,讓讀者在不想打字的情況下,依然能對文章表達喜歡或不喜歡的意見。

今天再向大家介紹另一個工具 JS-Kit, JS-Kit 實際上是個整合型的工具,目前就先介紹為部落格文章評分(給星號)的部分。


JS-Kit


JS-Kit 星號的配色很活潑, Rating 功能簡單明白,可以選擇 1-5 顆星來給分, JS-Kit 也開放了一些參數讓使用者自行設定,盡量貼近使用者的需求。參數設定的網頁在這,請大家對照著看,網頁上把參數的 code 都寫得很清楚,直接 copy & paste 就可以使用了。

1. 呈現樣式:
有星等及拇指(Score view)兩種,在星等樣式中,可以選擇要不要將特定讀者的分數與平均分數分開顯示,一起顯示是 Combined view,分開顯示是 Split view。

2. 星號的顏色:
若是選擇 Combined view,就用 starColor 來設定星號顏色,若是用 Split view 的話, starColor 是控制平均分數的顏色,必須增加一個 userColor 來控制特定讀者的星號顏色。

5. 用自己的星號圖案:
可以使用自己喜歡的星號圖案,不過必須先準備五個星號圖檔, star.png 與 star-half.png 用來顯示平均分數, user.png 和 user-half.png 用來顯示特定讀者的分數,而 gray.png 則是初始狀態。再用 imageurl 來設定圖檔位置(要先找個網路空間儲存,例如 Google Page Creator),用 imagesize 控制圖檔大小。

6. & 7. 改變拇指的大小或圖案:
星號圖案可以換,拇指的圖案也能換,建議使用網頁上的 Thumbnail Generator 來進行。

10. 放到單篇文章的語法:
這是最重要的部分了,加上 permalink 參數之後,就能放在每一篇文章裡,讓大家評分, permalink 的設定必須是該篇文章的永久網址, Blogger 平台的就是 data:post.url 了。

經過一番拼拼湊湊之後,加上自己想客製化的參數設定,就能做出一個貼近自己需要的評分工具了。

我也把我的 code 給大家參考,我是選用 Combined view,星號的顏色是金黃色,我放的位置是每篇文章的下方(post footer)。其中 center small 的部分,依照一般模版的設定,可能是 <p class='post-footer-line post-footer-line-?'>, ? 是數字,代表 post footer 第幾行,而 <b:if> 的部分則是讓 JS-Kit 只在單篇文章時出現,不會出現在部落格首頁。

<p class='center small'>
<b:if cond='data:blog.pageType == "item"'>
Rate this post:
<div class='js-kit-ratings' permalink='data:post.url' starColor='Golden' title='Cool Stuff' view='combo'/>
<script src='http://js-kit.com/ratings.js'/>
</b:if>
</p>

Rate this post:

Posted by thinkerCKD 11:25 AM

Bookmarks: Add to HEMiDEMi Add to 推推王 Add to MyShare Add to udn Add to del.icio.us digg it Add to furl Add to Google bookmark Add to Technorati Share on Facebook Add to Yahoo 分享書籤 正在閱讀:簡單好看的部落格文章評分工具 JS-KitTweet this Plurk this Random Posts (Powered by Stuff-a-Blog):

0 comments:

Post a Comment