เปลี่ยนคำว่า Read More ให้เป็นรูปภาพ

ปกติแล้ว Read More จะเป็นแบบตัวอักษร ซึ่งเราสามารถเปลี่ยนมันเป็นคำอื่น เช่น "อ่านต่อ" หรืออะไรก็ได้ที่เราต้องการ รวมถึงเปลี่ยนมันเป็นรูปภาพ เพื่อความสวยงาม และสะดุดตา

วิธีเปลี่ยนคำว่า Read More เป็นรูปภาพ

(How to replace read more text with image)

1) ไปที่ layout > Edit HTML กด Expand Widget Templates

2) กด (Ctrl+F) หาคำว่า read more , more , full story ตัวใดตัวหนึ่ง (ขึ้นอยู่กับ Template ของแต่ละคน)

3) เมื่อเจอแล้ว แปะโค๊ตนี้ทับลงไป (วางทับของเก่า)

<img src='image link URL'/>

ตัวสีแดงคือ ลิงค์รูปที่ต้องเปลี่ยน คือ ใส่ URL ของรูปที่ต้องการลงไป จะเป็นรูปอะไรก็ได้ แต่ขนาดควรไม่ใหญ่จนเกินไป

ใส่ Read More อัตโนมัติพร้อมรูปภาพ

การใส่ Read More อัตโนมัติพร้อมรูปภาพ (Auto Read More with Thumbnails) คือ การทำ Read More แบบอัตโนมัติ โดยที่ระบบจะทำการตัดข้อความ ตามจำนวนอักษรที่เราได้กำหนดไว้ เราไม่ต้องมานั่งใส่ read more ทุกบทความที่เราเขียน นอกจากนี้ยังมีการดึงรูปภาพในบทความนั้นมาประกอบด้วย โดยที่เราสามารถกำหนดขนาดรูปภาพได้ หากนึกไม่ออกว่ามันเป็นยังไง นี่คือรูปตัวอย่าง

เพิ่ม Read More ใน Blogger Template

Read More หรือ อ่านต่อ เป็นการตัดแบ่งบทความที่ยาวๆในหน้าแรกของบล็อกให้สั้นลง เมื่อผู้อ่านสนใจอ่านต่อก็จะกดเข้าไปอ่าน ง่ายๆก็คือ หากบทความของเรายาวมากๆ มันคงจะไม่สวยแน่ๆ ถ้าหน้าแรกบล็อกมีบทความยาวยืดเต็มไปหมด Read More จึงเกิดมาเพื่อสิ่งนี้

การเพิ่ม Read More ในที่นี้ คือการ เพิ่มโค๊ตเข้าไปใน Template เพื่อแสดงคำว่า Read More ให้เห็นในหน้าแรก เพราะบางที Template ที่เราได้โหลดมา อาจจะไม่มีโค๊ตในส่วนนี้มาให้ แม้ระบบจำทำการตัดข้อความให้แล้ว แต่ก็จะไม่ปรากฏคำว่า "อ่านต่อ" หรือ "Read More" ให้เห็น  เพราะฉะนั้นหากผู้อ่านต้องการจะกดเข้าไปอ่านข้อความ จึงทำได้ยาก นอกจากคลิกที่หัวข้อบทความ แต่มันจะไม่ง่ายและสะดวกกว่าหรือ ถ้ามีคำว่า Read More / อ่านต่อ ให้เห็น จะๆ

ฉะนั้นหากคุณกำลังประสบปัญหา หน้าแรกไม่มีคำว่า "Read More" จงทำตามที่ข้าพเจ้าบอก ดังนี้

ไปที่ Design > Layout > Edit HTML กด Expand Widget Template และหาค้นหาโค๊ตนี้ <data:post.body/> ( จะอยู่แถวๆ <div class='post-body entry-content'> ) เมื่อพบแล้ว ให้เพิ่มโค๊ตสีแดงข้างล่างต่อท้าย จะได้เป็นแบบนี้

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

ส่วนคำว่า Read More! สามารถแก้ได้ตามใจชอบ จะเปลี่ยนเป็นคำว่า "อ่านต่อสิจ๊ะ" ก็ได้แล้วแต่เรา

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

วิธีใส่ Read more ง่ายๆ

หากโพสแต่ละโพสในบล็อกของคุณ มีจำนวนเนื้อหามากมายมหาศาล มันคงจะไม่เป็นการดีต่อหน้าตาบล็อกของคุณเป็นแน่แท้ หากยิ่งเพื่อนๆของคุณเปิดบล็อกขึ้นมาและพบกับเนื้อหาที่ยืดยาวเต็มไปหมด แถมคุณโพสรูปประกอบเนื้อหาไว้อย่างเยอะ ก็เสียงต่อการที่หน้าเว็ปอาจะโหลดช้าเป็นได้ แถมมันดูไม่น่าอ่านอีก

แต่ปัญหานี้จะหมดไปหากคุณใส่ "Read more" หรือ "อ่านต่อ"   เพราะเมื่อผู้อ่านสนใจที่จะอ่านเนื้อหาส่วนที่เหลือ ผู้อ่านก็จะกดเข้าไปอ่านเอง อีกทั้งวิธีนี้ยังช่วยให้บล็อกของคุณดูดีมีสกุลขึ้นอีกเป็นกอง