Search This Blog

Tips: Recent Posts By Label for Blogger.com

Thursday, August 28, 2014

เพื่อนๆที่ใช้ Blogspot หรือ Blogger.com แล้วอยากได้ Widget ที่คล้ายกับ Recent post with thumbnail แต่อยากให้แบ่งไปตาม Label วันนี้ผมเอาทิ๊ปมาบอกแล้วครับ

ขั้นตอนก็ว่ากันตามนี้เลยครับ

1) Blog ที่เราจะใช้ Widget นี้ แล้วเลือกที่ Template >> Edit HTML

image

image



2) ให้หา Code ตัวนี้ “]]></b:skin>” โดยให้กด Ctrl+F แล้วพิมพ์ใส่ลงไปเลยครับง่ายดี

3) แล้วใส่ Code ชุดด้านล่างนี้ลงไปก่อน Code “]]></b:skin>

/*** Recent Labels Gadget Css ***/
img.label_thumb{
float:left;
padding:5px;
border:1px solid #8f8f8f;
background:#D2D0D0;
margin-right:10px;
height:55px;
width:55px;
}
img.label_thumb:hover{
background:#f7f6f6;
}
.label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
adding: 0;
}
ul.label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:10px;
}
.label_with_thumbs a {}
.label_with_thumbs strong {}

4) หลังจากนั้นก็หา Code ตัวนี้ต่อนะครับ “</head>” โดยใช้วิธีเดิมคือ Ctrl+F
5) แล้วใส่ Code ชุดด้านล่างนี้ก่อน Code “</head>

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_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='http://2.bp.blogspot.com/_IKigl6y9hFA/TMdcT1jzo5I/AAAAAAAAAHA/hAKuT9rJpFU/noimage.jpg';}
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('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><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('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');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('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>


6) หลังจากนั้นก็กด Save template ครับ
7) มาถึงขั้นตอนการใส่ Widget ครับ ก็เหมือนทั่วไปคือไปที่ Layout >> แล้วเลือก “Add Gadget”
8) แล้วใส่ Code ชุดด้านล่างลงไป โดยให้ใส่ Label ที่เราอยากจะดึงออกมาแสดงไปแทนที่คำว่า “LABEL” ที่เป็นตัวหนังสือสีแดงใน Code ชุดด้านล่าง และหากอยากจะเพิ่มจำนวนเนื้อหาที่จะแสดงก็เปลี่ยนตัวเลขตรง “var_numposts=3” ถ้าเราอยากให้แสดง 5 บทความ ก็ใส่เลข 5 แทนเลข 3 ไปแค่นั้นครับ

<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>
<script type="text/javascript" src="/feeds/posts/default/-/LABEL?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

9) แล้วก็กด Save ผลก็จะออกมาดังนี้

 

recent post by label with thumbnails

ง่ายๆแค่นี้ครับ เพื่อนๆก็สามารถนำไปปรับแต่งหน้า Blog ของเพื่อนๆให้เป็นไปตามแบบที่ต้องการได้แล้วนะครับ
Share

Find us on facebook

 
Copyright © 2015 NP me story...
Distributed By My Blogger Themes | Design By Herdiansyah Hamzah