Thursday, March 19, 2009

มาดูวิธีการทำ Read more ใน Blogger หรือ Blogspot ว่าทำอย่างไรกัน

สวัสดีครับ

มีหลายๆคนที่ใช้งาน Blogger.com หรือ ซับโดเมน Blogspot.com อยู่ คงเคยคิดอยากมี Read more... เหมือนอย่างใน Wordpress กันบ้าง เพื่อลดอัตราการดาวน์โหลดหน้าเว็บของเราให้เร็วขึ้น อีกทั้งเป็นเสน่ห์ในการดึงดูดให้ผู้อ่านได้คลิก เพื่อติดตามอ่านบทความนั้นๆ อย่างใจจดใจจ่อ สำหรับผู้ใช้งานบล็อกมือเซียนต่างๆ คงทำกันเป็นแล้ว แต่สำหรับมือใหม่นั้น คุณกำลังจะเป็นมือเซียนแล้ว...

การทำ Read more ของ blogger blogspot นั้นไม่ยากนักนะครับ หากคุณทำตามขั้นตอนที่ผมจะแนะนำต่อไปจากนี้ การที่เราจะมี read more ได้นั้น เราจำเป็นต้องเข้าไปแก้ code ตรงส่วนของ HTML ฉะนั้น ผมจึงอยากให้ระมัดระวังกันสักนิด หากผิดพลาดไป theme หรือ Template ของคุณ อาจเจ๊งได้ หุหุ ผมพูดจริงๆนะ แต่...ผมมีวิธีป้องกันมาบอกด้วย ไม่ต้องกังวลไป... มาเริ่มกันเลยดีกว่า...

หลังจากที่เรา Log in เข้าบัญชี เพื่อใช้งานบล็อกของเราแล้วนั้น ให้คลิกที่ Layout (รูปแบบ) และ คลิกอีกครั้งที่ Edit HTML (แก้ไข HTML) ซึ่งจะแสดงอยู่ที่บริเวณแถบด้านบน ลองหาดูนะครับ

เมื่อเข้ามาสู่หน้าที่เราสามารถทำการแก้ไข Code HTML แล้ว ผมอยากให้เพื่อนๆ Save รูปแบบเทมเพลตที่ใช้อยู่ก่อนหน้านี้ เพื่อเป็นการป้องกันธีมหรือเทมเพลตพังอย่างที่ผมพูดไว้ก่อนหน้านี้ โดยให้เพื่อนๆ คลิกที่ Download Full Template ดังหมายเลข 1 ที่แสดงในรูป เมื่อโหลดเสร็จแล้วให้เพื่อนๆ คลิกที่ Expand Widget Templates เพื่อทำการขยายเทมเพลตออกดังหมายเลข 2 ที่แสดงในรูปนะครับ


หลังจากนั้น ให้กด Ctrl+F พร้อมกัน ระบบจะเรียกกล่องเล็กๆ ขึ้นมา ให้เราใส่ post-header-line-1 ลงไปในกล่องเล็กๆ นั้น กด Next เมื่อเจอข้อความดังกล่าวแล้วให้เพื่อนๆใส่ Code ด้านล่างนี้

*b:if cond='data:blog.pageType == "item"'>
*style>.fullpost{display:inline;}*/style>
*b:else/>
*style>.fullpost{display:none;}*/style>
*/b:if>

โดยนำ Code ใส่ไว้ใต้ *div class='post-header-line-1'/> ทำให้เหมือนในรูปด้านล่างนะครับ


เมื่อนำ Code ดังกล่าว ใส่เสร็จเป็นที่เรียบร้อยแล้ว ให้ทำการกด Ctrl+F อีกครั้ง เพื่อใส่ข้อความนี้ data:post.body/ ลงไปในกล่อง กด Next หลังจากนั้นนำ Code ด้านล่างนี้

*b:if cond='data:blog.pageType != "item"'>
*a expr:href='data:post.url'>Click here to Read more...*/a>
*/b:if>

ไปใส่ไว้ใต้ *p>*data:post.body/>*/p> ดูภาพประกอบ

เมื่อทุกอย่างเสร็จสิ้นเรียบร้อยให้ลองกด Preview ดูนะครับ หากว่าหน้าบล็อกเราแสดงเป็นอันว่า Code ที่ใส่ไม่มีปัญหาใดๆ ให้กลับมาคลิก Save Template ได้เลย

ขั้นตอนสุดท้ายแล้วนะครับ ให้เรานำ Code ด้านล่างนี้

*span class="fullpost">


*/span>

ไปใส่ในส่วน Formatting (การจัดรูปแบบ) โดยคลิกที่ Setting (การตั้งค่า) แล้วไปคลิกอีกครั้งที่ Formatting (การจัดรูปแบบ) นะครับ เลื่อนแถบข้างลงมาด้านล่างสุด จะสังเกตุเห็น Post Template (แม่แบบบทความ) และมีกล่องอยู่ด้านข้างให้เราใส่ Code ด้านบนที่ผมให้ไว้ลงในกล่องดังกล่าว ดูภาพประกอบ

คลิก Save (บันทึก) เป็นอันเสร็จสิ้นการติดตั้ง Read more... แล้วครับ ง่ายๆใช่ไหมครับ???

Read more จะแสดงขึ้นเมื่อเราใส่ข้อความไว้ระหว่าง *span class="fullpost"> กับ */span>

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

หมายเหตุ: Code ต่างๆที่เห็นนั้น ให้แก้ * เป็น เครื่องหมาย < ทุกอันนะครับ เนื่องด้วยเทคนิคบางประการ ผมไม่สามารถใส่ Code ที่ถูกต้องให้ได้ อย่างไรแล้ว ก่อนนำไปใช้ อย่าลืมแก้ด้วยนะครับ

เพื่อนๆ สามารถอ่านข้อมูลเพิ่มเติมที่ http://help.blogger.com/read-more-blogger ได้นะครับ

บล็อกโพสโดย: พชร ตั้งสกุลนาราธร [บอย] (อ่านว่า พะ-ชะ-ระ)

10 comments:

  1. ขอบคุณมากครับ แล้วผมต้อง Copy โค้ดไปก่อนใช่ไหม

    ReplyDelete
  2. สวัสดีครับ คุณนิรนาม

    ขอบคุณครับ ที่แวะมาอ่านกัน

    ที่ถามมานั้น - ถูกต้องแล้วครับ Copy ไปใส่ไว้ใน Note pad ก่อนนะครับ แล้วหลังจากนั้น แก้ star หรือ ดอกจัน เป็นเครื่องหมาย < (น้อยกว่า) เท่านี้เองครับ Code ก็จะสมบูรณ์ พร้อมนำไปใช้ได้แล้วล่ะครับ

    หวังว่าบทความของผมคงจะเป็นประโยชน์กับเพื่อนๆ บ้างนะครับ

    บอย

    ReplyDelete
  3. ขอบคุณสำหรับความรู้ค่ะ จะพยายามศึกษาเรื่องการทำ Blog เิพิ่มเติม

    ReplyDelete
  4. ตอบ - คุณ krich

    สวัสดีครับ พี่สบายดีนะครับ เริ่มทำ PPC ได้กำไรเท่าไหร่แล้วครับ ;-) สู้ๆครับ

    ReplyDelete
  5. สวสดีค่ะ

    ตอนนี้ไม่ค่อยดีเท่าไรค่ะ เลยถอยมาตั้งหลักใหม่ สงสัยว่าต้องมาศึกษาเรื่อง
    ฺฺฺBlog กับ SEO มากๆ หน่อยค่ะ ไม่รู้ว่าเราจะไปแนวไหนได้บ้าง ยังไงก็จะเข้ามาอ่านบทความบ่อยๆ ค่ะ ขอบคุณสำหรับบทความดีๆ นะค่ะ

    ReplyDelete
  6. ขอบคุณมากค่ะ ที่แนะนำและส่งเทมเพลตมาให้ได้ลองใช้ ใช้งานง่ายมากเลยค่ะ คุณบอยน่าจะแจกให้ดาวน์โหลดเทมเพลตนี้นะ หรือแบบอื่นก็ได้ค่ะ ที่คุณบอยแก้โค้ดให้มี read more แล้ว ขอเยอะไปหรือเปล่า :)

    รักษาสุขภาพด้วยนะค่ะ เห็นบอกว่าเรียนโครงการต้นกล้าอยู่ด้วย

    ช่วยติชมด้วยนะค่ะ

    Popular in Kids and Baby Products

    ReplyDelete
  7. ลองทำแล้วแต่ read more มันไปอยู่ด้านล่างข้อความอ่ะมันไม่เห็นจาตัดข้อความให้เหลือเฉพาะย่อหน้าแรกเหมือนคนอื่นเค้าเลยค่ะ ไม่รู้ว่าทำอาไรผิดรึเปล่า ขอคำแนะนำด้วยค่า

    ReplyDelete
  8. natty ครับ เวลาเราโพสๆ ไปแล้ว และต้องการหยุด เพื่อให้แสดง read more
    ให้เรานำข้อความ หลังจากนั้นมาใส่ระหว่าง

    span class="fullpost"

    ****ใส่ตรงนี้****

    /span

    แบบที่แสดงนะครับ ยังไงลองทำใหม่ดูนะครับ

    ReplyDelete
  9. Thanks so much.
    This works great!!!
    u r the best.
    Enjoy ur goldcollect.

    ReplyDelete
  10. ขอบคุณสำหรับบทความค่ะ ขอแนะนำสักติ๊ดดนะค่ะ อย่าเคืองกันนะ ตรงส่วนที่ให้แก้ทำเป็นสีสันสักหน่อยดีค่ะ จะได้เห็นชัดขึ้น

    ReplyDelete