วิธีทำ Automatic Read more ให้บทความบน Blogger

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

สอนใช้งาน blogger

ขั้นที่ 1 ไปที่ แผงควบคุม >> รูปแบบ >> แก้ไข HTML >> ขยายแม่แบบเครื่องมือ

blogger template


ในขั้นที่ 1 นี้เราจะ back up แม่แบบ ไว้ก่อนก็ได้นะครับ (กันพลาด)

ขั้นที่ 2 มองหาโค้ด </head> (ถ้าหาไม่เจอใช้ Ctrl+F ช่วยค้นหา) แล้วแทนที่ด้วยโค้ดด้านล่างนี้

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src='http://siiam.bravehost.com/excerpt.js' type='text/javascript'/>
</head>


การปรับแต่ง :
summary_noimg = 230; คือจำนวนอักษรที่จะแสดงเป็นตัวอย่าง เมื่อบทความนั้นไม่มีรูปประกอบเลย
summary_img = 140; คือจำนวนอักษรที่จะแสดงเป็นตัวอย่าง เมื่อบทความนั้นมีรูปประกอบ
img_thumb_height = 100; และ img_thumb_width = 100; คือความกว้างและความยาวของรูปตัวอย่าง

ขั้นที่ 3 ค้นหาโค้ด <data:post.body/> (ถ้าหาไม่เจอใช้ Ctrl+F ช่วยค้นหา) แล้วแทนที่ด้วยโค้ดด้านล่างนี้


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div style='clear: both;'/>
<span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Read more >></b></a></span>
</b:if>



เป็นอันจบขั้นตอนครับ คราวนี้บล็อกของเราก็ดูสบายตาขึ้นไม่ต้องลากยาวไปอ่านด้านล่างอีกแล้วครับ

หมายเหตุ : คำว่า Read more >> สามารถแทนด้วยภาพหรือ เปลี่ยนเป็นข้อความอื่น ๆ ก็ได้ตามใจคุณ

เช่น บล็อกของผมใช้ภาพแทน ถ้าอยากเอาไปใช้บ้างก็ใช้โค้ดด้านล่างนี้ครับ

สอนทำ blogger

<img title="readmore" src="http://upic.me/i/co/indexpostbutton2.gif" />

ตอนนี้มีความคิดเห็น : 53 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. ขอบคุณค่ะ...
    ช่วยได้เยอะเลย...

  1. ขอยืมไปสอนนักศึกษาหน่อยนะคะ..ขอบคุณมากๆ ค่ะ..

  1. ขอบคุณคร๊า . . .

  1. ขอบคุณค่ะ ^.^ นั่งอ่านไปด้วย ลองทำไปด้วย

  1. ลองทำดูแล้ว

    ขอบคุณค่ะ

  1. หาโค๊ดนี้ไม่เจอค่ะ

  1. @ natty70 : ดูจากอีกบทความหนึ่งที่คอมเมนต์เอาไว้ ตกลงว่าทำได้แล้วนะครับ

  1. สวัสดีค่ะ ขอบคุณมาก ๆ กับบทความดี ๆ ทุกบทความมีประโยชน์และมีคุณค่ามาก ๆ เลยค่ะ

    ขอสอบถามเกี่ยวกับเรื่อง Read More นะคะ หากเป็นไปในทางกลับกัน คือ ตอนนี้เลือกใช้เทมเพลตที่เขามีการย่อบทความในหน้าแรก ให้อยู่แล้วค่ะ แต่ต้องการทำ different post, page ให้ไม่มีการย่อเมื่อเราวางไว้ในหน้าแรกน่ะค่ะ (วางเป็นบทความที่อยู่หน้าแรกเสมอ) ทำอย่างไรดีคะ

    ขอบคุณล่วงหน้าสำหรับคำตอบค่ะ

  1. @ B.Master : อย่างนี้ต้องขอดู URL ของบล็อก หรือโค้ดของบล็อกครับ ยังตอบเลยไม่ได้ครับ

  1. ขอใช้ url ของ แม่แบบ Template ที่เลือกใช้นะคะ (ไม่ใช่บลอกของ B.Master หรอกค่ะ)

    คือ แบบนี้น่ะค่ะ http://massiveattack-btemplates.blogspot.com/

    ปัญหาคือ ตอนนี้ บลอกที่ถูก post ในหน้าแรก จะถูกย่อทั้งหมด (แม้แต่ page เคยลองทำครั้งหนึ่งนานมากแล้วน่ะค่ะ) อยากจะทำ different post ไว้หน้าแรก แสดงแบบเต็ม ๆ จะได้เหมือนเวบไซต์ทั่ว ๆ ไปน่ะค่ะ

    รบกวนด้วยนะคะ

  1. @ B.Master : ถ้าไม่ชอบ readmore จริง ๆ แนะนำให้ลบออกแล้วตั้งค่าแสดงบทความในหน้าแรกแค่บทความเดียวครับ

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

  1. @ Lungkings : ผมพัฒนาสริปต์ต่ออีกนิดเป็นบทความนี้แล้วครับ
    http://www.hackublog.com/2010/04/automatic-readmore-for-blogger-newhack.html

    อ่านแล้วแก้ตามเลยครับ

  1. ไม่ค่อยมั่นใจ ทำไมผมโพสลงแล้วข้อความชอบหายไป

    อยากสอบถามน่ะครับ คือผมได้ลองทำBlogของผมให้มีการย่อบทความตาม http://www.hackublog.com/2009/09/read-more.html ครับ แล้วพอจะทำแถบเมนูข้างบนตามที่นี่น่ะครับ แต่พอทำได้เมนูแล้วกระทู้ที่มาจากเมนูนี้การโดนย่อด้วย แถมยังเข้าไป่านที่ข้างในReadmoreไม่ได้อีกด้วย ที่ http://patinace.blogspot.com/p/test-link.html ตรงTest Linkนะครับ แต่เห็นของท่านกลับยังขึ้นหน้างเต็มไม่มีการย่ออยากถามว่าทำยังไงน่ะครับ หรือให้สามารถเข้าไปอ่านข้างในReadmoreก็ได้ ขอบคุณครับ

  1. ได้เข้าไปอ่านแล้วครับ ขอบคุณมากๆ ครับ

  1. ช่วยบอกวิธี ทำส่วน Read more นี้
    ให้เหมือนกับ Gadget Recent Posts หน่อยนะคับ

    คือว่าผมอยากให้มันดูเล็กๆ กระทัดรัดน่ะคับ เพราะทำแบบนี้มันยังดูใหญ่ไปน่ะคับ

  1. @ Admin : ในบทความตอนที่ 2 อธิบายวิธีไว้ชัดเจนแล้วครับ

  1. ไม่อยากให้มีขอบสีขาว ต้องทำยังไงบ้างค่ะ รบกวนด้วยค่ะ

  1. ขอบสีขาวเกิดจากแม่แบบที่คุณ iTrendy360 ใช้ครับ ลองแก้โดยการใช้โค้ด

    img{boder:none !important}

  1. ขอบคุณมากค่ะ อาจารย์

  1. ทำไมมันบอกแบบนี้ค่ะ เราไม่สามารถบันทึกแม่แบบของคุณ
    โปรดแก้ไขข้อผิดพลาดด้านล่าง และส่งแม่แบบของคุณอีกครั้ง
    ไม่สามารถแยกวิเคราะห์แม่แบบของคุณเนื่องจากมีรูปแบบไม่ถูกต้อง โปรดตรวจสอบว่าองค์ประกอบ XML ทั้งหมดมีการปิดอย่างถูกต้อง
    ข้อความแสดงข้อผิดพลาดของ XML: The element type "head" must be terminated by the matching end-tag "".

  1. @ Comedian Family ; ข้อผิดพลาดที่คุณเจอคือ " " ไม่ถูกครับ

    ทำตามบทความนี้ดีกว่าครับ http://www.hackublog.com/2010/04/automatic-readmore-for-blogger-newhack.html

    เป็นบทความที่ปรับปรุงใหม่ แล้วอย่าลืมแก้สคริปต์ด้วยนะครับ

  1. อยากทำเหมือนแบบนี้ได้มั้ยคับ http://www.hottrendvideo.com/ มันสามารถทำในบล็อกได้มั้ยคับ

  1. @ up2funclub : มันก็พอทำได้ครับ ให้ลองเลือกแม่แบบที่คล้ายคลึงกับเว็บที่ว่านี้ดีกว่าครับ ลองดูในบทความเปลี่ยนแม่แบบ blogger ครับ แล้วเข้าไปลองค้นหาดูจากแหล่งดาวน์โหลดแม่แบบที่ผม list ไว้ให้ในบทความนั้นครับ มีรูปแบบคล้าย ๆ เว็บที่ว่านี้เหมือนกัน

  1. ไม่ต้องการทำ Auto (ตัดข้อความอัตโนมัต) แต่ต้องการเปลี่ยนข้อความจาก "Read more" หรือ "อ่านเพิ่มเติม" เป็นรูปภาพต้องทำอย่างไรครับ

  1. @ Mr.JJ : อ่านบทความตามลิงค์ด้านล่างในตอนท้ายครับ

    AutoMatic ReadMore for Blogger (NewHack: Fixed Static Page)

  1. ผมโหลดเทมเพลทของbloggerมาใช้ แต่มันมี READ MORE แถมมาให้ด้วย ผมจะแก้โค้ดไม่ให้มันมี READ MORE ได้ยังไงเพราะผมทำบล๊อกไว้ขายสินค้า ของคุณครับ

  1. @Tanang : บอกชื่อ template มานิดครับ เดี๋ยวผมดูให้

  1. สุดยอดครับบบบ

  1. อาจารย์มันทำไม่ได้อ่าค่ะ ทำแล้วมันก็ไม่ย่อลงเลย แค่มีคำว่า Read more ต่อท้ายเอง
    http://km-model-intrend.blogspot.com

    ช่วยดูหน่อยนะคะ

  1. @Oriental Princess:
    แทนที่โค้ด

    http://hackublog.googlecode.com/files/excerpt.js

    ในขั้นที่ 2

    ด้วย
    http://siiam.bravehost.com/excerpt.js

  1. อาจารย์ได้แล้วค่ะ ขอบคุณอาจารย์มากๆเลยค่ะ

  1. บทความที่ใส่รูปทำไมรูปมันลีบแบนไม่ปกติค่ะ ปรับขนาดแล้วก็เหมือนเดิม ช่วยดูให้หน่อยค่ะที่

    http://www.levisjeansguide.com/

  1. @คุณ Papper: ให้ปรับค่าเหล่านี้ตามความต้องการครับ

    เช่นของเดิม
    summary_noimg = 230;
    summary_img = 140;
    img_thumb_height = 100;
    img_thumb_width = 100; .

    ของใหม่อาจจะปรับเป็น
    summary_noimg = 1000;
    summary_img = 800;
    img_thumb_height = 250;
    img_thumb_width = 250; .

  1. น่าจะมีปัญหาที่ค่าตัวนี้นะค่ะ ความกว้างของรูปนะค่ะ ไม่ยอมกว้างตามเลย
    img_thumb_width = 250;

    ส่วนอื่นก็เปลี่ยนไปตามค่าที่เราปรับปกติดี

  1. ผมนำโค้ดไปใช้ได้ดีทีเดียวคับ แต่สงสัยอยู่อย่า่งนึงคือเวลาเอารูปมาแปะแล้วมันผิดขนาดจากรูปต้นแบบอ่ะครับ เพราะว่ามีการกำหนด img_thumb_height , img_thumb_width แล้วผมอยากทราบว่าจะทำยังไงให้รูปที่นำมาแปะยังเหมือนรูปต้นแบบอ่ะคับ ผมลองมั่วๆเอา img_thumb_height = auto; img_thumb_width = auto; แล้วมันได้รูปเท่าต้นแบบคับ แต่กลายเป็นว่า read more มันไม่ทำงานอ่ะคับ พอโพสข้อความไป มันจะแสดงครบทั้งบทความแทนคับ ขอความช่วยเหลือด้วยคับ ขอบคุณคับ

  1. ทำแล้ว มันไม่ยอมเปลี่ยนครับ

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

  1. Read Moreขึ้นเหมือนกัน แต่บทความมันไม่ย่ออ่ะค่ะ

  1. Read Moreขึ้นเหมือนกัน แต่บทความและรูปมันไม่ย่อครับ

  1. รูปเป็นเท่าเดิมครับ ไม่ลดลงตามที่ผมตั้งค่าไว้ครับ

  1. อยากให้รูปภาพกับลิงค์ชื่อมันอยู่ที่ตรงกลางทำไงครับ

  1. Read Moreขึ้นเหมือนกัน แต่บทความและรูปมันไม่ย่อครับ
    ต้องทำยังไงครับ
    ขอบคุณครับ

  1. script มีปัญหาอะไรหรือเปล่าคะ
    เคยทำตามบทความนี้แล้วทำ read more ได้
    พอมาวันนี้ดูที่ blog แล้วกลับมาแสดงเนื้อหาทั้งหมดค่ะ

    ขอบคุณมากค่ะ

  1. คือผมหาCode นี้ไม่เจีอ๋ะ

  1. ผมทำได้แล้วแต่ ขนาดภาพโชว์ตอนที่โพสไม่ขึ้นให้มันไม่ย่อให้ เลยงง ปัญหาคือ หรือ ผมพลาด แต่มานขขึ้นให้แล้ว readmore

  1. ผม อยากได้ที่เป็นแบบ แถบเลือกหนัง Grid ถ้าเป็นช่วยสอน

  1. ขอบคุณคับผม

  1. มันไม่ขึ้นค่ะ ไม่รู้ทำไม

  1. คือว่า หนูลองวางไปแล้วแต่มันบอกว่าแก้ไขบรรทัดนู่นทีบรรทัดนี้ทีหนูงงอ่ะค่ะ แบบนี้ต้องทำยังไงหรอค่ะ

  1. คือว่า หนูลองวางไปแล้วแต่มันบอกว่าแก้ไขบรรทัดนู่นทีบรรทัดนี้ทีหนูงงอ่ะค่ะ แบบนี้ต้องทำยังไงหรอค่ะ

  1. ความคิดเห็นนี้ถูกผู้เขียนลบ
  1. ผมโหลดเทมเพลตมาใช้ ต้องการกำหนดบทความบทความหนึ่ง ให้แสดงเป็นหน้าแรกเมื่อเปิดเว็บขึ้น แต่มีัปัญหาที่ว่าเทมเพลทที่โหลดมามัมมีREAD MORE ติดมาด้วย เลยอยากทราบว่าเราจะยกเลิกREAD MOREท่ี่ติดมากับเทมเพลตได้อย่างไรครับ

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel