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

(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

Xem khác cùng chủ đề

17 nhận xét | Viết lời bình

2/11/2011 06:42:00 SA Trả lời

cái này anh có thể hướng dẫn chèn nó vào một HTML/Javascript giống như bài viết mới nhất có ảnh để tiện quản lý được không ạ

Admin
2/11/2011 07:28:00 SA Trả lời

Hiện tại thì a chưa test việc đó, do thủ thuật này nó được cung cấp sẳn bởi Blogger nên không đưa code vào HTML như các thủ thuật khác được e ah.

XDN
2/26/2011 09:23:00 SA Trả lời

Có thể rút gọn phần tóm tắt nội dung lại không anh?Em đã thử nhưng phần tóm tắt lại dài quá.
Giả sử nếu muốn bỏ phần tóm tắt bài viết thì làm thế nào.
em cảm ơn.

Admin
2/27/2011 02:53:00 SA Trả lời

Ở thủ thuật này do đây là tiện ích cung cấp bởi Blogger nên số ký tự phần tóm tắt đã mặc định, hiện tại anh chưa tìm được cách rút ngắn được. Nếu em không muốn hiển thị phần tóm tắt, chỉ hiển thị tiêu đề bài viết và ảnh thumbnail thì em thêm lệnh display:none; vào code CSS phần .item-snippet. Thân!

7/24/2011 06:37:00 SA Trả lời

Mình thêm css vào nó làm cho cả tiện ích linkwwithin của mình bị thay đổi , làm sao giờ

Admin
7/26/2011 09:25:00 CH Trả lời

2 tiện ích này nó khác nhau mà bạn,nếu lỡ trùng nhau thì bạn đành sửa lại class và phần css của bạn lại thôi

9/13/2011 11:10:00 CH Trả lời

em không tìm được dòng nay



làm sao đây anh

9/13/2011 11:12:00 CH Trả lời

em không tìm đc dòng trong mục hướng dẫn 6 của tiện ích này

Admin
9/14/2011 04:46:00 SA Trả lời

Em hãy thử gõ từ khóa "Sidebar" và tìm đến code tương tự trong template. Thường nằm gần cuối trong template.

10/08/2011 11:14:00 SA Trả lời

anh ơi muốn chỉ hiện thị tiêu để thì pải thêm display:none kiểu gì

Admin
10/08/2011 11:27:00 SA Trả lời

@ luubuttuoixanh.com: Chỉ hiển thị tiêu đề bài viết và ảnh thumbnail thì em thêm lệnh display:none; vào code CSS phần .item-snippet

10/08/2011 09:40:00 CH Trả lời

chèn vào trc hay sau hả anh và chèn ở CSS trên hay bên dười anh

Admin
10/08/2011 09:47:00 CH Trả lời

@ luubuttuoixanh.com: em chèn code như thế này

.item-snippet {display:none; color:#000;}

code ở bước 5.

10/08/2011 10:59:00 CH Trả lời

thanks anh em đã làm đc rồi

7/19/2012 03:22:00 SA Trả lời

Bạn ơi, cái đoạn ở phần 7 mình để vô sao blogger lại báo lỗi??? Mình làm hoài mà ko duoc.
Bạn chỉ lại giùm mình. Thanks

Admin
7/19/2012 04:29:00 SA Trả lời

Báo lỗi do trong template của bạn đã có ID PopularPosts1, bạn chỉ cần sửa id="PopularPosts1" lại thành id="PopularPosts101" là save được bạn.

7/19/2012 09:41:00 CH Trả lời

wiget PopularPosts1 là có sẵn trong blogger vậy mình bỏ phần tiện ích PopularPosts1 đó và tạo thành phần tiện ích giống như của bạn chỉ có được ko? Ko cần phải thay PopularPosts1 thành PopularPosts101 có được ko?

Mình hỏi thêm 1 chút: Hiện trang chủ monngoncuoituan của mình có phần hình slide nhưng mà sao nó ko chạy slide được dù mình đã copy đúng code của trang template của nó? Mình có thiếu sót hay sai phần nào ko? Bạn chỉ giúp mình nhé! Thanks bạn nhiều.

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang