วิธีสร้าง Rating Comment ให้กับบทความ

Rating Post

น่าจะเป็นการดีกว่า…ถ้าเราทราบว่าแต่ละ บทความที่เราเขียนนั้นน่าสนใจแค่ไหน มีคนอ่านมาก/น้อย และรู้สึกอย่างไรกับบทความของเรา

วิธีปกติในการใส่ rating ให้กับบทความสามารถดูได้ที่บทความนี้ วิธีใส่ Rating และ Star rating ให้กับบทความ V2

Trick นี้จึงขอนำเสนอการใส rating ให้กับแต่ละบทความ(แบบที่ใส่แบบปกติไม่ได้) ซึ่งผมคิดว่าน่าจะเป็นประโยชน์หรือช่วยให้ผู้เขียนและผู้อ่านโต้ตอบกันได้ง่ายขึ้น และง่ายกว่าการให้ผู้อ่านพิมพ์ข้อความซ้ำๆ เช่น ขอบคุณครับ ขอบคุณค่ะ เป็นต้น

สำหรับตัวอย่างของผลงานนั้นสามารถดูได้จากรูปด้านบน หรือใต้บทความนี้ครับ

วิธีติดตั้ง

ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML >> คลิก ขยายแม่แบบเครื่องมือ

2010-01-08_000502

จากนั้นค้นหาโค้ด

<data:post.body/>

หรือ

<p><data:post.body/></p>


ซึ่งขึ้นอยู่กับแต่ละ Templates ว่าจะพบรูปแบบใด

เมื่อพบแล้วให้วางโค้ดเหล่านี้ถัดจากโค้ดดังกล่าวและบันทึกแม่แบบครับ

กรณีที่ 1 ถ้าต้องการ Rating แบบ check box ก็ใช้โค้ดต่อไปนี้ครับ


<span class='reaction-buttons'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
<span class='reactions-label'>
Reactions: </span>&#160;
            </td>
<td><IFRAME allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/>
</td>
</tr>
</table>
</span>
<span class='star-ratings'>
</span>



ข้อความ Reactions:  สามารถปรับแก้ได้ตามใจชอบ


กรณีที่ 2 ถ้าต้องการแบบ Star Rating

2010-01-08_200212  

ก็ให้ใช้โค้ดต่อไปนี้ครับ

<script language='JavaScript'>
var OutbrainPermaLink='<data:post.url/>';
var OB_demoMode = false;
var OB_Script = true;
</script>
<script src='http://widgets.outbrain.com/OutbrainRater.js' type='text/javascript'/>


โค้ดที่ 2 นี้เครดิต Outbrain.com ครับผม



หมายเหตุ หากวางโค้ดลงไปแล้วไม่อยู่ในตำแหน่งที่ต้องการก็สามารถย้ายตำแหน่งถัดจากโค้ดใดโค้ดหนึ่งต่อไปนี้  ขึ้นอยู่กับแต่ละ template (โค้ดของแต่ละ template ไม่เหมือนกัน)

<p class='post-footer-line post-footer-line-1'>หรือ
<div class='post-footer-line post-footer-line-1'>หรือ
<div class='post-footer-line post-footer-line-3'>

อย.(อีกอย่าง) เมื่ออ่านบทความนี้แล้วอย่าลืม Rating ให้ผมบ้างนะครับ

ตอนนี้มีความคิดเห็น : 4 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. ขอบคุณมากมายครับ....เป็นประโยชน์มากๆๆ

  1. ขอบคุณมาก ๆ ครับ :)

  1. เจอเว็บนี้วันเดียวติดเลยค่ะ
    อธิบายดีมากเลย
    ขอบคุณมากนะคะ

  1. @primbonbon : ขอบคุณครับ แต่ต้องขอบอกว่าวิธีในบทความนี้ไม่จำเป็นแล้วนะครับ เพราแม่แบบ blogger รุ่นใหม่มีมาให้แล้ว เราเลือกแสดงได้โดย ไปที่ การออกแบบ >> คลิกตรงกล่องบทความบล็อก >> เลือก แสดงผลปฏิกิริยาครับ

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel