來試試新玩意之五，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。