Tuesday, May 12, 2009

วิธีการเพิ่ม "Read More"ในบล็อก

เราสามารถเลือกที่จะแสดงจำนวนเงินที่เลือกข้อความจากเริ่มต้นของการส่งแต่ละบท ความในฐานะทีเซอร์แทนที่จะแสดงทั้งหมดโพสต์ในหน้าบล็อกของเรา ดังนั้นเมื่อคนต้องการอ่านส่วนที่เหลือของการโพสต์จะสามารถคลิกที่ "Read More" เพื่อดูเต็มโพสต์. ซึ่งเป็นประโยชน์มากหากท่านมีจำนวนมากยาวบทความทั้งหมดในหนึ่งหน้า. มาเริ่มกันเรยดีกว่า

ขันตอนที่ 1 - เพิ่ม code เข้าไปใน template

ขั้นแรกเพื่อนๆจะต้องแก้ไขโค้ดที่มีอยู่ ผมขอแนะนำให้สำรองข้อมูลก่อนโดยคัดลอกและวางลงใน Notepad จากนั้นกด (ปุ่ม CTRL + F) เพื่อค้นหาคำว่า post-header-line-1

โหลด code มา

DOWNLOAD CODE
หรือ copy

<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

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

<b:else/>

<style>.fullpost{display:none;}</style>


แทรก code ลงไปดังภาพ

new-code-block.png

ถ้าธีมของเพื่อนๆไม่มี post-header-line-1 ก็ทำได้อีกวิธีดังภาพ

new-code-block-mush.png

หลังจากนั้นเพิ่ม code
โดยโหลด code จาก DOWNLOAD CODE จะได้ code ดังภาพ
หรือ copy

<b:if cond='data:blog.pageType != "item"'><br />

<a expr:href='data:post.url'>Read more...</a>

</b:if>

</b:if>


แล้วก็นำ code มาแทรกต่อจาก data:post.body ดังรูป

new-code-block-2.png

เมื่อแทรกทั้งสอง code เสร็จจะได้ออกมาดังภาพ

new-code-block-3.png

กดบัญทึก เสร็จขั้นตอนที่ 1

ขั้นตอนที่ 2 - เพิ่มแท็กใน Default Post Template

เข้าำไปที่

Settings>Formatting ตรง post template เพิ่ม code เข้าไปดังรูป

span class="fullpost" ก็อบไปแล้วใส่ < >บิดก่อนหลังดังภาพ

/span ใส่ < >บิดก่อนหลังดังภาพ

post-template2.png

ขั้นตอนที่ 3 การโพสบทความ

เมือเราเข้าไปโพสบทความ ให้เราทำตามภาพ

post-template-result2.png

สุดท้ายเราก็จะได้ ดังภาพนั้นเอง เสร็จสมบูรณ์

post-results.png


No comments:

Post a Comment