นี่เป็นวิธีใส่ link read more สำหรับบทความยาว ๆ แล้วต้องการจะตัดข้อความสั้น ๆ เพื่อไม่ให้หน้าแรกยาวเกินไปสำหรับคนที่ใช้ blogger แล้วไม่รู้ว่าจะทำยังไง หรือไปอ่าน help center มันแล้วทำตามไม่ได้เช่นผม
จะมีคำอธิบายสำหรับผู้ที่พอรู้เรื่อง CSS และ HTML ระดับหนึ่ง ไม่แนะนำให้มือใหม่ทำตามอำเภอใจ อาจเจ๊งได้
ก่อนอื่นเลยให้ไปที่หน้าปรับแต่ง template แล้ว
อย่าลืม เลือก edit html ติ๊กที่ expand widget template ด้วยด้านมุมขวาบน ของ Text Box copy ทั้งหมดใส่ text file ไว้เพื่อกันเหนียว (ทำ backup)
1. ไปที่ Template => Edit Template
2. Backup Template อันเก่าไว้ด้วยครับ เผื่อเจ้งขึ้นมาจะได้ทำให้กลับเป็นเหมือนเดิมได้
3. ให้ตื้กที่ Expand Widget Templates เพือเปิด Code แบบเต็ม
4. ใส่ code สีแดงข้างล่างนี่ใส่ไว้ก่อน </head> หลัง </b:skin> ครับ ดังรูป
Code ที่จะนำไปใส่
5. ค้นหาบรรทัดต่อไปนี้ครับ <div style='clear: both;'/> <!-- clear for photos floats -->
]]></b:skin>
<b:if cond='data:blog.pageType != "item"'>
<style>#fullpost{ display:none;}</style>
</b:if>
</head>
Note - <div class='post-body entry-content'> แต่ละ Template อาจจะไม่เหมือนกันนะครับ
<div class='post-body entry-content'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
แล้วใส่เพิ่มลงไปตามนี้ครับ (สังเกตุสีแดงเอาครับ)ดังรูป
Code ที่จะนำไปใส่
<div class='post-body entry-content'>
<p><data:post.body/></p>
<b:if cond='data:blog.pageType != "item"'>
<p><a expr:href='data:post.url'>Read More</a></p>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
เสร็จแล้ว เซฟเทมเพลทได้เลยครับ
ก่อนจะเซฟ ตรวจทานนิดนึงนะคับ เพราะผิดแค่ตัวเดียวนี่คือใช้ไม่ได้เลย อาจถึงขึ้นบล็อกไม่โหลดเลยนะคับ ผมเจอมาแล้ว เพราะพิมพ์ผิดแค่ตัวเดียวเอง (แต่บังเอิญเป็นตัวสำคัญ)
6. ไปที่ Setting => Formatting เลื่อนลงมาล่างสุดจะเห็น Post Template ให้ Copy ข้างล่างนี่ใส่กรอกเข้าไปแล้วเซฟครับ
Code ที่จะนำไปใส่
ส่วนที่จะให้แสดง
<span id="fullpost">
ส่วนที่เหลือ
</span>
เวลาใช้งานตอนเขียนข้อความ ควรอยู่ในโหมด Edit HTML ตามรูป หรือไม่งั้นก็นำเอาโค้ตไปใส่ในช่วงที่ต้องการจะให้ซ่อน
ตัวอย่างการใช้งานจริง
รวมทิป การเขียนบล๊อก Blogger
Tips Blogger & Widget Blogger : http://aboutblogtips.blogspot.com/
รวมการศึกษาหารายได้ผ่านอินเตอร์เน็ต
Proof eBusiness : http://proof-ebusiness.blogspot.com/
รวมการใช้งาน RSS Feeds เพื่อรับข่าวสารสู่เว็บ
How use RSS Feeds : http://rss-informationss.blogspot.com/
2 ความคิดเห็น:
เดี๋ยวขอลองดูหน่อยนะครับ
ถ้ามีปัญหาจะมาถาม
มีประโยชน์ดีอันนี้กำลังหาวิธีอยู่เลย
ใช้ได้ครับ ไม่มีปัญหาอะไร
Post a Comment