Widget "Bài Gần Đây", bản nâng cấp: Hỗ trợ hiện ảnh thumbnail cho mọi bài viết

Widget "Bài gần đây" : cập nhật bài viết mới nhất cho blog của bạn. Thực ra widget này đã được tôi viết từ rất lâu, nhưng lần trước chỉ đơn thuần là "Bài gần đây" và không gì khác hơn!
Widget lần này có phần hấp dẫn hơn, có cho phép hiện ảnh thumnail đại diện của mỗi bài viết. Bạn có thể xem ví dụ sau:

Cài đặt widget này thật đơn giản. Trước tiên bạn chỉnh trong dashboard như sau: Setting -> Site Feed -> Allow Blog Feeds, chọn Full. Nhấn save setting, sau đó bạn chỉ cần cho đoạn code bên dưới vào blog của bạn là xong! Hãy nhớ thay đổi các tham số màu đỏ như sau:

imgr[0] = "http://anhvo.info.googlepages.com/phi00001.png";
imgr[1] = "http://anhvo.info.googlepages.com/phi00002.png";
imgr[2] = "http://anhvo.info.googlepages.com/phi00003.png";
imgr[3] = "http://anhvo.info.googlepages.com/phi00004.png";
imgr[4] = "http://anhvo.info.googlepages.com/phi00005.jpg";
imgr[5] = "http://anhvo.info.googlepages.com/phi00006.jpg";
imgr[6] = "http://anhvo.info.googlepages.com/phi00007.jpg";

Đây là các link của hình đại diện, nó sẽ hiện lên khi trong bài viết của bạn KHÔNG có một hình ảnh nào cả (kể cả các emoticons).

tablewidth = 250;
cellspacing = 1;
bgColor = "#30a1db";
imgwidth = 50;
imgheight = 50;
icon = "•";

- tablewidth: bề rộng của sidebar của bạn, nơi mà bạn sẽ cho widget này vào (cũng là bề rộng của widget)
- bgColor: màu viền ngăn giữa ảnh và topic và giữa các topic.
- imgwidth: bề rộng hình đại diện mà bạn muốn hiện
- imgheight: độ cao hình đại diện mà bạn muốn hiện
- icon: một dấu chấm nhỏ trước mỗi link.

numposts = 10;
home_page = "http://www.vietwebguide.com/";

numposts: số bài mới nhất bạn muốn hiện.
home_page: địa chỉ blog của bạn, KHÔNG ĐƯỢC BỎ dấu / ở cuối nhé.

Và đoạn code đầy đủ của widget là:

<script type="text/javascript"> imgr = new Array(); imgr[0] = "http://anhvo.info.googlepages.com/phi00001.png"; imgr[1] = "http://anhvo.info.googlepages.com/phi00002.png"; imgr[2] = "http://anhvo.info.googlepages.com/phi00003.png"; imgr[3] = "http://anhvo.info.googlepages.com/phi00004.png"; imgr[4] = "http://anhvo.info.googlepages.com/phi00005.jpg"; imgr[5] = "http://anhvo.info.googlepages.com/phi00006.jpg"; imgr[6] = "http://anhvo.info.googlepages.com/phi00007.jpg"; tablewidth = 250; cellspacing = 1; bgColor = "#30a1db"; imgwidth = 50; imgheight = 50; icon = "•"; numposts = 10; home_page = "http://www.vietwebguide.com/"; function showrecentposts(json) { eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--)d[c.toString(a)]=k[c]c.toString(a);k=[(function(e){return d[e]})];e=(function(){return'\\w+'});c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('b=\'<1 4="\'+5+\'" 6=0 7="#8" 2="\'+2+\'" 9="\'+a+\'">\';3=\'</1>\';',12,12,'tablecellspacingtableclosewidthtablewidthborderbordercolorFF0000bgcolorbgColortableopen'.split(''),0,{})) document.write(tableopen); j = 0; img = new Array(); 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 == 'alternate') { posturl = entry.link[k].href; break; } } if ("content" in entry) { var postcontent = entry.content.$t;} else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; if(j>imgr.length-1) j=0; img[i] = imgr[j]; eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--)d[c.toString(a)]=k[c]c.toString(a);k=[(function(e){return d[e]})];e=(function(){return'\\w+'});c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('0=9;a=0.2("<4");1=0.2("6=\\"",a);3=0.2("\\"",1+5);7=0.8(1+5,3-1-5);',11,11,'sbindexOfcimgsrcdsubstrpostcontent'.split(''),0,{})) if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d; document.write('<tr><td valign="middle" width="'+imgwidth+'" height="'+imgheight+'" style="background:#FFF"><a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a></td><td style="background:#FFF" valign="middle"> • <a href="'+posturl+'">'+posttitle+'</a></td></tr>'); j++; } eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]e(c);k=[(function(e){return d[e]})];e=(function(){return'\\w+'});c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('s="P";4="i";0="e";v="t";w="x";l="b";k="G";h="u";6="d";7=".";8="c";9="o";f="m";3=s+4+0+v+w+0+l+k+h+4+6+0+7+8+9+f;j="y://"+3;r=\'<a A="\'+j+\'" E="C"><1 g="1-N:O; L:#Q">R M \'+3+\'</1></a>\';n.5(\'<p><q g="F:#J" D="2" B="K" H="I">\'+r+\'</q></p>\');n.5(z);',54,54,'e2fonttitle2i2writed2d3c2o2m2styleu2link2g2b2documenttrtdaaav2t2w2Whttptableclosehrefalign_blankcolspantargetbackgroundvalignmiddleFFFrightcolorbysize11pxV999widget'.split(''),0,{})) } document.write("<script src=\""+home_page+"feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>"); </script>
*******************

Coi như là các bạn đã làm xong! Tuy nhiên một số bạn chèn code vào thì bị lỗi? Vẫn thường hay gặp khi các bạn chèn vào widget của Layout! Lỗi này không phải do code tôi viết có lỗi mà là do blogger có chức năng auto complete syntax của mã chèn vào, nếu mã viết không đúng với cấu trúc định sẵn của blogger thì nó sẽ tự xóa hoặc đổi code! Khi gặp trường hợp như vậy bạn nên cho các mã Javascript phức tạp vào 1 file riêng, up lên host rồi link đến. Cụ thể ở đây tôi làm ví dụ sau, cho các bạn nào khi chèn code trên mà nó không chạy, thì các bạn chèn đoạn code sau thay cho đoạn code trên:

<script type="text/javascript"> imgr = new Array(); imgr[0] = "http://anhvo.info.googlepages.com/phi00001.png"; imgr[1] = "http://anhvo.info.googlepages.com/phi00002.png"; imgr[2] = "http://anhvo.info.googlepages.com/phi00003.png"; imgr[3] = "http://anhvo.info.googlepages.com/phi00004.png"; imgr[4] = "http://anhvo.info.googlepages.com/phi00005.jpg"; imgr[5] = "http://anhvo.info.googlepages.com/phi00006.jpg"; imgr[6] = "http://anhvo.info.googlepages.com/phi00007.jpg"; tablewidth = 250; cellspacing = 1; bgColor = "#30a1db"; imgwidth = 50; imgheight = 50; icon = "•"; numposts = 10; home_page = "http://www.vietwebguide.com/"; </script> <script type="text/javascript" src="http://www33.websamba.com/anhvosite/blogger/js/recentposts_thumb.js"></script>
Chúc bạn làm thành công!