Blogger in Draft：加入 Star Ratings 文章星號評等

相信有很多文章都介紹過這個，說真的，我也是從 Josh's Note 知道的．不過我是加入失敗的其中一人/.\(迷之聲: 那你還夠膽寫這篇文章)

呵呵．．．我寫這篇文章就是將我失敗的經驗分享出來，希望其他人不要跟我一樣失敗了/.\

好啦，入正題，先介紹如何加此功能吧～～讓我們將火星人趕離地球～～(迷之聲: 又在發夢了＝　＝；；)

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



儲存後，先檢視一下你的Blog，看看是否有出現如下圖的Star Ratings，如果沒有就必須手動加入程式碼。



手動加入程式碼，點選「版面配置」–「修改HTML」，勾選「展開小裝置範本」。

尋找下列三個區塊其中一個 <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'> ，將下列程式碼放在你想放置的區塊內，由你自己決定要放在那
(註:我是放在 <div class='post-footer-line post-footer-line-1'> 的尾尾部份，就是這區域 </div> 之前)

Code

<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>


然後尋找 <b:include name='feedLinks'/>
先看看下面程式碼在不在這之下(我就是加多一次，令到有２個星號評等，原因應該是當你登入draft.blogger.com 時，在網頁元素下加入了一次顯示星號評等，所以下列的程式碼產生了，但是沒有上面的程式碼，所以沒能顯示)
所以如果發現有以下的程式碼就不用加，沒有就加上去！
(註:最可惡是我發現出現２個後，刪了一個，儲存後全都不顯示= =;　當然最後我是還原所有從新整過 囧rz～～所以一定要小心肯定下面沒有才加 ^^~）

Code

<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>


最後 Star Ratings 預設的位置不太好的感覺，你可以加入一段 CSS 來調較一下 (在 </head> 之前加入)

HTML

.star-ratings {
float:right;
}


終於完成！！地球再無火星人了！！(迷之聲:我倒想你找一個火星人給我看看 = =;)