Tạo bảng các bài viết gần đây có hình đại diện (Recent spots)

 Muốn tạo một bảng các bài viết mới gần đây cho blog hoặc web. Ta chỉ thực hiện vài bước đơn giản sau đây:
Copy toàn bộ code bên dưới dán vào tiện ích HTML/Java scrip mới của mình và không quên thay thế tên địa chỉ blog hay web của mình vào dòng màu đỏ. Sau đó lưu lại là xong.

Code dưới đây:



<style type="text/css"><!--
.recent_post_content{width:100%;}
.recent_post_content img {width:32px;height:32px;background-position: center;margin:7px;padding: 2px;border:#888 solid thin;}
.recent_post_content_item {border-top:#888 thin dashed;}
.recent_post_content_item table, .recent_post_content_item tr, .recent_post_content_item td {vertical-align: middle;}
.recent_post_content_item table {margin-bottom:2px;margin-top:3px;}
.recent_post_content_item:hover {background-color:#4A3829;}
.recent_post_title a{text-transform:uppercase;font-size:12px;text-decoration:none;font-weight:bold}
.recent_post_info a{font-size:11px;text-decoration:none;}
.recent_post_content_item:hover .recent_post_title a{color:#FFFFCC;}
.recent_post_content_item:hover .recent_post_info a{color:#888;}
.recent_post_content_item:hover .recent_post_title a:hover{color:#FFCC00;}
.recent_post_content_item:hover .recent_post_info a:hover{text-decoration:underline;}
--></style>
<div class="recent_post_content" id="recent_posts_id"></div>
<script type="text/JavaScript"><!--
var Posts_Number = 0;var Comments_Number = 0;var New_Posts_Title = [];var New_Posts_Url = [];var New_Posts_Author = [];var New_Posts_Comment_Number = [];var New_Posts_Thumbnail = [];var New_Posts_Snippet = [];
function New_Posts_Information(json){var entry;var re = /<\S[^>]*>/g;var str;var banner_begin_index;var banner_end_index;Posts_Number = json.feed.openSearch$totalResults.$t;for (var i = 0; i < 5; i++){entry = json.feed.entry[i];New_Posts_Title[i] = entry.title.$t;for (var k = 0; k < entry.link.length; k++){if (entry.link[k].rel == 'alternate'){New_Posts_Url[i] = entry.link[k].href;break;}}New_Posts_Author[i] = entry.author[0].name.$t;New_Posts_Comment_Number[i] = parseInt(entry.thr$total.$t);if ("content" in entry){New_Posts_Snippet[i] = entry.content.$t;}else if ("summary" in entry){New_Posts_Snippet[i] = entry.summary.$t;}else New_Posts_Snippet[i] = "";if (New_Posts_Snippet[i].search("bp.blogspot.com") != -1) New_Posts_Thumbnail[i] = entry.media$thumbnail.url; else {str = "src\u003d\"";banner_begin_index = New_Posts_Snippet[i].search(str);if (banner_begin_index == -1){New_Posts_Thumbnail[i] = "http://lh3.ggpht.com/_kck7-TEWM-M/TSZtEyqlErI/AAAAAAAAAO0/cXY9tgbBnko/popular_blank_icon.jpg";}else{New_Posts_Thumbnail[i] = New_Posts_Snippet[i].substring(banner_begin_index + str.length);str = "\""; banner_end_index = New_Posts_Thumbnail[i].search(str);New_Posts_Thumbnail[i] = New_Posts_Thumbnail[i].substring(0, banner_end_index);}} New_Posts_Snippet[i] = New_Posts_Snippet[i].replace(re, "");if (New_Posts_Snippet[i].length > 140){New_Posts_Snippet[i] = New_Posts_Snippet[i].substring(0, 140) + '...';}}}
function Install_New_Posts(){var str_out = "";for (var i = 0; i < 5; i++){str_out += '<div class="recent_post_content_item">';str_out += '<table width="0%" border="0">';str_out += '<tr>';str_out += '<td>';str_out += '<a href="' + New_Posts_Url[i] + '" title="' + New_Posts_Snippet[i] + '">';str_out += '<img src="' + New_Posts_Thumbnail[i] + '" width="32px" height="32px"/>';str_out += '</a>';str_out += '</td>';str_out += '<td>';str_out += '<div class="recent_post_title">';str_out += '<a href="' + New_Posts_Url[i] + '" title="' + New_Posts_Snippet[i] + '">';str_out += New_Posts_Title[i];str_out += '</a>';str_out += '</div>';str_out += '<div class="recent_post_info">';str_out += '<a href="' + New_Posts_Url[i] + '" title="' + New_Posts_Snippet[i] + '">';str_out += 'By ' + New_Posts_Author[i] + ' - ' + New_Posts_Comment_Number[i] + ' nhận xét';str_out += '</a>';str_out += '</div>';str_out += '</td>';str_out += '</tr>';str_out += '</table>';str_out += '</div>';}document.getElementById('recent_posts_id').innerHTML = str_out;}
--></script>
<script type="text/JavaScript" src="http://cafedongduong.blogspot.com/feeds/posts/default?max-results=5&orderby=published&alt=json-in-script&callback=New_Posts_Information"><!--  --></script>
<script type="text/JavaScript"><!--
Install_New_Posts();
--></script>

---