[Blogger - Tutorial] ทำ Read More ให้ Blogspot :: อับเดทวิธีที่ 2

[saQw]

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

[saQw]

  ทำไม่ได้คับเหมือนเดิมเลย ผมเชคทุกตัว แล้ว ทั้ง ตำแหน่ง โคต ไม่ผิดแน่ แต่ทำไม ie ของผมเปิดไม่ได้อ่ะคับ          

[ball6847]

ทำไม่ได้คับเหมือนเดิมเลย ผมเชคทุกตัว แล้ว ทั้ง ตำแหน่ง โคต ไม่ผิดแน่ แต่ทำไม ie ของผมเปิดไม่ได้อ่ะคับ          

อาการมันเป็นยังงัยครับ
- มันไม่ยอมซ่อนโพสท์หรอ
- หรือว่า ซ่อนโพสท์ แต่ไม่ลิ้งค์ readmore
- หรือว่า ไม่มีทั้งสองอันเลย
- หรือว่ามี readmore แต่มาทั้งบทความเต็มเลย

แจงหน่อยคับ ว่าแต่ template นี่ของบล็อกเกอร์ใช่มั้ยคับ หรือว่าไปเอามาจากเว็บอื่น ถ้าของบล็อกเกอร์เลย เป็น template ชื่ออะไรอ่ะคับ

[saQw]

ทำไม่ได้คับเหมือนเดิมเลย ผมเชคทุกตัว แล้ว ทั้ง ตำแหน่ง โคต ไม่ผิดแน่ แต่ทำไม ie ของผมเปิดไม่ได้อ่ะคับ          

อาการมันเป็นยังงัยครับ
- มันไม่ยอมซ่อนโพสท์หรอ
- หรือว่า ซ่อนโพสท์ แต่ไม่ลิ้งค์ readmore
- หรือว่า ไม่มีทั้งสองอันเลย
- หรือว่ามี readmore แต่มาทั้งบทความเต็มเลย

แจงหน่อยคับ ว่าแต่ template นี่ของบล็อกเกอร์ใช่มั้ยคับ หรือว่าไปเอามาจากเว็บอื่น ถ้าของบล็อกเกอร์เลย เป็น template ชื่ออะไรอ่ะคับ

สาเหตุที่แท้จริงก็คือ การโพสคครับ
แก้ได้แล้วครับ ขอขอบคุณ จขกท. ด้วยนะครับ   

[004275]

แล้วมีวิธีสำหรับ blogger ตัวเก่าไหมคับ

[004275]

เพิ่มเติมโดย ball6847 - 31 ตุลาคม 2007
อีกวิธีที่นี่ครับ สั้นกว่า ง่ายกว่า แถมดีกว่า
http://www.thaiseoboard.com/index.php/topic,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/

Expandable posts with Peekaboo view
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'>
**หากหาไม่เจอแสดงว่าท่านลืมติ้กที่  Expand Widget Templates
เมือหาเจอแล้วให้ เพิ่ม 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;'/>

เสร็จขั้นตอนการแก้ Template แล้วครับ ต่อไปก็ เซฟได้เลยครับ

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 ชมครึ่ง 
หวังว่าคงจะมีประโยชน์นะครับ ใครทำได้ไม่ได้ยังงัยก็บอกกันด้วยล่ะครับ

ทำแล้ว แต่ทำไมผมใส่

บทความที่แสดง

<span id="fullpost">

บทความที่เหลือ

</span>

แล้ว read more มันอยู่ล่างสุด กลายเป็นไม่มีย่อเลยอะคับ

[ball6847]

ทำแล้ว แต่ทำไมผมใส่

บทความที่แสดง

<span id="fullpost">

บทความที่เหลือ

</span>

แล้ว read more มันอยู่ล่างสุด กลายเป็นไม่มีย่อเลยอะคับ

ถ้าเป็นบล็อกที่มี entry อยู่ก่อนแล้ว แล้วจะให้แสดงแบบย่อทั้งหมด เราต้องตามแก้บทความเก่าให้หมดนะครับ เพราะบทความเก่าไม่มี

บทความที่แสดง

<span id="fullpost">

บทความที่เหลือ

</span>

เราต้องตามไปแก้หมด

แต่ถ้าหมายถึงทำแล้ว โพสทใหม่์แล้ว แต่มันไม่ได้แสดงว่าน่าจะผิดตรงไหนสักทีละคับ

[bee]

    โอ้โห๋ ! ช่างเป็นอาจารย์ที่ขยันสนทนาโต้ตอบกับนักศึกษาจริงๆ นะคร๊า ขนาด ดึก ตีสอง แล้ว อาจารย์ ก็ยังจะตอบคำถามอีก ไม่หลับไม่นอน กันเนอะ    สมควรยกย่องให้เป็นอาจารย์ดีเด่น ดีไหมเนี่ย ( ไม่รู้ว่า ขยัน จริง หรือเปล่า ) สมควรไหม คิดเอาเอง นะ โตโต กันแล้ว !  :-\

[tongza]

ขอบคุณครับ

[เด็กหลังห้อง]

ขอบคุงครับ อย่างนี้ต้องไปลองล่ะ อิอิ

[thip]

ขอบคุณมากนะคร๊า  ที่แนะนำ สิ่งแต่ที่ดีดี

เรียนเชิญ เลี้ยงข้าว ที่ ครัว 151 ที่ตรงเลยจากเดอะมอลล์ท่าพระ มาประมาณ 300 เมตร ฝั่งธนบุรี ด้วยนะคร๊า 

ถ้าไปแล้ว ทานข้าวฟรีได้เลยค๊า  รู้จักกับเจ้าของร้าน แบบว่า คนกันเอง น้องสาวทำงานอยู่ที่นั่นค๊า  :

[inene]

  ความพยายามอยู่ที่ไหน ความสำเร็จอยู่ที่นั่น  ขอบคุณความรู้ดีๆที่นำมาเผยแพร่คะ 

[yanisa]

ลองทำ โดย copy code and paste ตามที่คุณ ball6847 แนะนำแล้วตาม step ทุกอย่าง  แต่ ข้อความไม่ถูกซ่อนค่ะ และไม่แสดง Readmore Link ด้วย  และมี font size error คือเล็กจิ๋วบ้าง ปกติบ้าง  ไม่ทราบว่าทำไม 

[yanisa]

ลองทำใหม่อีกครั้ง บทความก็ยังไม่ซ่อนค่ะ  แต่มี Readmore Link ที่ด้านล่างสุดเมื่อจบบทความเต็ม
ช่วยแนะนำด้วยค่ะ ว่าต้องแก้ไข อย่างไร   

อีกอย่างนะคะมี Readmore link ขึ้นทั้งบทความของเก่าและใหม่เลย  ถูกต้องหรือเปล่าค่ะนี้ แล้วต้องอย่างไรถึงจะซ่อนบทความให้สั้นลงได้  ช่วยด้วยค่ะ 

[ball6847]

เด่วผมมาช่วยดูให้นะคับ แต่ตอนนี้ผมยุ่งๆ อยู่อ่ะคับ โทดทีนะคับ

[korn_ml]

ขอบคุณครับ

[Blogger Jr.]

อ่าา ผมทำ readmore generator ไว้ให้นะคับ เพื่อจะได้ไม่ต้องมายุ่งยากมากมาย

แค่ Copy เทมเพลท (แบบเต็มนะคับ) แล้วมา Paste ลงใน textbox และก็กด submit แล้วเสร็จเลยครับ
ไม่ต้องมาหาโน่น ใส่นี่ให้ยุ่งยาก สคริปท์จะหาแล้วแก้ให้เอง
เจนแล้ว Copy ไปใส่ใน editor ของ Blogger อีกทีเป็นอันเรียบร้อยครับ
เพิ่มเติมครับ - แถม <title> ที่เหมาะกับ SEO ให้ด้วยครับ

http://readmoregenerator.blogspot.com/

หน้าตาลาวไปหน่อย แต่ไม่ค่อยเน้นอะไรคับ เอาไว้ใช้กันเอง หุหุ ลองดูน้าคับ ใช้แล้วเป็นงัยบอกด้วยน้าา อิอิ 

ผมทำตามวิธีนี้แล้วครับ ตอนเซฟแต่มันขึ้น

We were unable to save your template

Please correct the error below, and submit your template again.

          Your template is invalid because the tag 'b:section' appears inside of the tag 'head'.

ช่วยทีครับ อ่า เช้าแล้วหรือนี่

[ball6847]

ตอนนี้ Blogger มันไม่ให้ใช้แบบนี้แล้วครับ ทำใจคับ

[Blogger Jr.]

อ่าได้แล้ว Read More (ขอบคุณคุณ hahokhok ที่ช่วยเหลือ)  แต่ว่าไปอยู่ท้ายบทความ เหมือนคุณ yanisa เลยครับ



โค๊ด edit Htmp :

<span class="art_title">Fleece Baby Blanket - The Cutest Gift For A New Born.
</span>Stores abound with assorted babyish ability and tokens.
<p>Fleece babyish absolute is fabricated of bendable absolute fibers to accumulate the babyish warm.
<span id="fullpost">
</span><p> There are altered kinds of blankets to accept from and for altered ages and sizes.</p>

ต้องแก้ตรงไหนปะครับ ช่วยมือใหม่ด้วยครับ

[sakda]

ขอบคุณมากเลยคับ