หั่นบทความให้สั้นลงด้วย readmore|blogspot แก้ไข

Written By Aucharaporn Theemcle on วันอาทิตย์ที่ 6 มกราคม พ.ศ. 2556 | 06:26

สังเกตดูบทความที่ตัวเองเขียน รู้สึกว่ามันยาวไป อยากให้หน้า home หรือหน้าแรกสั้นลงหน่อย  แล้วเพิ่มจำนวนบทความไปหลาย ๆ บทความ หน้าแรกเป็นเพียงแต่ไตเติ้ลเล็กน้อย หากผู้อ่านอยากอ่านเพิ่มค่อยคลิ๊กเข้าไปอ่านต่อ  เมื่อผู้อ่านคลิ๊กอ่านต่อหรือ readmore ทำให้เพิ่มจำนวน pageview ได้ด้วย   ค้นหาเรื่องนี้มานานพอสมควร  ไปเจอโดนใจเอาที่ trick ทำ readmore แบบอัตโนมัติ จากเวบ hackublog เพราะขี้เกียจมานั่งทำทีละบทความ  วันนี้เลยเอามาแบ่งปันเพื่อน ๆ ที่ชอบเขียนบล็อกเหมือนกันค่ะ  การทำ readmore หรืออ่านต่อไปด้วยวิธีการแก้ไข html
1. login ไปที่  Blogger เข้าไปที่  >ไปที่แผงควบคุม > รูปแบบ > แก้ไข HTML > ขยายแม่แบบเครื่องมือ

readmore_blogspot
2.คลิ๊ก crtl+f เพื่อค้นหา code </head> เมื่อเจอให้วาง code ให้แทนที่ code ด้านล่างนี้แทน<head>
<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://blogergadgets.googlecode.com/files/excerpt.js' type='text/javascript'/>
</head>

หากเป็นบล็อกชวนเพื่อนเขียนบล็อกก็จะมีหน้าตาแบบนี้ค่ะ 

ชวนเพื่อนเขียนบล็อก
 
code  นี้ปรับแต่งค่าได้ให้เหมาะกับบล็อกและความต้องการของผู้เขียนค่ะ
summary_noimg = 500; คือจำนวนอักษรที่แสดง readmore ในกรณีที่บทความนั้นไม่มีรูปประกอบ เลย
summary_img = 400;     คือจำนวนอักษรที่แสดง readmore ในกรณีที่บทความนั้นมีรูปประกอบ
img_thumb_height = 100;คือความสูงรูปตัวอย่างที่แสดง
img_thumb_width = 100; ความกว้าง รูปตัวอย่างที่แสดง
3. ต่อไปคลิ๊ก crtl+f ค้นหา code
<data:post.body/>
เมื่อหาเจอให้แทนที่ code ดังกล่าวด้วย code ด้านล่างนี้

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType  == &quot;static_page&quot;'>
<data:post.body/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<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>
</b:if>

4. เสร็จแล้วจ๊ะ คลิ๊กปุ่มบันทึกแม่แบบแล้วดูบล็อกได้เลย คำว่า Read More.. จะเปลี่ยนเป็นตัวอื่นได้นะคะ เช่น อ่านต่อ
ต่อจากนั้นใครอยากให้หน้าแรกแสดงหลายบทความหน่อยก็มาที่ การตั้งค่า >การจัดรูปแบบ
readmore_blog
เปลี่ยนการแสดงหน้าสูงสุด ตามชอบใจจ๊ะ อยากให้แสดงกี่บทความ เอาหล่ะไปลองดูบล็อกของเรากันหน่อยดีกว่า ปรับแต่งแล้วชอบใจกันไหมคะ  วันนี้ bye จ๊ะ
ขอบคุณข้อมูลจาก Automatic readmore ค่ะ

3 comments:

กล้วยไข่ เรื่องวิ่งเรื่องกล้วย กล่าวว่า...

น่ารักจังค่ะ มีการ update ด้วย
ขอบคุณในความตั้งใจแบ่งปันนะคะ

มีเรื่องรบกวนสอบถามค่ะ
บล็อกของเรามี อยู่ 3 ที่
ควรจะใส่ตรงไหนดีคะ

เราลองใส่แทนที่แรกสุดที่ search เจอ
ปรากฏว่าบทความยังเต็มเหมือนเดิม เพียงแต่มีคำว่า read more เพิ่มเข้ามาเท่านั้นเอง 55555+

ตอนนี้ยังไม่กล้าใส่หมดทั้ง 3 อัน
กลัวกลับมาแก้แล้วหาไม่เจออะค่ะ แหะๆ

อันนี้บล็อกของเราค่ะ
http://bananareading.blogspot.com/

Aucharaporn Theemcle กล่าวว่า...

@กล้วยไข่ เรื่องวิ่งเรื่องกล้วยคะ ถ้าเกิดว่า มีปัญหาเรื่อง code ก็ลองเปลี่ยน template ดูไหมคะ หา Template สวย ๆ และมี Readmore พร้อมเวบบล็อกของ blogger นี้ หากเลือก template สักหน่อย แทบไม่ต้องปรับแต่งอะไร blog ก็สวยได้แบบง่าย ๆ แล้วค่ะ ดิฉันเองชอบใจฟรี template ที่นี่ http://www.lovelytemplates.com/blogger-templates ลองเข้าไปเลือกใช้ดูนะคะ (ไม่ได้มีผลประโยชน์อะไรกับเวบเค้าแต่เห็นว่าสวยจริง ๆ )

แต่ถ้าหากยังอยากจะเติม code readmore ก่อนเติม code หากกลัวว่ามีปัญหา ที่เมนู backup /restore ให้เลือก ดาวน์โหลด full template เก็บไว้เป็นการสำรอง template ก่อนจะเปลี่ยนแปลง หากเมื่อแก้ไข code แล้วเกิดมีปัญหา เราก็สามารถ อัพโหลด template ตัวที่เราสำรองเก็บไว้ มาใช้งานได้ค่ะ :)

บล็อกมี 3 ที่หมายถึง ? ...

กล้วยไข่ เรื่องวิ่งเรื่องกล้วย กล่าวว่า...

อ๊ากก อายจัง
ขออภัยค่ะ ใจคิด แต่มือไม่ได้เขียนออกไป 555+
หมายถึงในโค้ด template ของเรา มี อยู่ 3 ที่ค่ะ

ขอบคุณสำหรับคำแนะนำเรื่อง template นะคะ
เดี๋ยวว่างๆจะลองเข้าไปเลือกดูค่ะ

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