Đề tài: Popular pots có có số đếm và title trích dẫn

09/03/2015

PopularPosts là 1 widget được rất nhiều người dùng Blogger sử dụng, đây là widget cho biết những bài đăng phổ biến được nhiều người đọc trên blog của bạn. Ngoài 3 dạng thống kê: 7 ngày qua, 30 ngày qua và mọi lúc nó có 4 kiểu hiển thị là: chỉ mình tiêu đề bài đăng, tiêu đề bài đăng và đoạn trích dẫn, tiêu đề bài đăng và hình ảnh, tiêu đề bài đăng kèm đoạn trích dẫn và hình ảnh. Thủ thuật sau đây sẽ hiển thị PopularPosts bao gồm số đếm (count), ảnh minh họa (thumbnail), và tiêu đề bài viết (post). Về cơ bản style này tương tự với style Cool Popular Posts mà mình từng giới thiệu đến các bạn.

Có gì mới?
1- Hiển thị số đếm dựa trên một scip tương đối nhẹ, do vậy không ảnh hưởng nhiều tới tốc độ load của blog bạn.
2- Thêm ảnh no thumbnail chung cho những bài viết không có ảnh minh họa để giúp style đẹp hơn và không bị phá vỡ bố cục (Xem ở hình minh họa hoặc blog demo 1).
Để làm được vậy chúng ta quan tâm tới đoạn mã của kiểu hiển thị thứ 3  và thứ 4  (mình sẽ đánh dấu màu xanh để các bạn dễ dàng theo dõi ở phần sau).
3- Có đoạn tittle mô tả khi dê chuột vào tiêu đề bài viết. Bạn có thể xem ở blog Demo hoặc hình dưới.
[You must be registered and logged in to see this image.]

Lưu ý: Bạn nên sau lưu template để tránh những sai lầm có thể sảy ra trong quá trình chỉnh sửa. Nên tiến hành chỉnh sửa template được tải về (bạn có thể chỉnh trực tiếp trên Blogger nhưng sẽ dễ dàng hơn nếu dùng một trình text editor chuyên nghiệp, ngoài ra thì việc chỉnh trên Blogger sẽ gây lỗi font với blog Tiếng Việt).

Bước 1: Thêm tiện ích bài đăng phổ biến (Popular pots):
- Hãy chắc chắn trên blog của bạn đã có widget PopularPosts này: Nếu chưa có thì hãy thêm vào blog và cài đặt như bước 1.5.
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) sau đó lưu lại:
[You must be registered and logged in to see this image.]

1.5. Bấm vào chỉnh sửa (Edit) tiện ích Bài Đăng Phổ Biến (Popularposst) bạn vừa tạo để xác định Id của tiện tích popular post và cài đặt các thông số: đánh dấu vào lựa chọn kèm theo hình ảnh thu nhỏ và trích đoạn. Kiểu thống kê thì tùy bạn chọn 1 trong 3 kiểu: 7 ngày qua, 30 ngày qua hay mọi lúc. Lưu thiết lập và tiến hành bước tiếp theo.
[You must be registered and logged in to see this image.]

- Bạn nên để số bài hiển thị tối đa là 10 bài.

☼ Bước 2: Chỉnh sửa style Popular pots :

2.1- Đăng nhập vào Blog
2.2- Vào Mẫu (Template)
2.3- Chọn Chỉnh sửa HTML (Edit HTML)
2.4- Thêm đoạn code sau vào trước thẻ ]]></b:skin> :

Code:: /*POPULAR POST http://namkna.blogspot.com/2011/01/cac-trang-web-lay-code-nhac-chen-vao.htm */ .top1, .top2, .top3, .top4, .top5, .top6, .top7, .top8, .top9, .top10 {border-bottom:1px dotted #ccc;padding-top:6px;font:bold 12px Tahoma;width:280px;margin-left:10px;font: bold 13px Tahoma;color:#FF6600} .top1 {background: url(https://lh3.googleusercontent.com/-Pe9zNU7cpT8/T5WLOj1PiII/AAAAAAAABQs/-C0sfi0jWyM/h120/1-popular-namkna-blogspot-com.png) no-repeat left} .top2 {background: url(https://lh4.googleusercontent.com/-EQdFbgW3wXI/T5WLQJxeuhI/AAAAAAAABQ8/3HlG3j9dols/h120/2-popular-namkna-blogspot-com.png) no-repeat left} .top3 {background: url(https://lh5.googleusercontent.com/-OYE0ZRqtlF8/T5WLRSDSmmI/AAAAAAAABRA/1FNAuRIJm6c/h120/3-popular-namkna-blogspot-com.png) no-repeat left} .top4 {background: url(https://lh6.googleusercontent.com/-_UKjMoChCa4/T5WLSRfz0sI/AAAAAAAABRM/ntYZtZtYvb4/h120/4-popular-namkna-blogspot-com.png) no-repeat left} .top5 {background: url(https://lh6.googleusercontent.com/-1cXmP5ZLyeM/T5WLUGYk5sI/AAAAAAAABRQ/ljURM_yvJ64/h120/5-popular-namkna-blogspot-com.png) no-repeat left} .top6 {background: url(https://lh4.googleusercontent.com/-46Y7mZS50Io/T5WLUzWzcHI/AAAAAAAABRY/XZk5p8Auu80/h120/6-popular-namkna-blogspot-com.png) no-repeat left} .top7 {background: url(https://lh5.googleusercontent.com/-Xu42Dh6wL6c/T5WLVuVB6fI/AAAAAAAABRk/_YnNqMfXAK4/h120/7-popular-namkna-blogspot-com.png) no-repeat left} .top8 {background: url(https://lh6.googleusercontent.com/-QS5RczNg-xI/T5WLWw_VL9I/AAAAAAAABRo/kY3FFv4Syb0/h120/8-popular-namkna-blogspot-com.png) no-repeat left} .top9 {background: url(https://lh3.googleusercontent.com/-9e-9oZjc09U/T5WLYB_tFMI/AAAAAAAABRw/_Cjhqjpl2Qs/h120/9-popular-namkna-blogspot-com.png) no-repeat left} .top10 {background: url(https://lh3.googleusercontent.com/-DYNKfhtG1lw/T5WLPQpw24I/AAAAAAAABQw/s5Don-mWjhE/h120/10-popular-namkna-blogspot-com.png) no-repeat left} .widget-item-control {display:none} .popular-posts ol{list-style-type:none;} .popular-posts ol li a, .randoms ul li a {color:#333333} .PopularPosts img { border: 1px solid #CCCCCC; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); height: 65px; margin-left: 27px; padding: 2px; z-index: -1;width: 90px;z-index:10}

2.5- Thêm đoạn code sau vào trước thẻ </head> :

Code:: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/> <script> $(document).ready(function () { $(".popular-posts ol>li:eq(0)").addClass("top1"); $(".popular-posts ol>li:eq(1)").addClass("top2"); $(".popular-posts ol>li:eq(2)").addClass("top3"); $(".popular-posts ol>li:eq(3)").addClass("top4"); $(".popular-posts ol>li:eq(4)").addClass("top5"); $(".popular-posts ol>li:eq(5)").addClass("top6"); $(".popular-posts ol>li:eq(6)").addClass("top7"); $(".popular-posts ol>li:eq(7)").addClass("top8"); $(".popular-posts ol>li:eq(8)").addClass("top9"); $(".popular-posts ol>li:eq(9)").addClass("top10"); }); </script>

Lưu ý: Nếu blog của bạn đã có file Jquery rồi thì hãy xóa đoạn code đi.

2.6- Tiếp tục tìm đoạn code của tiện ích popular post như bên dưới:

Code:: <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>

Trong đó: PopularPosts1 là Id của tiện ích PopularPosts, tùy vào tiện ích bạn muốn áp dụng khác nhau thì có Id khác nhau như PopularPosts1, PopularPosts2, PopularPosts3,....

- Thay thành đoạn code sau:

Code:: <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> <b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ol> <b:loop values='data:posts' var='post'> <li> <b:if cond='data:showThumbnails == "false"'> <b:if cond='data:showSnippets == "false"'>  <a expr:href='data:post.href'><data:post.title/></a> <b:else/>  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <b:if cond='data:showSnippets == "false"'>  <div class='item-thumbnail-only'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> <b:else/> <div class='item-thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img alt='no image' src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png'/></a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> </div> <div style='clear: both;'/> <b:else/>  <div class='item-content'> <div class='item-title'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'><img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/></a> </div> <b:else/> <div class='item-thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img alt='no image' src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png'/></a> </div> </b:if> <a expr:href='data:post.href' expr:title='data:post.snippet'><data:post.title/></a> </div> </div> <div style='clear: both;'/> </b:if> </b:if> </li> </b:loop> </ol> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

- Nếu Id ở bước 2.6 khác thì hãy thay PopularPosts1 màu xanh ở trên thành id đó nha.
7- Bấm Lưu Mẫu (save template) lại.