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

Loading...

17 nhận xét

  1. 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 ạ

    Trả lờiXóa
  2. 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.

    Trả lờiXóa
  3. 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.

    Trả lờiXóa
  4. Ở 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!

    Trả lờiXóa
  5. 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ờ

    Trả lờiXóa
  6. 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

    Trả lờiXóa
  7. em không tìm được dòng nay



    làm sao đây anh

    Trả lờiXóa
  8. em không tìm đc dòng trong mục hướng dẫn 6 của tiện ích này

    Trả lờiXóa
  9. 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.

    Trả lờiXóa
  10. anh ơi muốn chỉ hiện thị tiêu để thì pải thêm display:none kiểu gì

    Trả lờiXóa
  11. @ 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

    Trả lờiXóa
  12. chèn vào trc hay sau hả anh và chèn ở CSS trên hay bên dười anh

    Trả lờiXóa
  13. @ luubuttuoixanh.com: em chèn code như thế này

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

    code ở bước 5.

    Trả lờiXóa
  14. 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

    Trả lờiXóa
    Trả lời
    1. 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.

      Xóa
    2. 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.

      Xóa