Không thể phủ nhận rằng nền tảng Blogspot là một lựa chọn tốt cho những ai muốn viết blog chia sẽ cũng như bắt đầu con đường Blogging của mình. Hơn nữa, Blogspot còn cho phép người dùng của mình tùy biến giao diện không thua kém gì so với WordPress với điều kiện người dùng phải biến sử dụng javascript. Một trong những widget nên có trên một blog đó chỉnh là widget bài viết mới nhất với ảnh thumbnail. Không chỉ làm cho blog của bạn trở nên sinh động hơn mà nó góp phần điều hướng đọc giả của bạn đến với những bài viết mới hơn trên blog của mình.
Mặc dù Tinhoc24h đã chuyển nhà sang WordPress lâu rồi nhưng mình vẫn giữ lại những widget cũng như tùy biến của Blogspot để có dịp sẽ sử dụng. Và trong bài viết này mình sẽ hướng dẫn các bạn cách tạo widget bài viết mới nhất với thumbnail đẹp cho blogspot trên sidebar.
Widget này mặc dù đã được chia sẽ rất nhiều trên mạng bởi các blog thủ thuật khác nhưng có 1 vấn đề người sử dụng code không biết có nhận ra hay không nên mình cũng nhắc luôn. Đó chính là Widget bài viết mới của những trang thủ thuật chia sẽ chỉ lấy được hình ảnh thumbnail nếu như bài viết upload ảnh lên từ chính blogspot. Nếu sử dụng hình ảnh ngoài nó sẽ không hiển thị. Với widget bài viết mới mình sắp chia sẽ dưới đây nó sẽ khắc phục hoàn toàn lỗi này cho hiển thị đẹp nhất trên tất cả các blog cho dù bạn sử dụng hình ảnh bên ngoài để post lên blog của mình.
DEMO
Hướng dẫn tạo widget bài viết mới nhất với thumbnail
Bước 1: Đăng nhập vào Blogger -> Template -> Chỉnh sửa HTML và chèn đoạn css bên dưới vào trước thẻ ]]></b:skin>
#recent-posts li {
background: none;
padding-left: 5px;
}
#recent-posts li:hover {
background: #ddd !important;
}
#recent-posts li img {
float: left;
margin-right: 19px;
border: 1px solid #999;
background: white;
width: 36px;
height: 36px;
padding: 3px;
}
#recent-posts li:hover img{
transform: rotate(15deg);
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
}
background: none;
padding-left: 5px;
}
#recent-posts li:hover {
background: #ddd !important;
}
#recent-posts li img {
float: left;
margin-right: 19px;
border: 1px solid #999;
background: white;
width: 36px;
height: 36px;
padding: 3px;
}
#recent-posts li:hover img{
transform: rotate(15deg);
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
}
Bước 2: Tạo một Widget HTML trên Sidebar và chèn vào đoạn code bên dưới.
<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=’No Comments';
function recent_posts(json){var dw=”;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)+”…”;};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;var rcp_postdate=entry.published.$t;if(‘media$thumbnail’in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb=”http://lh3.ggpht.com/–Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png”};}};dw+='<li>';dw+='<img alt=”‘+rcp_posttitle+'” src=”‘+rcp_thumb+'”/>';dw+='<div><a href=”‘+rcp_posturl+'” 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>
<script type=’text/javascript’>
var rcp_numposts=5;
var rcp_snippet_length=150;
var rcp_info=’yes';
var rcp_comment=’Comments';
var rcp_disable=’No Comments';
function recent_posts(json){var dw=”;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)+”…”;};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;var rcp_postdate=entry.published.$t;if(‘media$thumbnail’in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb=”http://lh3.ggpht.com/–Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png”};}};dw+='<li>';dw+='<img alt=”‘+rcp_posttitle+'” src=”‘+rcp_thumb+'”/>';dw+='<div><a href=”‘+rcp_posturl+'” 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>
Các bạn có thể tùy chỉnh các tham số sau để hiển thị theo yêu cầu của bạn
– var rcp_numposts=5; // Số lượng bài viết hiển thị
– var rcp_info=’yes‘; // Hiển thị thông tin bài viết bao gồm ngày post và số lượng comment, sửa yes thànhno nếu bạn không muốn nó hiển thị
– var rcp_comment=’Comments'; //Comments
– var rcp_disable=’No Comments'; //Hiển thị khi không có bình luận
– var rcp_info=’yes‘; // Hiển thị thông tin bài viết bao gồm ngày post và số lượng comment, sửa yes thànhno nếu bạn không muốn nó hiển thị
– var rcp_comment=’Comments'; //Comments
– var rcp_disable=’No Comments'; //Hiển thị khi không có bình luận
Bước 3: Lưu lại và tận hưởng kết quả thôi, tùy vào giao diện của bạn mà chỉnh sửa lại css để có được kết quả hiển thị đẹp hơn.
Chúc các bạn thành công!
http://tinhocpro.com/2014/11/widget-bai-moi-nhat.html
Xuất thân là Quản Trị Kinh Doanh. Yêu thích Marketing Online và trở thành Blogger với gần 1000 bài viết về nhiều lĩnh vực. Blog cá nhân http://toilaquantri.com