บทความนี้จะเป็นการสร้าง recent post สำหรับ blogger ค่ะ เอ๊ะ...เรียกชื่อโบราณไปรึเปล่า หรือต้องเรียก Blogspot หรือ googleblog ดี 555 เอาเป็นว่าเรียกอะไรก็ได้เนอะ มาสร้าง recent post กันดีกว่า ซึ่งวิธีนี้ก็จะแสดงบทความล่าสุดของทั้ง blog หรือจะเลือกให้แสดงเฉพาะป้ายกำกับที่เราเลือกก็ได้ วิธีการที่เราใช้กับ blog เรา ก็มาแบบชิว ๆ สายง่าย ๆ เลยค่ะ แบบยาก ๆ เราไม่ทำ อิอิ เริ่มแรกก็ไปที่ > รูปแบบ แล้วสร้าง html box ขึ้นมาวางไว้ในตำแหน่งที่เราอยากให้ recent post โชว์ในเวบเรา แล้วก็แปะ Code ด้านล่างลงไปเลยค่ะ โดยตั้งค่า
ป.ล. เราสามารถประยุกต์วิธีการนี้มาสร้างเป็นสารบัญ Blog อย่างง่ายได้ด้วยนะคะ โดยการ สร้างหน้าเวบขึ้นมาแล้วใส่ Code ด้านล่างนี้ลงไปในส่วน html อาจจะให้หน้าเวบหนึ่งหน้าแสดง recent post ของหนึ่งป้ายกำกับ ถ้าอยากให้แสดงจำนวนบทความทั้งหมดจากป้ายกำกับนั้นก็ตั้งค่าสูง ๆ ไว้เลย อาจจะเป็น 999 ก็ได้ค่ะ แล้วก็สร้างหน้าเวบขึ้นมาตามจำนวนป้ายกำกับที่เราต้องการ แค่นี้ก็ได้สารบัญง่าย ๆ แล้วเนอะ ^_^
<style type='text/css'>
img.recent_thumb
{
border-radius: 100px;
width: 65px;
height: 65px;
float: left;
transition: all 0.2s linear 0s;
margin-right: 5px;
padding: 3px;
background-color: #F5F5F5;
border: 1px solid #69B7E2;
}
img.recent_thumb:hover
{
opacity: 0.6;
}
.recent_posts_with_thumbs
{
float: left;
width: 100%;
min-height: 70px;
margin: 5px 0px 5px 0px;
padding: 0;
font-size:12px;
font-style: normal;
}
ul.recent_posts_with_thumbs li
{
padding-bottom:5px;
padding-top:5px;
min-height:65px;
}
.recent_posts_with_thumbs a
{
text-decoration:none;
}
.recent_posts_with_thumbs strong
{
font-size:10px;
}
.recent-post-title a
{
font-size: 12px;
color: #2aace3;
}
</style>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 50;
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFYeKYjrF8c4FnLhNt35fEGHq1NsswNiauRfw4Odm4akzH3BkyJsIkW5xDEHUK8fo98MGZW40wBmJks-uOxoUj7rF3PuEfwKgQQfRJDdFsoe1bpiunvtwYwwa06BkuFBBx4RcHsB2Qcu0/s512-Ic42/BlogNopictures.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 src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
<hr/>
- กรณีแสดงบทความล่าสุดของทั้ง blog โดยใช้ /feeds/posts/default?
- กรณีแสดงบทความล่าสุดแยกตามป้ายกำกับ โดยเปลี่ยนจากข้อ 1 เป็น /feeds/posts/default/-/ชื่อป้ายกำกับ? ใส่ชื่อป้ายกำกับที่เราต้องการค่ะ
- ส่วนลิงค์ https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFYeKYjrF8c4FnLhNt35fEGHq1NsswNiauRfw4Odm4akzH3BkyJsIkW5xDEHUK8fo98MGZW40wBmJks-uOxoUj7rF3PuEfwKgQQfRJDdFsoe1bpiunvtwYwwa06BkuFBBx4RcHsB2Qcu0/s512-Ic42/BlogNopictures.PNG อันนี้คือภาพที่เราอยากให้แสดงในกรณีที่บทความนั้น ๆ ไม่มีรูปที่จะใช้เป็น thumbnail สามารถเปลี่ยนเป็นภาพอื่นได้นะคะ
- ตั้งค่าการแสดงผล
- จำนวนโพส โดยเปลี่ยนตัวเลขด้านหลัง var numposts = 5; ให้เป็นตามจำนวนที่ต้องการ
- การแสดงรูปตัวอย่าง วันเดือนปีที่โพสบทความ ตัวอย่างเนื้อหาบทความตามรายการด้านล่าง
- var showpostthumbnails = true;
- var displaymore = false;
- var displayseparator = false;
- var showcommentnum = false;
- var showpostdate = false;
- var showpostsummary = false;
- จำนวนความยาวของตัวอย่างเนื้อหา กรณีที่จะให้แสดงก็อย่าลืมตั้งความยาวด้านหลังคำสั่ง var numchars = 50; ด้วยน้า
- นอกจากนั้นหากเปลี่ยนตัวสีแดงในส่วนของ img.recent_thumb{...} จะเป็นการปรับเปลี่ยนลักษณะของภาพตัวอย่างค่ะ เช่น border-radius สามารถตั้งค่าให้แสดงภาพตัวอย่างเป็นวงกลมหรือสี่เหลี่ยม หรือสี่เหลี่ยมมุมโค้งได้โดยการเปลี่ยนค่าตัวเลข กรณีของ Blog เราตั้งให้เป็น 100px ภาพตัวอย่างก็จะออกมาเป็นวงกลมค่ะ width กับ height ก็คือการปรับขนาดความสูง ความกว้างของภาพ background-color และ border ก็จะเป็นการปรับการแสดงผลของพื้นหลังและเส้นขอบของภาพตัวอย่างนั่นเอง
- ส่วนของชื่อบทความที่จะแสดงใน recent post ก็สามารถปรับขนาดและสีได้โดยการตั้งค่าในส่วน .recent-post-title a{...} ค่ะ
ทั้งหมดนี้ก็เป็นส่วนหลัก ๆ ที่เราสามารถปรับสไตล์การแสดงผลของ recent post ให้เข้ากับ blog ของเรา นอกจากนี้ยังปรับแต่งได้อีกหลายอย่างค่ะ ลองเล่นกันดูเนอะ แต่อย่าลืม back up ไว้ด้วยล่ะสำหรับคนที่ไม่เชี่ยวชาญเช่นเรา เดี๋ยวไปถึงจุด จุดหนึ่งแล้ว เราจะต้องมาถามตัวเองว่า เอ...เรามาถึงจุดนี้ได้ไงนะ ฮ่า ๆ ๆ
<style type='text/css'>
img.recent_thumb
{
border-radius: 100px;
width: 65px;
height: 65px;
float: left;
transition: all 0.2s linear 0s;
margin-right: 5px;
padding: 3px;
background-color: #F5F5F5;
border: 1px solid #69B7E2;
}
img.recent_thumb:hover
{
opacity: 0.6;
}
.recent_posts_with_thumbs
{
float: left;
width: 100%;
min-height: 70px;
margin: 5px 0px 5px 0px;
padding: 0;
font-size:12px;
font-style: normal;
}
ul.recent_posts_with_thumbs li
{
padding-bottom:5px;
padding-top:5px;
min-height:65px;
}
.recent_posts_with_thumbs a
{
text-decoration:none;
}
.recent_posts_with_thumbs strong
{
font-size:10px;
}
.recent-post-title a
{
font-size: 12px;
color: #2aace3;
}
</style>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 50;
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFYeKYjrF8c4FnLhNt35fEGHq1NsswNiauRfw4Odm4akzH3BkyJsIkW5xDEHUK8fo98MGZW40wBmJks-uOxoUj7rF3PuEfwKgQQfRJDdFsoe1bpiunvtwYwwa06BkuFBBx4RcHsB2Qcu0/s512-Ic42/BlogNopictures.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 src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
<hr/>