Getting Read More... to Work

ผมนึกว่าจะเป็นเรื่องง่ายๆ แต่เอาเข้าจริงก็เสียเวลาไปหลายชั่วโมงเหมือนกัน เพราะห่างหายเรื่องเขียนเวป เรื่อง CSS, HTML ไปนานเลยเงอะๆงะๆเล็กน้อย เลยคิดว่าต้องเขียนสรุปไว้สักหน่อยกันลืม สิ่งที่ผมต้องการก็คือต้องการให้มี Read More... สำหรับแต่ละ Blog Post ของผมเพราะบางทีผมเขียนยาวและไม่ต้องการแสดงทั้งหมดในหน้าแรกของ Blog เพราะมันจะยาวไป ก็เลยต้องการให้มีปุ่ม Read More... เฉพาะกรณีที่ Blog อันนั้นยาวไป ผมอ่านจาก Help ของ Blogger.com และก็ไปเจอ Blog ของ Amit Upadhyay ที่บอกวิธีที่ผมต้องการไว้ มาเสริมปรับแต่งอีกนิดหน่อยก็ได้สิ่งที่ผมต้องการ สรุปแล้วผมทำอย่างนี้ครับ
1. เริ่มต้นโดยใส่ code ดังนี้เข้าไปใน Style tag ด้านบน (ให้อยู่ระหว่าง <style></style>)

<mainorarchivepage>
span.fullpost {display:none;}
</mainorarchivepage>

<itempage>
span.fullpost {display:inline;}
</itempage>

2. ใส่ Javascript ด้านล่างนี้เข้าไปก่อน body คืออยู่ใน head ก็ได้

<script type="text/javascript">
var memory = 0;
var number = 0;
</script>

3. หาช่วงของ html body ที่เป็น

<div class="post-body">
<$BlogItemBody$>
</div>

แล้วใส่ Javascript นี้ต่อ

<MainOrArchivePage>
<script type="text/javascript">
spans = document.getElementsByTagName('span');
number = 0;
for(i=0; i < spans.length; i++){
var c = " " + spans[i].className + " ";
if (c.indexOf("fullpost") != -1)
number++;
}
if(number != memory){
document.write('<div class="post-readmore"><a xhref="<$BlogItemPermalinkUrl$>" mce_href="<$BlogItemPermalinkUrl$>" title="permanent link">Read More...</a></div>');
}
memory = number;
</script>
</MainOrArchivePage>

4. เพิ่ม style div.post-readmore เข้าไป โดยหลักๆก็คือทำให้ font ได้ขนาดที่ต้องการ และ ให้วางชิดด้านขวาของหน้า และก็ทำ padding ด้วย (font-family, font-size, text-align:right, bottom-padding)

5. เสร็จแล้วครับ ตอนใช้งานก็ให้ใส่ code

<span class="fullpost"> </span>
ครอบส่วนที่ต้องการละไว้ในหน้าแรกใส่เข้าไป ก็เป็นอันเสร็จพิธีครับ