2008年6月29日

來試試新玩意之五,Blogger in Draft:Star Ratings

許Blogger官方真的有把我們這些使用者的聲音聽進去,所以這一次釋出的新功能都滿不錯的,就以Star Ratings來說,以前必須加掛JS才能作到(例如outbrain這一類),現在Blogger終於提供了,廢話不多說,開始實作。

首先還是先登入draft.blogger.com,點選「版面配置」–「網頁元素」,編輯「網誌文章」,選取「顯示星號評等」後儲存。



儲存後,先檢視一下你的Blog,看看是否有出現如下圖的Star Ratings,如果沒有就必須手動加入程式碼。至於手動加入的步驟,Josh在這示範的是加在文章底部,文章底部有三個區塊,分別是<div class='post-footer-line post-footer-line-1'>、<div class='post-footer-line post-footer-line-2'>、<div class='post-footer-line post-footer-line-3'> ,由你自己決定要放在那:
  1. 尋找上述三個區塊其中一個
  2. 將下列程式碼放在你想放置的區塊內
    <span class='star-ratings'>
    <b:if cond='data:top.showStars'>
    <div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'/>
    </b:if>
    </span>
  3. 尋找<b:include name='feedLinks'/>
  4. 將下列程式碼放在<b:include name='feedLinks'/>的下方
    <b:if cond='data:top.showStars'>
    <script src='http://www.google.com/jsapi' type='text/javascript'/>
    <script type='text/javascript'>
    google.load(&quot;annotations&quot;, &quot;1&quot;);
    function initialize() {
    google.annotations.setApplicationId(<data:top.blogspotReviews/>);
    google.annotations.createAll();
    google.annotations.fetch();
    }
    google.setOnLoadCallback(initialize);
    </script>
    </b:if>
  5. 儲存範本
但是完成後,Josh不喜歡Star Ratings預設的位置,於是再加入下列css來改一下位置:
.star-ratings {
float:right;
}


完工後,文章底部所承現的樣子就如下圖。

來試試新玩意之四,Blogger in Draft:Embedded Comment Form

近Blogger in Draft新增了滿多功能,其中最讓我高興的就是這個功能,讓人期待以久的–Embedded Comment Form,往後直接在文章頁面就能發表意見,啟用的方法很簡單,登入draft.blogger.com,選擇「設定」–「意見」,在「意見表單位置」選擇「已內嵌下列文章」後儲存即可,如下圖:



但是當Josh我回到文章頁面想看看承現的結果時,卻發現Comment Form並沒有出現,相信滿多人會有這個問題,我花了一點時間找到解決方法,如下:


  1. 進入「修改HTML」,選取「展開小裝置範本」

  2. 尋找下最程式碼:

    <p class='comment-footer'>

    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

    </p>



  3. 以下列程式碼取代:

    <p class='comment-footer'>

    <b:if cond='data:post.embedCommentForm'>

    <b:include data='post' name='comment-form'/>

    <b:else/>

    <b:if cond='data:post.allowComments'>

    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

    </b:if>

    </b:if>

    </p>

  4. 完成後儲存範本即可。


往後在文章頁面中,就會出現一個Comment Form,從此跟彈出視窗的意見說Bye Bye。