[Blogspot] Popular Posts đẹp cho blog #1

Popular Posts dường như là một khái niệm quá quen thuộc với những ai làm blog rồi, nó được định nghĩa là "những bài viết phổ biến".
Khi vào bất kì một blog nào thì ngoài việc tìm những bài viết ưng ý theo "nhãn" thì người dùng có thể tham khảo thêm nhiều bài viết đứng top trong tuần qua, tháng qua hay mọi năm...
Vì vậy mà hôm nay mình sẽ share cho các bạn một mẫu Popular Posts đẹp #1 nhé (sau này sẽ sưu tầm thêm #2-#n luôn ^^)

Cách thức hiện:
Bước 1: Truy cập quản trị Blogspot.
Bước 2: Chủ đề - Chỉnh sửa HTML.
Bước 3: Tìm thẻ  ]]></b:skin> và dán đoạn code dưới lên trước (above) thẻ đó.

#PopularPosts1 ul li a{display:block} #PopularPosts1 ul{padding:10px 0} .PopularPosts .item-thumbnail{margin:0} .PopularPosts .widget-content ul{padding:0;margin-top:-7px} .PopularPosts .item-title a{text-decoration:none;font-weight:400;font-size:17px;color:#666;line-height:1.4em;transition:all ease-in-out .1s} .PopularPosts .item-title{position:absolute;margin:0 0 0 130px;top:50%;transform:translate(0,-50%)} .PopularPosts .widget-content ul li:hover a,.PopularPosts .widget-content ul li a:hover{color:#48d} .PopularPosts li:first-child .item-title{position:inherit;margin:0;transform:none} .PopularPosts li:first-child img{filter:brightness(30%)} .PopularPosts li:first-child .item-title a{position:absolute;top:50%;transform:translate(0,-50%);padding:0 15px;color:rgba(255,255,255,0.7);text-align:center;box-sizing:border-box} .PopularPosts li:first-child .item-title a:hover{color:rgba(255,255,255,.857575)!important} .PopularPosts li:first-child .item-snippet{position:absolute;top:0;opacity:0;visibility:hidden;width:85%;left:11px;color:#fff;background-color:rgba(172,22,172,.83);padding:10px;font-size:90%;line-height:normal;transition:.3s} .PopularPosts li:hover:first-child .item-snippet{top:20%;opacity:1;visibility:visible} .PopularPosts li:first-child img{width:100%;height:170px} .PopularPosts img{width:120px;height:80px;object-fit:cover;border-radius:4px} .PopularPosts .widget-content ul li{list-style:none;margin:0 0 15px!important;padding:0;line-height:1.3em!important;position:relative} .PopularPosts li .item-snippet{display:none} .PopularPosts li .item-thumbnail{width:120px;height:80px;margin:0 10px 0 0;overflow:hidden;float:left} .PopularPosts li:first-child .item-thumbnail{width:120px;height:80px;border-radius:4px;overflow:hidden;margin-bottom:10px} .PopularPosts li:first-child .item-content{position:relative} .PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{width:100%;height:160px;display:block} .PopularPosts li:first-child .item-title a{font-size:20px;line-height:1.5;font-weight:300}

Bước 4: Lưu lại và chiêm ngưỡng thành quả.

Lưu ý: Nếu như bạn gặp phải tình trạng thumbnail mục Popular Posts bị mờ thì cũng đừng lo lắng. Bởi vì, theo mặc định thì thumbnail sẽ chỉ có kích thước là 72x72; do đó mà khi zoom lên nó sẽ trông mờ và xấu.

Cách khắc phục:
Bước 1: Các bạn lại vô Chủ đề - Chỉnh sửa HTML.
Bước 2: Tại đây các bạn hãy tìm đoạn code hiển thị Popular Posts, nó có dạng như sau:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' visible='true'> <b:includable id='main'> ... <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, "1:1") : data:post.thumbnail' var='image'> <img alt='' border='0' expr:src='data:image'/> </b:with> ... </b:includable> </b:widget>

Tuy nhiên, để dễ dàng các bạn tìm 1 dòng này thôi vì trong template nó sẽ bị thu gọn lại rồi.
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1'>...</b:widget>
Bước 3: Thay toàn bộ đoạn vừa tìm được bằng đoạn code mới sau:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' visible='true'> <b:includable id='main'> <b:if cond='data:title != ""'><h2> <data:title/></h2> </b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='!data:showThumbnails'> <b:if cond='!data:showSnippets'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <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/> <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. --> <div expr:class='data:showSnippets ? "item-content" : "item-thumbnail-only"'> <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 120, "120:90") : data:post.thumbnail' var='image'> <img alt='' border='0' expr:src='data:image'/> </b:with> </a> </div> </b:if> <div class='item-title'> <a expr:href='data:post.href'><data:post.title/></a></div> <b:if cond='data:showSnippets'> <div class='item-snippet'> <data:post.snippet/></div> </b:if> </div> <div style='clear: both;'/> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

Trong đó, (data:post.featuredImage, 120, "120:90") với 120 - chiều rộng và 90 - chiều cao của thumbnail tùy bạn định giá trị cho hợp ý bạn là được!
Ok! Đến đây thì xong rồi đó.
Nếu cảm thấy bài viết hay và có ích thì hãy share cho mọi người cùng biết nhé! Thanks!

Code by: bacsiwindows

Fix thumbnail by: ultimatebloggerguide

TSM Blogger

Chào mừng các bạn đến với TSM. Blog chia sẻ thủ thuật blogspot, tin tức công nghệ, thể thao, kho template blogspot và nhiều thứ khác. Mong các bạn luôn ủng hộ để blog luôn vững mạnh!