|
วิธีทำลิงค์ Read More... ใน blogger
ก่อนอื่นของก่อนอื่นต้องมีความรู้ด้าน html บ้างนิดหน่อย ถ้าไม่มีก็ขอให้ทำอย่างระวัง เทมเพลตอาจจะพังได้
นี่เป็นวิธีใส่ 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> ครับ
รูปตัวอย่าง 
5. ค้นหาบรรทัดต่อไปนี้ครับ
อ้างถึง
<div class='post-body entry-content'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
ให้ดูบรรทัดสีน้ำเงินด้วย |
Note - <div class='post-body entry-content'> แต่ละ Template อาจจะไม่เหมือนกันนะครับ
แล้วใส่เพิ่มลงไปตามนี้ครับ (สังเกตุสีแดงเอาครับ)
รูปตัวอย่าง
อ้างถึง Copy 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 ข้างล่างนี่ใส่กรอกเข้าไปแล้วเซฟครับ
ส่วนที่จะให้แสดง
<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/
|
หน้าแรก
บทความ
เว็บบอร์ด
English language.
เว็บไซต์พันธ์มิตร
รวมรูปภาพ
Amazon eClass
Blogger
Hotmail
