การทำบทความให้โชว์อย่างย่อ(Read More)

Posted by กิตติ at 12:34 AM

หลายคนบ่นว่า อยากทำบทความที่โชว์แค่สามสี่บรรทัดแล้วมีลิ้งค์ให้กดออกไปยังบทความเต็ม ผมลองเข้าไปหาอ่านตามบล็อกต่างๆและในเวปบอร์ดของThaiseoboard.com(กระทู้แรก,กระทู้ที่สอง)...ต้องขอบคุณคุณBall6847ที่ช่วยเขียนโค้ดแก้ให้

สำหรับบล็อกของผมนั้น ลองใช้การแก้ตามบทความที่เขียนในeblogtemplate ลองเข้าไปตามที่ลิ้งค์ไว้ให้แล้วก็อปโค้ดมาแก้ตาม ณ วันที่เขียนบล็อกนี้ยังใช้ได้อยู่ ถ้าใครลองเอาไปใช้แล้ว โค้ดนี้ใช้ไม่ได้แล้ว ก็ช่วยเขียนคอมเม้นท์บอกด้วยครับ จะได้ไปค้นหาวิธีใหม่อีก
ขั้นที่1.ทำการดัดแปลงเทมเพลตก่อน(Modify template code)
ก่อนที่จะทำการแก้ไขใดๆในส่วนของEdit HTML ให้เก็บไฟล์เทมเพลตไว้ก่อน

จุดสำคัญคือ อย่าลืมกดเลือกที่ Expand Widget Templates ซึ่งอยู่ในหน้า Layout แล้วเลือกตรงแท็บ Edit HTML จะเห็นช่องให้ติ๊กตามรูป

รูปนี้เอามาจากกระทู้ของคุณBall6847
จากนั้นลองหา <:data:post.body/> จากนั้นลองมองขึ้นไปสักสองสามบรรทัดจะมีโค้ดตัวนี้อยู่ใกล้ๆกัน <div class=’post-header-line-1′/> และ <div class=’post-header-line’> แสดงว่าใช่บรรทัดที่เราต้องการแล้ว ก็ให้วางโค้ดต่อไปนี้ก่อนถึงบรรทัดนี้ <:data:post.body/>
ค้ดลอกโค้ดนี้ไปลงครับ

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

จะได้ตามรูปนี้ครับ

จากนั้นให้คัดลอกโค้ดอีกชุดหนึ่งตามตัวอย่างข้างล่างนี้ ไปวางถัดจากประโยคนี้ <:data:post.body/> เหมือนกัน

<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Read more...</a>
</b:if>
</b:if>

จะได้ตามภาพนี้

ดังนั้นจะได้ภาพรวมเป็นตามภาพนี้

หลังจากเรียบร้อยถึงตรงนี้แล้วก็ทำการกดเซฟเทมเพลตไว้ให้เรียบร้อย.
ขั้นที่ 2.เพิ่มแท็กในแบบหน้าเทมเพล็ต(Add Class tag in Default Post template)
จากนั้นก็ไปเปิดหน้า Setting แล้วเลือกแท็บ Formatting แล้วให้เลื่อนไปดูตรงข้างล่างสุดของหน้านี้ เข้าไปที่"Post template" เพื่อเพิ่มโค้ดลงไปในช่องนั้น คัดลอกโค้ดนี้ไปใช้เลยครับ

<span class="fullpost">

</span>

ดูตามรูปนี้ครับ

ขั้นที่ 3 ลองเขียนบทความใหม่(Create New Post)
เมื่อลองเขียนบทความใหม่จะได้ภาพตามขั้นตอน

ผลเวลาเราโพสจะได้ตามนี้

ในส่วนของผมเอง ผมปรับโค้ดเล็กน้อย แทนที่คำว่า"Read More"ด้วย"กดเข้าไปอ่านต่อ"

ผมยกเครดิตให้เวปeblogtemplateครับ
สำหรับการเขียนกระทู้ไหนที่ไม่ต้องการให้แสดงตามดังนี้ ก็ให้ลบ<span class="fullpost">และ</span> ออกไปก็กลับไปสู่การเขียนแบบปกติ.สำหรับกระทู้เดิมก่อนจะใช้โค้ดนี้นั้น ต้องค่อยๆแก้ทีละกระทู้ ทีละบทความเอง