วิธีทำ Automatic Read more ให้บทความบน Blogger (อีกแบบ)
ภายหลังจาก Blogger ได้ออก Gadget Pagelist (Gadget หน้าเว็บ) ซึ่งทำให้เราสามารถสร้างหน้าเว็บ(Static Page) ได้อย่างง่ายดายมากขึ้น
ปัญหาที่ตามมาคือ Automatic ReadMore ที่เคยใช้ได้ดี ก็เกิดมีปัญหากับ Static Page คือ เราไม่สามารถแสดงผลหน้าเว็บจาก Automatic ReadMore ได้ในบทความนี้ผมจึงขอนำเสนอ อีกแบบ ซึ่งสามารถแก้ปัญหาที่ได้กล่าวมาได้ และทำให้คุณสามารถใช้ Gadget Pagelist ร่วมกับ Automatic ReadMore Hack ได้อย่างไม่มีปัญหา
ขั้นตอนการติดตั้ง
Log in Blogger เข้าไปที่ >> ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML >> ขยายแม่แบบเครื่องมือ
 |
| แก้ไข HTML |
การติดตั้งยังคงเหมือนเดิมทุกประการแต่ผมขอแบ่งการติดตั้งเป็น 2 กรณีคือ
กรณีที่ 1 หากคุณยังไม่เคยติดตั้ง Automatic ReadMore ก่อนหน้านี้
กรณีที่ 2 หากคุณเคยติดตั้ง Automatic ReadMore ก่อนหน้านี้แล้ว
กรณีที่ 1 หากคุณยังไม่เคยติดตั้ง Automatic ReadMore ก่อนหน้านี้
1.1 ค้นหาโค้ด
{</head>}
และวางโค้ดต่อไปนี้ก่อนหน้าโค้ดดังกล่าว
{<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 500;
summary_img = 400;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src='http://siiam.bravehost.com/excerpt.js' type='text/javascript'/>}
การปรับแต่งโค้ด : คุณสามารถปรับค่าตัวเลขต่อไปนี้ได้ตามใจ
summary_noimg = 500; คือจำนวนอักษรที่แสดง readmore ในกรณีที่บทความนั้นไม่มีรูปประกอบเลย
summary_img = 400; คือจำนวนอักษรที่แสดง readmore ในกรณีที่บทความนั้นมีรูปประกอบ
img_thumb_height = 100; และ img_thumb_width = 100; คือความสูง และความกว้าง ของรูปตัวอย่างตามลำดับ
1.2 ต่อจากขั้นตอน 1.1 ให้ค้นหาโค้ด
{<data:post.body/>}
แล้วแทนที่ด้วยโค้ดต่อไปนี้ และบันทึกแม่แบบ ก็จบขั้นตอนการติดตั้ง
{<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</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>}
การปรับแต่งโค้ด :
► ข้อความ Read More … นั้นสามารถแทนด้วยข้อความอื่น ๆ ที่คุณต้องการก็ได้ เช่น อ่านเพิ่มเติม , อ่านต่อ , Read Full Story เป็นต้น
► นอกจากนี้คุณยังสามารถแทนข้อความ ด้วยรูปภาพ โดยใช้โค้ดของรูปภาพของคุณหรือเลือกจากโค้ดต่อไปนี้
{<img border="0" src="http://upic.me/i/co/indexpostbutton2.gif" title='read more' />}
{<img border="0" src="http://upic.me/i/dp/readmore3.png" title='read more' />}
กรณีที่ 2 หากคุณเคยติดตั้ง Automatic ReadMore อยู่ก่อนหน้านี้แล้วให้ค้นหาโค้ด
{<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</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>
การปรับแต่งโค้ด : คุณสามารถปรับค่าตัวเลขต่อไปนี้ได้ตามใจ
summary_noimg = 500; คือจำนวนอักษรที่แสดง readmore ในกรณีที่บทความนั้นไม่มีรูปประกอบเลย
summary_img = 400; คือจำนวนอักษรที่แสดง readmore ในกรณีที่บทความนั้นมีรูปประกอบ
img_thumb_height = 100; และ img_thumb_width = 100; คือความสูง และความกว้าง ของรูปตัวอย่างตามลำดับ
1.2 ต่อจากขั้นตอน 1.1 ให้ค้นหาโค้ด
{<data:post.body/>}
แล้วแทนที่ด้วยโค้ดต่อไปนี้ และบันทึกแม่แบบ ก็จบขั้นตอนการติดตั้ง
{<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</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>}
การปรับแต่งโค้ด :
► ข้อความ Read More … นั้นสามารถแทนด้วยข้อความอื่น ๆ ที่คุณต้องการก็ได้ เช่น อ่านเพิ่มเติม , อ่านต่อ , Read Full Story เป็นต้น
► นอกจากนี้คุณยังสามารถแทนข้อความ ด้วยรูปภาพ โดยใช้โค้ดของรูปภาพของคุณหรือเลือกจากโค้ดต่อไปนี้
{<img border="0" src="http://upic.me/i/co/indexpostbutton2.gif" title='read more' />}
{<img border="0" src="http://upic.me/i/dp/readmore3.png" title='read more' />}
กรณีที่ 2 หากคุณเคยติดตั้ง Automatic ReadMore อยู่ก่อนหน้านี้แล้วให้ค้นหาโค้ด
{<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</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>
}
หมายเหตุ
1. โค้ด Read More … อาจจะไม่ตรงกับข้อความหรือโค้ดในบล็อกของคุณ (ซึ่งก็ไม่มีผลใด ๆ ครับ)
เมื่อค้นเจอแล้วให้แทนที่ด้วยโค้ดต่อไปนี้
{<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</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>
หมายเหตุ
1. โค้ด Read More … อาจจะไม่ตรงกับข้อความหรือโค้ดในบล็อกของคุณ (ซึ่งก็ไม่มีผลใด ๆ ครับ)
เมื่อค้นเจอแล้วให้แทนที่ด้วยโค้ดต่อไปนี้
{<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</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>
</b:if>}
จากนั้นบันทึกแม่แบบก็จบขั้นตอนการติดตั้งในกรณีนี้
2. คุณควรดาวน์โหลดจาวาสคริปต์ http://siiam.bravehost.com/excerpt.js เก็บสำรองไว้ หรือหากเป็นไปได้ควร upload ขึ้นใช้งานด้วยตนเองเพื่อป้องกันการใช้งานจาวาสคริปต์จาก hackublog มีปัญหาครับ
จากนั้นบันทึกแม่แบบก็จบขั้นตอนการติดตั้งในกรณีนี้
2. คุณควรดาวน์โหลดจาวาสคริปต์ http://siiam.bravehost.com/excerpt.js เก็บสำรองไว้ หรือหากเป็นไปได้ควร upload ขึ้นใช้งานด้วยตนเองเพื่อป้องกันการใช้งานจาวาสคริปต์จาก hackublog มีปัญหาครับ
EmoticonEmoticon