Blogger: สร้างเครื่องมือแสดงบทความล่าสุดพร้อมภาพตัวอย่าง

วิธีสร้างเครื่องมือสำหรับแสดงบทความล่าสุดพร้อมภาพตัวอย่าง (Blogger Recent Posts Widget With Thumbnails) ทำได้ดังนี้

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่ 'การออกแบบ > องค์ประกอบของหน้า'

ขั้นตอนที่ 2. ให้เลือกเพิ่ม Gadget แบบ 'HTML/จาวาสคริปต์'

ขั้นตอนที่ 3. คัดลอกโค้ดด้านล่างนี้ใส่ลงไปในช่อง 'เนื้อหา' และกดปุ่ม 'บันทึก' ก็เสร็จแล้ว

---

<style type='text/css'>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0;
float:left;margin:10px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;width: 100%;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}
</style>
<script style='text/javascript' >
function showrecentpostswiththumbs(json) {document.write('<ul class="recent_posts_with_thumbs">'); for (var i = 0; i < numposts; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if (i == json.feed.entry.length) break;for (var k = 0; k < entry.link.length;k++){

if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}var thumburl;try {thumburl=entry.media$thumbnail.url;}catch (error)

{
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl=d;} else thumburl='https://lh6.googleusercontent.com/-M-QW74Z9_GI/UC3kxprSo2I/AAAAAAAAEj0/ioID1g-gkLM/s72/no-image-available.png';
}

var postdate = entry.published.$t;var cdyear = postdate.substring(0,4);var cdmonth = postdate.substring(5,7);var cdday = postdate.substring(8,10);var monthnames = new Array();monthnames[1] = "Jan";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Apr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Aug";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dec";document.write('<li class="clearfix">');

if(showpostthumbnails==true)
document.write('<img class="recent_thumb" src="'+thumburl+'"/>');
document.write('<b><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b><br>');

    if ("content" in entry) {
      var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
      var postcontent = entry.summary.$t;}
    else var postcontent = "";
    var re = /<\S[^>]*>/g;
    postcontent = postcontent.replace(re, "");

if (showpostsummary == true) {

      if (postcontent.length < numchars) {
          document.write('<i>');
         document.write(postcontent);
          document.write('</i>');}
      else {
          document.write('<i>');
         postcontent = postcontent.substring(0, numchars);
         var quoteEnd = postcontent.lastIndexOf(" ");
         postcontent = postcontent.substring(0,quoteEnd);
         document.write(postcontent + '...');
          document.write('</i>');}
}

var towrite='';var flag=0;
document.write('<br><strong>');

if(showpostdate==true) {towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}

if(showcommentnum==true)
{
if (flag==1) {towrite=towrite+' | ';}
if(commenttext=='1 Comments') commenttext='1 Comment';
if(commenttext=='0 Comments') commenttext='No Comments';
commenttext = '<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';
towrite=towrite+commenttext;
flag=1;
;
}

if(displaymore==true)
{
if (flag==1) towrite=towrite+' | ';
towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More -></a>';
flag=1;
;
}

document.write(towrite);

document.write('</strong></li>');
if(displayseparator==true)
if (i!=(numposts-1))
document.write('<hr size=0.5>');
}document.write('</ul>');
}

</script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;</script>
<script src='http://tip.maxlayout.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'>
</script>

---

อธิบายเพิ่มเติม

ตั้งค่าเพื่อแสดงบทความจากทั้งบล็อก
ตอนนำไปใส่บล็อกของคุณเองอย่าลืมแก้ไขคำว่า
 http://tip.maxlayout.com
ซึ่งอยู่ในบรรทัดที่ 3 นับจากข้างล่างสุดให้กลายเป็น URL ของบล็อกของคุณเองด้วยครับ

ตั้งค่าเพื่อแสดงบทความจากป้ายกำกับอันเดียว
ส่วนสำหรับผู้ที่ต้องการแสดงข้อมูลจากป้ายกำกับเพียงป้ายเดียวเท่านั้นก็ให้แก้ไขคำว่า
default
ซึ่งอยู่ในบรรทัดที่ 3 นับจากข้างล่างสุดให้กลายเป็น

default/-/
จากนั้นก็เขียนต่อท้ายโค้ดนั้นด้วยชื่อป้ายกำกับที่ต้องการตัวอย่างเช่น
ถ้าผมต้องการแสดงบทความจากป้ายกำกับชื่อ Window XP

จากเว็บไซต์ชื่อ http://tip.maxlayout.com

ก็ต้องเปลี่ยน URL ในบรรทัดที่ 3 นับจากข้างล่างสุดของโค้ดจากค่าดั้งเดิมที่ถูกเขียนไว้ว่า

http://tip.maxlayout.com/feeds/posts/default
ให้กลายเป็น
http://tip.maxlayout.com/feeds/posts/default/-/Window XP

กำหนดจำนวนบทความที่นำมาแสดง
นอกจากนี้ถ้าต้องการเปลี่ยนแปลงจำนวนบทความตัวอย่างก็ให้ปรับตัวเลข 5 ใน
var numposts = 5;
ซึ่งอยู่ในบรรทัดที่ 11 นับจากข้างล่างสุดให้กลายเป็นจำนวนใหม่ได้ตามต้องการ

Credit: http://www.blogger.webaholic.co.in/2011/08/recent-posts-widget-with-thumbnails-for.html