เพิ่มเติมโดย ball6847 - 31 ตุลาคม 2007อีกวิธีที่นี่ครับ สั้นกว่า ง่ายกว่า แถมดีกว่า
http://www.thaiseoboard.com/in...17088.msg226873.html#msg226873 
============
เหนตั้งกระทู้ถามกันบ่อยแระ ก็เลยคิดว่าจะทำให้ดูแบบมีภาพเลยจะดีมั้ย เพราะหลายคนไม่เห็นภาพทำไม่เป้นไม่เข้าใจ
ก็เลยว่า "เอาวะ ทำสักอัน" ตามไปดูกัน
Credit - ให้เครดิตกับคนทำสักนิดคับ จาก Hackosphere บล็อกที่พรุนไปด้วย JavaScript , บล็อก ที่เรียกได้ว่า Blogger Hack ได้อย่างแท้จริง ตามไปดูต้นฉบับได้ที่นี่เลยครับ -
Expandable posts with Peekaboo view ***Note - อันนี้ไม่ใช่วิธีเดียวที่จะทำ Readmore ได้นะคับ จริงๆ มันมีมากกว่านี้ ถ้ามีเวลาจะทำให้เพิ่มคับ ตอนนี้เอาอันนี้ก่อนนะคับ เป็นสไตล์ Expand Link นะคับ ไม่ได้เป็นการลิ้งค์ไปหน้าของโพสท์โดยตรง แต่เป็นการซ่อน บทความเท่านั้นนะคับ ถ้าไม่เข้าใจก็ลองทำตามดูแล้วจะเข้าใจเองคับ
Demo คับ
http://test-read-more.blogspot.com/
1. ไปที่ Template => Edit Template (หวังว่าไปกันถูกนะคับ)
2. ก่อนที่จะแก้ไขอะไรกรุณา Backup Template ไว้ก่อนนะคับ ผมไม่รับประกันว่าท่านจะทำกันได้ทุกคนนะครับ ให้ดาวน์โหลด Template ของท่านมาเก็บไว้ที่เครื่องก่อนคับ โดยคลิ้กที่ลิ้งค์ Download Full Template ครับ
3. ให้ตื้กที่ Expand Widget Templates เพือเปิด Code แบบเต็มออกมาก่อนครับ
4. ให้ใส่ JavaScript ตามลิ้งค์ข้างล่างนี้ลงไปในส่วนของ head นะคับ ให้หา </head> แล้วก็ใส่ Code นี้ลงไปก่อน </head> เลยครับ
ตามไปเอาโค้ดได้ที่นี่ครับ -
http://rarunach.googlepages.com/hackosphere.js.html 5. ต่อไปให้หา บรรทัด ที่มีคำว่า
<b:includable id='post' var='post'>
เมือหาเจอแล้วให้ เพิ่ม code ตามสีแดงคับ
<b:includable id='post' var='post'>
<div class='post uncustomized-post-template'
expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
Note - ตรง <div class='post uncustomized-post-template'> ของแต่ละ Template อาจไม่เหมือนกันนะครับ เพราะฉนั้นอย่างง ให้เพิ่มเข้าไปตาม code ข้างบนเลยคับ เช่น ของบางคนอาจจะเป็นตามนี้ครับ
<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'
expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
หรือ
<b:includable id='post' var='post'>
<div class='post hentry'
expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
หวังว่าคงจะเอาไปทำกันถูกนะครับ
6. ต่อไป เลื่อนลงมานิดนึงครับ แล้วหาบรรทัดต่อไปนี้ครับ
<div class='post-body entry-content'>
<p><data:post.body/></p>
<div style='clear: both;'/>
Note - เหมือนเดิมครับ <div class='post-body entry-content'> แต่ละ Template อาจจะไม่เหมือนกันนะครับ เพราะฉนั้นถ้าเป็นอย่างอื่นคล้ายๆกันก็อย่างงนะครับ
ต่อไปให้เพิ่ม Code เข้าไปตามนี้ครับ สังเกตุสีแดงเอาครับ
<div class='post-body entry-content'>
<b:if cond='data:blog.pageType == "item"'> <p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Summary only...</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if> <div style='clear: both;'/>
7. ต่อไปเราจะต้องเข้าไปเพิ่มในส่วนของ Post Template เพื่อให้ blogger แทรก code สำหรับแยกบทความส่วนหน้าและส่วนเต็ม ให้เราในขณะที่เรากำลังโพสท์บทความใหม่ครับ ให้เข้าไปที่ Setting => Formatting แล้วเลื่อนลงมาล่างสุดจะเห็นช่องให้กรอก Post Template ให้ Copy ข้างล่างนี่ใส่กรอกเข้าไปแล้วเซฟเลยครับ
ส่วนที่จะให้แสดง
<span id="fullpost">
ส่วนที่เหลือ
</span>
Note - ไม่ต้องแก้ "ส่วนที่จะให้แสดง" และ "ส่วนที่เหลือ" นะครับ ให้ Copy ไปทั้งดุ้นเลย เพราะส่วนนี้จะมีไว้เพื่อเตือนความจำท่านว่า ท่านจะต้องวางบทตวามแต่ละส่วนไว้ตรงไหน พอเวลาที่ท่านจะโพสท์บทความ blogger จะแทรก Code นี้ให้เองอัตโนมัติ ม่านเพียงแค่แก้ ให้เป็นบทความของเท่านั้นเองครับ
เสร็จแล้วคร้าบบ
==========
รูปภาพประกอบ==========
ผลเป็นอย่างงี้
http://test-read-more.blogspot.com/
=======================
ยังเหลืออีกแบบนึงถ้ามีเวลาผมจะทำให้อีกนะคับ ตอนนี้โคตรเมื่อยเลย นั่งทำอยู่ 2 ชมครึ่ง
หวังว่าคงจะมีประโยชน์นะครับ ใครทำได้ไม่ได้ยังงัยก็บอกกันด้วยล่ะครับ
พัฒนาเว็บไซต์
