Tạo 2 Kiểu Recent Post Đơn Giản Cho Blogger - Blogspot

Lần này Anh Nhím sẽ hướng dẫn các bạn tạo Widget Recent Post - là một tiện ích dùng để hiển thị một danh sách các bài viết mới nhất trên blog của bạn với một hình ảnh thu nhỏ và ngày xuất bản và số lượt comment.

Mục lục:

• Mục Đích
• Thực Hiện
• Nâng Cao 
• Lời Kết

Mục Đích

• Cập nhật danh sách bài viết mới nhất cho blogspot
• Tăng trải nghiệm người dùng
• Thực hiện đơn giản trong vòng 1 nốt nhạc
• .....

Thực Hiện

Ở bài viết này sẽ có hai mẫu cho bạn lựa chọn

1. Kiểu Đơn Giản Không Hình Ảnh, Không Comment(cái này giúp blogspot load nhanh hơn cái kia)
2. Kiểu có hình ảnh với số lượt comment

Kiểu Đơn Giản

1. Các bạn vào Blogger -> Bố Cục -> Thêm Tiên Ích -> HTML/Javascript

Các bạn nên đặt tiện ích này ở Sidebar thì nó sẽ đẹp hơn

2. Sau đó chép toàn bộ code sau vào trong đó.

HTML<style scoped='' type="text/css">
ul#recent-posts{list-style:none;margin:0;padding:0}li.recent-posts{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;}
li.recent-posts:last-child{border-bottom:0;}
li.recent-posts a{color:#444;}li.recent-posts a:hover{color:#444;text-decoration:underline}
</style>
<ul id="recent-posts"></ul>
<script>
//<![CDATA[
var homePage = "http://www.vnitworld.net",
numPosts = 5;
function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><a href="'+link+'" title="'+title+'" target="_blank" rel="nofollow">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);
//]]>
</script>

Chú ý: Các bạn thay link màu đỏ http://www.vnitworld.net thành link blog của bạn và thay số 5 thành số khác để hiện thị số bài mong muốn

3. Lưu sắp xếp
4. Thưởng thức thành quả

Demo
click to view

Kiểu Hình Ảnh Với Comment

1. Các bạn vào Blogger -> Bố Cục -> Thêm Tiên Ích -> HTML/Javascript

Các bạn nên đặt tiện ích này ở Sidebar thì nó sẽ đẹp hơn

2. Sau đó chép toàn bộ code sau vào trong đó.

HTML<style scoped='' type='text/css'>
#recent-posts{color:#999;font-size:12px}
#recent-posts img{background:#fafafa;float:left;height:60px;margin-right:8px;width:60px;border-radius:4px}
#recent-posts ul{margin:0;padding:0}
#recent-posts ul li{margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px solid rgba(0,0,0,0.1)}
#recent-posts ul li:last-child{border-bottom:0}
#recent-posts ul li a{display:block;color:#222;font-weight:700;text-decoration:none;font-size:14px;margin:0 0 10px 0;line-height:normal}
</style>
<div id='recent-posts'>
<script type='text/javaScript'>
var rcp_numposts=5;
var rcp_snippet_length=150;
var rcp_info='yes';
var rcp_comment='Comments';
var rcp_disable='T?t Nh?n xét';
function recent_posts(json){var dw='';a=location.href;y=a.indexOf('?m=0');dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if('content'in entry){var rcp_get_snippet=entry.content.$t}else{if('summary'in entry){var rcp_get_snippet=entry.summary.$t}else{var rcp_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){var rcp_snippet=rcp_get_snippet}else{rcp_get_snippet=rcp_get_snippet.substring(0,rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;if(y!=-1){rcp_posturl=rcp_posturl+'?m=0'}var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyi4p_nDaPpmcEaWGZpiENty9qzpYJ-5NVsVy0TcZf7F-g8f9iCJWEH8j5rIGF80rJs8HkQrDLBQ8IP8XJ3_SC6zPbVmDu6yyVS0kMABKSxk1drqIpAMM4lRxxELjOijeosl4QvqSODDAU/"};}};dw+='<li>';dw+='<img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="'+rcp_snippet+'">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts\"><\/script>');
</script>
</div>

3. Lưu sắp xếp
4. Thưởng thức thành quả

Demo
click to view

Nâng Cao

Cái này chả có gì nâng cao cả

Lời Kết

Vậy là mình đã hướng dẫn các bạn Tạo 2 Kiểu Recent Post Đơn Giản Cho Blogger - Blogspot , nếu có thắc mắc các bạn cứ comment bên dưới hoặc liên hệ mình, mình sẽ giải đáp. Chúc các bạn thành công

Nguyễn Đăng Hậu

Đam mê công nghệ, lập trình web, game đua xe và nhiều thứ khác. Thích học hỏi, tìm tòi nhiều kiến thức hay bổ ích. Thích chia sẽ cho mọi người, bạn bè về những kiến thức học được.