Tiện Ích Popular Posts dạng Slides trượt dọc cho Blogger

Bước 1: Thêm widget Popular Posts vào blogspot của bạn!
1.1- Đăng nhập vào Blog
1.2- Vào mẫu (Template)
1.3- Chọn Thêm Tiện ích (Add Widget)
1.4. Bấm chọn mục bài đăng phổ Biến (Popularposst):
1.5. Chọn số bài hiển thị là 4 bài nha.
1.6- Lưu tiện ích lại.

Bước 2: Tùy chỉnh Popular Posts Rotating Slides cho blogspot của bạn!
2.1- Thêm tiện ích HTML/Javarscip và dán code bên dưới vào.

<style type="text/css" media="screen">

#PopularPosts1 {
overflow:hidden;
margin-top:5px;
width:100%;
padding:0px 0px;
height:310px;
}

#PopularPosts1 ul {
width:310px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:10px 0px 0px 10px;
}

#PopularPosts1 li {
 width:290px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVwDh2bxDcJSHg6t0ROrCZ-gjBZTSiJ6c2PHTJgG6tT-RmzpkCbBlaEyx2WeM9Qdf17o8nbV_hPoFL_MhIoYOYp6eBrI_tnfBcvZRDpKRIT3LnM5KUeuFitG272yR74ESH24bCIqzhIpk/s400/popular+posts.jpg) repeat-x;
border:1px solid #ddd;
}

#PopularPosts1 li .item-title {
   
    font-size:1em;
    margin-bottom:0.5em;
}

#PopularPosts1 li .item-title a {
text-decoration:none;
color:#7CA2C4;
font:bold 12px verdana;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}

#PopularPosts1 li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:2px solid #7CA2C4;
}

#PopularPosts1 li .item-snippet {
  overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#289728;
padding:0px 0px;
margin:0px 0px;
}

#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
    color:#3E4548;
    text-decoration: none;
}

#PopularPosts1 .spyWrapper {
    height: 100%;
    overflow: hidden;
    position: relative;
}

#PopularPosts1 {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.tags span,
.tags a {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}

a img {
    border: 0;
}

-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').simpleSpy();
});
</script>
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>

2..2- Lưu tiện ích lại.
2.3- Di chuyển thiện ích HTML/Javarscrip này lên trên tiện ích Popular posts các bạn đã thêm ở bước 1. như hình dưới đây:

Bước 3 » Tùy chỉnh giao diện hiển thị của tiện ích:

• height:310px; là chiều cao của box bài viết.
• width:310px là chiều rộng của khung tiện ích.
• Để thay đổi độ rộng của đoạn văn bản bạn thay đổi width:290px;. Lưu ý phần này nhỏ hơn độ rộng của khung tiện ích bên trên 20px. Trong ví dụ này chiều rộng của khung là 310px và chiều rộng văn bản này là 290px.
• Để thay đổi màu sắc tiêu đề, màu sắc liên kết và kích cỡ chũ bạn lần lượt chỉnh sửa  color:#7CA2C4; font:bold 12px verdana; .
• Để thay đổi kích thước và màu đường viền ảnh thumbnail bạn lần lượt chỉnh sửa: border:2px solid #7CA2C4
• Để thay đổi kích thước font chữ, và màu sắc của đoạn văn bản mô tả lần lượt chỉnh sửa code màu hồng.
• Nếu màu nền blog của bạn là màu đen hoặc màu tối thì hãy thay thế mã:

background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVwDh2bxDcJSHg6t0ROrCZ-gjBZTSiJ6c2PHTJgG6tT-RmzpkCbBlaEyx2WeM9Qdf17o8nbV_hPoFL_MhIoYOYp6eBrI_tnfBcvZRDpKRIT3LnM5KUeuFitG272yR74ESH24bCIqzhIpk/s400/popular+posts.jpg) repeat-x; 

Thành mã sau: 

background:#fff; 

Thay thế #fff thành màu nền của bạn.

Lưu lại và xem kết quả nhé...