Getting Read More… to Work

April 2, 2006

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

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 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>
ครอบส่วนที่ต้องการละไว้ในหน้าแรกใส่เข้าไป ก็เป็นอันเสร็จพิธีครับ

สำหรับ wordpress ให้คลิกที่ icon เวลา editได้เลย

One Response to “Getting Read More… to Work”


  1. ผมมีปัญหาตอนโพส html tag ใน html ของข้อความข้างบนมาก สุดท้ายต้องหันไปใช้ escape character เลยยกมาเก็บไว้สำหรับอ้างอิง

    HTML provides for characters which are not a part of the normal ASCII character set, or which are reserved within HTML, by providing an escape sequence. The initiator for the sequence is an ampersand (&). The terminator is a semi-colon (;). Some common escape sequences:

    & lt; returns:
    & amp; returns: &
    & quot; returns: “


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: