Bài đăng phổ biến (Popular Post) dạng trượt xuống cho blogger

Bài viết hướng dẫn làm thế nào để thêm Bài Viết Phổ Biến với kiểu các bài viết trượt xuống cho Blogger. Với tiện ích này sẽ làm cho blog của bạn luôn mới mẻ và bạn có thể xem demo tại đây
Bạn hãy làm theo hướng dẫn sau đây để blog của bạn thêm đẹp hơn nhé!




Làm cách nào để thêm tiện ích Bài Đăng Phổ Biến (Popular post) ?
Bạn vào Blogger > Bố Cục > Thêm tiện ích > Thêm widget Bài Đăng Phổ Biến (Popular post)

Làm cách nào để cho các bài viết trong widget Bài Đăng Phổ Biến chuyển động xuống dưới?

Vẫn tại Bố Cục > Thêm tiện ích > Thêm widget HTML/Javascript

Và dán vào nội dung của widget này code phía dưới sau đó lưu lại

<style type="text/css" media="screen">
#PopularPosts1 {
 overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:400px;
 
}
#PopularPosts1 ul {
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}



#PopularPosts1 li {
 width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(http://trollfile.googlecode.com/files/post.jpg) repeat-x;
border:1px solid #ddd;
}
#PopularPosts1 li .item-title {
    color:#A5A9AB;
    font-size:1em;
    margin-bottom:0.5em;
}
#PopularPosts1 li .item-title a {
 text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#PopularPosts1 li img {
 float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
#PopularPosts1 li .item-snippet {
  overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
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://trollfile.googlecode.com/files/simplespy.js" type="text/javascript"></script>

Sửa 2 thông số tô màu đỏ phía trên cho phù hợp với độ rộng của widget trong blog
Hình ảnh sau khi thêm Bài Đăng Phổ Biến và HTML/Javascipt chứa code trên

Rất đơn giản phải không bạn? Chúc blog của bạn ngày một phát triển nhé!