Recent Posts - Bài viết theo nhãn có thumbnails đặc biệt cho Blogspot

Hôm nay mình sẽ giới thiệu đến các bạn một kiểu Recent Posts tích hợp đầy đủ các tính năng như ngày tháng, số comment, readmore,... Bài viết theo nhãn có thumbnails đặc biệt cho Blogspot.

Bước 1: Vào Template > Mẫu > Chỉnh sửa HTML
Bước 2: Tìm kiếm (Ctrl + F) dòng sau:

]]></b:skin>

Và chèn đoạn code CSS này lên trên nó:

/* Recent posts - www.jakub-bb.net
--------------------------------- */ 
img.label_thumb{
float:left;
margin-right:10px !important;
height:65px; /* Thumbnail height */
width:65px; /* Thumbnail width */
border: 1px solid #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}

#label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
padding: 0;
}
ul#label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:0px;
border-bottom: 1px dotted #999999;
}

#label_with_thumbs li{
list-style: none ;
padding-left:0px !important;
}

#label_with_thumbs a { text-transform: uppercase;}
#label_with_thumbs strong {padding-left:0px; }

Bước 3: Tìm kiếm (Ctrl + F) dòng sau:

</head>

Và chèn đoạn JS sau lên trước nó:

Bước 4: Tìm kiếm (Ctrl + F) dòng sau:

</body>

Và chèn đoạn JS sau lên trước nó:

Bước 5: Vào Bố cục > Thêm tiện ích > HTML/Javascript
Chèn code sau:

<script type='text/javascript'>
var numposts = 3;
var  showpostthumbnails = true;
var displaymore = false;
var displayseparator =  true;
var showcommentnum = false;
var showpostdate = false;
var  showpostsummary = true;
var numchars = 100;
</script>
<script type="text/javascript" src="/feeds/posts/default/-/Tên Label?published&alt=json-in-script&callback=labelthumbs"></script>

Thay Tên Label thành tên Nhãn của bạn.

Giải thích:

• var numposts = 3; // Số bài viết hiển thị
• var showpostthumbnails = true; // Hiển thị ảnh thumbnail, có thể thay thành false nếu bạn không muốn hiển thị thumbnail
• var displaymore = false; // Thay thành true nếu muốn hiển thị nút read more
• var displayseparator =  true;
• var showcommentnum = false; // Thay thành true nếu muốn hiển thị số comment
• var showpostdate = false; // Thay thành true nếu muốn hiển thị ngày đăng bài
• var showpostsummary = true; // Thay thành false nếu không muốn hiển thị phần tóm tắt
• var numchars = 100; // Độ dài phần tóm tắt

Tham khảo http://www.bloggerwidgetgenerators.com/

Chúc các bạn thành công!

Jakub BB