Tiện ích bài viết được xem nhiều nhất có ảnh thumbnail

Điểm 4.6/5 dựa vào 87 đánh giá

(Traidatmui.com) - Thời gian qua mình đã giới thiệu đến các bạn nhiều thủ thuật về các bài viết mới với những hiệu ứng khác nhau, hôm nay mình sẽ giới thiệu đến các bạn thủ thuật "Tạo tiện ích bài viết được xem nhiều nhất có ảnh thumbnail" cho Blogspot. Tiện ích này sẽ thống kê lại các bài viết trên blog bạn được người dùng truy cập và xem nhiều nhất trong tuần, trong tháng hay bất kỳ. Thật ra, tiện ích này đã được Blogger cung cấp sẵn có tên "Bài đăng Phổ biến" (Popular Posts), tuy nhiên khi bạn thêm tiện ích trực tiếp từ Blogger thì bạn khó điều chỉnh các thuộc tính vì không có phần CSS. Ở đây mình đã có chút thay đổi code và thêm thuộc tính CSS để có thể tùy biến màu sắc, cở chữ, font... dễ dàng hơn.

» Bắt đầu thủ thuật

1. Đăng nhập tài khoản Blogger
2. Vào thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chọn mở rộng mẫu tiện ích (Expand Widget Templates)
5. Chèn code CSS bên dưới vào trước thẻ ]]></b:skin>

.popular-posts {font-size:12px;}
.itemthumb {min-height:46px;border-bottom: 1px dotted #fff;}
.popular-posts a{font-weight:bold; color:#0000ff;}
.popular-posts a:hover {color:#ff0033; }
.item-snippet {color:#000;}
.thumbnailimg {float: left;
height: 40px; /* chiều cao của ảnh thumb*/
width: 40px; /* độ rộng của ảnh thumb*/
margin: 3px 0px 0px 3px; }

6. Tìm đến code bên dưới hoặc tương tự

<b:section class='sidebar' id='sidebar' preferred='yes'>

7. Thêm code bên dưới vào ngay sau code vừa tìm được

<b:widget id='PopularPosts1' locked='false' title='Bài viết xem nhiều nhất' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='popular-posts'>
<b:loop values='data:posts' var='post'>
<div class='itemthumb'>
<b:if cond='data:post.thumbnail'>
<a expr:href='data:post.href' target='_blank'><img alt='' class='thumbnailimg' expr:src='data:post.thumbnail'/></a>
<b:else/>
<a expr:href='data:post.href' target='_blank'><img class='thumbnailimg' src='http://lh6.ggpht.com/_BTztXRwC9ik/TMmT8UtD9QI/AAAAAAAAElc/wEXpVqs7lt4/no.png'/></a> </b:if><a expr:href='data:post.href'><data:post.title/></a>
<div class='item-snippet'>
<data:post.snippet/></div></div>
<div style='clear: both;'/>
</b:loop>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

8. Cuối cùng save templates lại và xem thử

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

Chuyên mục: Blogspot nâng cao