Thursday, 7 February 2013

Star Rating Widget Blogger

Star Rating Widget Blogger secara default dapat diterapkan menggunakan start rating default for blogspot melalui http://draft.blogger.com. Untuk memasang star rating widget ini dapat pula memanfaatkan widget yang disediakan oleh http://www.graddit.com dengan pilihan tampilan yang lebih bervariasi dan menarik.

Star Bintang
Source: http://www.freetattoopicture.com

Default Star Rating Widget Blogger

Cara memasang rating bintang blogspot, sedikit lebih rumit :)

Langkah 1
Edit User Setting

Langkah 2
Activate Blogger Draft

Langkah 3
Edit Layout - Edit Posting Blog - Activate Default Star Rating For Blogger

Langkah 4
Jika Star Rating tidak terlihat, maka Edit HTML Template - Expand Widget Templates - Ctrl+F <div class='post-header-line-1'> - Letakkan script ini:

      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <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='280'/>
        </b:if>
      </span>
      </b:if>

Animated Star Rating Widget Blogger

Cara memasang rating bintang untuk blogspot dengan menggunakan widget dari 3th party, tidak sulit :)

Langkah 1
Edit HTML Template - Expand Widget Templates - Ctrl+F <div class='post-header-line-1'> - Letakkan script ini:


<b:if cond='data:blog.pageType != &quot;index&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>,</b:loop></b:if></div>Rate this posting: <div expr:id='data:post.id' class='ffbs_rate'>{[[&#39;&lt;img src=&quot;http://static.graddit.com/img/star.png&quot;/&gt;&#39;]]}</div>
<div expr:id='&quot;ffbs_stats_&quot; + data:post.id' class='ffbs_stats'></div>
<script type='text/javascript' expr:src='&quot;http://www.graddit.com/rate/eng/5/&quot; + data:post.id + &quot;?id=&quot; + data:post.id + &quot;&amp;stats=ffbs_stats_&quot; + data:post.id + &quot;&amp;labels=labels_&quot; + data:post.id + &quot;&amp;info=info-&quot; + data:post.id + &quot;&amp;info_delay=2&amp;url=&quot; + data:post.url + &quot;&amp;class_star=ffbs_star_img&amp;class_star_set=ffbs_star_img_set&amp;class_star_vote=ffbs_star_img_vote&amp;views=yes&amp;votes=yes&amp;average=yes&quot;'></script></b:if></b:if> 


Untuk Animated Star Rating Widget For Blogger ini, terdapat berbagai pilihan style, silahkan kunjungi:

Source: http://www.graddit.com/ratings-widget

Tutorial: http://fruitfulbookmarks-en.blogspot.com/2011/11/rating-widgets-for-websites-blogs-and.html

No comments:

Post a Comment