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>

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

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

1. หาช่วงของ 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>

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

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

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