วิธีแสดง Recent Post with thumbnail บน Blogger

การติดตั้ง Gadget แสดงบทความล่าสุดบน Blogger  จะมีประโยชน์ตรงที่ ทำให้ผู้อ่านหรือผู้ติดตามบล็อกของเรารู้ความเคลื่อนไหวของบล็อกเรามากขึ้น ยิ่งถ้าหากมีรูปภาพประกอบด้วยบทความก็ยิ่งน่าสนใจมากขึ้นด้วยครับ

สอนทำบล็อก วิธีสร้างบล็อก คู่มือบล็อก 


ขั้นตอนการแสดงบทความล่าสุดพร้อมรูปประกอบ

ขั้นที่ 1  ไปที่ รูปแบบ  >> องค์ประกอบของหน้า   >> เพิ่ม Gadget ชนิด HTML/จาวาสคริปต์

แต่ง blogspotHTML/จาวาสคริปต์ สอนทำ Blogger


ขั้นที่ 2 วางโค้ดด้านล่างนี้ลงไป แก้ไขอักษรสีแดงและทำการบันทึกครับผม


<script language="JavaScript">     
imgr = new Array();      
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";      
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";      
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";      
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";      
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";      
showRandomImg = true;       
boxwidth = 298;      
cellspacing = 8;      
borderColor = "#ffffff";       
bgTD = "#000000";        
thumbwidth = 40;       
thumbheight = 40;      
fntsize = 12;       
acolor = "#666";        
aBold = true;        
icon = " ";        
text = "comments";      
showPostDate = false;       
summaryPost = 40;        
summaryFontsize = 10;        
summaryColor = "#666";        
icon2 = " ";        
numposts =10;      
home_page = "http://hackublog.blogspot.com/";      
</script>      
<script src='http://siiam.bravehost.com/recentposts_thumbnail.js' type='text/javascript'/></script>


แนวทางการปรับแต่งโค้ด 
http://i43.tinypic.com/orpg0m.jpg คือภาพที่จะปรากฎเมื่อ
showRandomImg = true; คือคำสังที่ทำให้ภาพปรากฎซึ่งถ้าไม่ต้องการให้ปรากฎอาจจะตั้งค่าเป็น false ก็ได้
boxwidth = 298; คือ ความกว้างของ Gadget นี้ สามารถเพิ่ม/ลดได้
borderColor = "#ffffff";
bgTD = "#000000"; คือค่าสีพื้นหลังและเส้นขอบ
thumbwidth = 40;
thumbheight = 40; คือสูงและความกว้างของภาพสามารถปรับเพิ่ม/ลดได้ตามความเหมาะสม
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments"; คือ ขนาดและสไตล์ของ font
showPostDate = false; คือการตั้งค่าให้แสดงวันที่โพสด้วยหรือไม่  ถ้าต้องการแสดงตั้งเป็น true
summaryPost = 40; คือ จำนวนอักษรที่ถูกจำกัดให้แสดง
numposts =10;  คือจำนวนบทความที่ต้องการแสดง
home_page = "http://hackublog.blogspot.com/"; ให้แก้ไขเป็น URL ของบล็อกของคุณ


สำหรับคนที่ Add gadget แล้วไม่แสดงกระทู้ล่าสุด ให้ไปตั้งค่าฟีดของบล็อกให้ส่งออกแบบเต็ม (ดูรูป)

Feed blogger

หมายเหตุ หากคุณทำตามบทความนี้สำเร็จแล้วโปรดดาวน์โหลด
จาวาสคริปต์เก็บไว้หรือ upload ใช้งานด้วยตนเอง เพื่อป้องกันปัญหาการเรียกใช้งานจาก hackublog ครับ

http://siiam.bravehost.com/recentposts_thumbnail.js

ตอนนี้มีความคิดเห็น : 30 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. ใสแล้วแต่ทำงานไม่สมบูรณ์ครับ ทำให้เข้าดูบทความตามปกติไม่ได้ครับ

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

  1. http://109channel.blogspot.com/ นี่ครับ

  1. @ 109channel: ตอนนี้คุณไม่ได้ติดโค้ดเอาไว้ครับ ผมไม่สามารถตรวจหาข้อผิดพลาดได้ครับ
    แต่จากเหตุผลที่คุณแจ้งมาไม่ได้มีความสัมพันธือะไรกับสคริปต์ตัวนี้เลยนะครับ เพราะ Recent Post ไม่ได้สัมพันธืกับการเปิดดูบทความเลยครับ ถ้าเป็น Read more นั่นถึงจะส่งผล

  1. ขอโทษทีครับช่วยดูให้อีกทีครับ ตอนนี้ลองติดโค้ดใหม่แล้วครับ เพี้ยนทั้งหน้าเลยครับ
    http://109channel.blogspot.com/
    ขอบคุณครับ

  1. @ 109channel : รับทราบแล้วครับ ตอนนี้แจ้งให้ถอนการติดตั้งออกไปก่อนครับ
    สาเหตุ : สคริปต์ตัวนี้มีผลต่อตาราง ซึ่งมันบังเอิญที่ Templates รุ่นใหม่ก็มีบางส่วนเป็นตารางพอดี ยังไงขอเวลาผมหาทางแก้ก่อนนะครับ ได้เรื่องยังไงจะไปแจ้งที่บล็อก http://109channel.blogspot.com/ อีกทีครับ ขออภัยด้วยครับ

  1. ขอบคุณครับ

  1. ขอบคุณครับ

  1. ผมทำได้แล้วครับ...ขอบคุณมากมาย
    http://fr-phakk.blogspot.com/

  1. Happy Birthday ครับ...ขอบคุณในความตั้งใจค้นหาและแบ่งปันความรู้การเขียนบล็อกให้กับพวกเรา...ขอให้มีความสุขมากๆตลอดไปนะครับ.... (@_@)

  1. ขอบคุณ ๆ บงกช มากครับ ขอให้ประสบความสำเร็จในการเขียนบล็อกเช่นกันครับ

  1. ถ้าทำให้ บทความ แสดง เป็น หลายๆ column ทำยังไงครับ
    ขอบคุณมากๆครับ

  1. อีกนิดครับ ถ้าจะให้ ภาพที่แสดงมีขนาดใหญ่ขึ้นสักเท่าหนึ่ง อะคับ
    ขอบคุณครับ

  1. @ คุณโต้ย :
    1. แก้ขนาดภาพในโค้ดตรงค่านี้ครับ
    thumbwidth = 40;
    thumbheight = 40;
    ซึ่งอาจจะแก้เป็น
    thumbwidth = 80;
    thumbheight = 80;

    2. ถ้าพูดถึงวิธีแสดง recent post ในบทความนี้การแยกเป็น 2 Column ทำไม่ได้ครับ เพราะสคริปต์นี้เขียนให้แสดงผล Column เดียวครับ

  1. ขอบคุณครับ

  1. รบกวนหน่อยนะคับ คือว่า ผมทำ gadget ดังกล่าว แต่ผมอยากให้แสดงเนื้อหาด้วยอะคับเป็นเนื้อหาตัวเล็ก ๆ แสดงไม่หมดก็ได้ เอาไว้ใต้ชื่อหัวข้ออ่ะคับ คือผมทำบล็อกดูหนังอ่ะคับ อยากให้มีรูปหนัง กะชื่อเรื่อง และเนื้อหาบทความสักสี่ห้าบรรทัดไว้ข้างใต้ รบกวนด้วยนะคับ ผมไม่มีความรู็็้เรื่อง html

  1. @doonungonline : ลองใช้ gadget สำเร็จรูปที่มีอยู่ ใน Blogger ที่ชื่อว่า recent post ครับ ตัวนั้นอาจจะไม่สวยงามมากแต่ตรงความต้องการของคุณเลยครับ (ลองค้นหา Gadget จากในหมวด Gadget ที่แนะนำ)

  1. คือ ถ้าเราไม่ต้องการให้มันโชว์ว่า มีการเม้นไปกี่คอมเม้นแล้ว...
    เราต้องการเอาออก ให้เหลือแต่ภาพและหัวข้อก็พอ
    เราจะทำงัยดีครับ
    ขอบคุณมากเลย

  1. ไม่สามารถค่ะ อาจารย์ ไม่โชว์บทความเลยสักอัน รบกวนด้วยค่ะ
    http://www.itrendylifestyle.com/

  1. @ iTrendy360 : น่าจะเกิดจากการใช้โค้ดไม่ถูกต้องครับ ตรวจโค้ดให้ดี ๆ ครับ

  1. ต้องการแก้ตรงนี้ครับ
    จาวาสคริปต์ http://hackublog.googlecode.com/files/recentposts_thumbnail.js
    บล็อกผมได้แสดงเลยครับ จึงขอกับคุณ hackublog ครับ

  1. @tonghealth : ใช้ตัวนี้แทนครับ

    http://siiam.bravehost.com/recentposts_thumbnail.js

  1. ขอบคุณนะครับ

  1. ผมทำตามแล้วครับ ก็อบไปใส่ใน html แล้ว ไม่ทราบ สคริป จาวา นี้เราจะเอาไปเก็บไว้ที่ไหนหรอคับ

    ตอนนี้ข้อความยังไม่ขึ้นเลยครับ

  1. @Hot Patoo: จาวากก็รวมอยู่ในโค้ดที่ต้องวางใน HTML gadget ครับ อย่าลืมแก้ข้อมูลก่อนบันทึก

  1. เอาจำนวนเลขที่คอมเม้นออกยังไงอะคะ แล้วถ้าจะแยกตามป้ายกำกับทำไงเอ่ย

  1. @eyrAi : ต้องเข้าไปแก้จาวาสคริปต์ครับ

  1. ทำไมของผม มันไม่ขึ้นอะไรเลย ช่อยดูหน่อยครับว่าต้องแต่งยังไงบ้างมันจึงจะแสดง
    http://muslimpost.blogspot.com/

  1. ทำได้แล้วครับ ขอบคุณมากๆครับ

  1. ผมใช้ "http://sites.google.com/site/hackublogcodex/home/code/recentposts_thumbnail.txt" เปิดในบางเครื่องมันแสดงผลได้ แต่ในบางเครื่องมันไม่แสดงผล ทั้งๆที่เป็น Firefox เหมือนกันอ่ะครับ แก้ยังไงดีครับ

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

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel