วันนี้ผมขอเสนอการทำ Read more ให้ Blog ของคุณกันนะครับ ก่อนทำการแก้ Code ต่างๆอย่าลืม Backup ไว้นะครับ กันไว้ดีกว่าแก้ ว่าแล้วก็เริ่มทำกันเลยครับ !!!
1. login ไปที่ Blogger เข้าไปที่ >ไปที่แผงควบคุม > รูปแบบ > แก้ไข HTML > ขยายแม่แบบเครื่องมือ
2.กด crtl+f เพื่อค้นหา </head> เมื่อเจอให้วาง code สีแดงข้างล้างนี้ไว้บน </head>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src='http://blogergadgets.googlecode.com/files/excerpt.js' type='text/javascript'/>
code นี้สามารถปรับแต่งค่าให้เหมาะกับบล็อกและความต้องการครับ
summary_noimg = 400; คือจำนวนอักษรที่แสดง readmore ในกรณีที่บทความนั้นไม่มีรูปประกอบ
summary_img = 350; คือจำนวนอักษรที่แสดง readmore ในกรณีที่บทความนั้นมีรูปประกอบ
img_thumb_height = 120;คือความสูงรูปตัวอย่างที่แสดง
img_thumb_width = 120; ความกว้าง รูปตัวอย่างที่แสดง
3. ต่อไปกด crtl+f ค้นหา <data:post.body/> เมื่อหาเจอให้แทนที่ <data:post.body/> ด้วย code สีแดง ด้านล่างนี้
<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>
หมายเหตุ : <data:post.body/> อาจมีมากกว่า 1ที่ ดังนั้นมีกี่ที่ก็วางทับให้หมดนะครับ
4.กด "บันทึกแม่แบบ"
เสร็จแล้วครับ 4 ขั้นตอน เพียงเท่านี้ท่านก็จะได้ Readmore ครับ !!!
ตัว code ต่างๆนี้สามารถดัดแปลงได้หลายอย่างนะครับ ถ้ามีความรู้พืนฐานทางด้าน HTML มาจะช่วยให้อ่าน code เหล่านี้ได้ง่ายขึ้นครับ code พวกนี้ผมก็ Copy เขามาอีกรอบครับแล้วมาดัดแปลงส่วนที่จะใช้งานให้เข้ากับ บล็อก ของผมเอง code ผม copy มาจาก คุณ meesubandmeesuk
ไม่มีความคิดเห็น:
แสดงความคิดเห็น