Bài Đăng Phổ Biến Nhiều Màu Sắc Cho Blogger - Blogspot

Đối với một Blog bất kỳ thì Tiện ích Popular post là rất cần thiết bởi nó chứa các bài viết đọc nhiều người xem nhất, từ đó sẽ giúp khách tham quan sẽ ở lại lâu hơn blog của bạn. Hôm nay mình sẽ hướng dẫn các bạn tạo một Popular đẹp cho blog thân yêu của mình.

Với giao diện cực kỳ đẹp, cực kỳ trang nhã, hiện đại với các hiệu ứng, hình ảnh to, phông chữ to.
Tạo sự ấn tượng khó thể phai nhòa đối với đọc giả

1. Các bạn vào Blogger -> Mẫu -> Chỉnh sửa html
2. Tiếp tục các bạn tìm thẻ đóng ]]></b:skin> hay thẻ đóng </style> và đặt đoạn CSS sau vào trước thẻ đóng đó

CSS/* Popular Posts */
.PopularPosts .item-thumbnail{float:none;margin:0 0 10px}
.PopularPosts .item-title{background:rgba(0,0,0,0.5);position:absolute;display:block;clear:both;z-index:50;top:0;left:0;right:0;bottom:0;padding:15px;transition:all .4s;}
.PopularPosts .item-title:hover{background:rgba(0,0,0,.2)}
.PopularPosts .item-title a{color:rgba(255,255,255,0);font-weight:700;font-size:120%;text-shadow:0 0 5px rgba(0,0,0,0)}
.PopularPosts .item-title:hover a,.PopularPosts .item-title a:hover{color:rgba(255,255,255,1);text-shadow:0 0 5px rgba(0,0,0,.3)}
.PopularPosts .widget-content ul li img{translate(0,0) scale(1.0);transition:all .8s linear}
.PopularPosts .widget-content ul li:hover img{transform:translate(0,-20px) scale(1.05);transition:all 3.6s linear;}
.PopularPosts img{display:block;height:auto;width:100%;padding:0;backface-visibility:hidden;}
.PopularPosts .item-snippet{display:none;}
.PopularPosts ul li .item-content{position:relative;overflow:hidden;}
.PopularPosts ul{padding:0;line-height:normal;counter-reset:count;}
.PopularPosts .widget-content ul li{position:relative;padding:10px 0;overflow:hidden;max-height:100px;transition:all .4s;}
.PopularPosts .widget-content ul li:before{color:#fff;counter-increment:count;content:counter(count);position:absolute;right:-15px;top:-5px;font:bold 80px/1 Sans-Serif;z-index:51;transition:all .4s;}
.PopularPosts .widget-content ul li:hover:before{right:-55px;}
.PopularPosts ul li:nth-child(1) .item-title {background:rgba(221,25,29,0.5);}
.PopularPosts ul li:nth-child(2) .item-title {background:rgba(141,187,144,0.5);}
.PopularPosts ul li:nth-child(3) .item-title {background:rgba(39,169,255,0.5);}
.PopularPosts ul li:nth-child(4) .item-title {background:rgba(192,202,51,0.5);}
.PopularPosts ul li:nth-child(5) .item-title {background:rgba(26,35,126,0.5);}
.PopularPosts ul li:nth-child(6) .item-title {background:rgba(0,188,212,0.5);}
.PopularPosts ul li:nth-child(1) .item-title:hover,.PopularPosts ul li:nth-child(2) .item-title:hover,.PopularPosts ul li:nth-child(3) .item-title:hover,.PopularPosts ul li:nth-child(4) .item-title:hover,.PopularPosts ul li:nth-child(5) .item-title:hover,.PopularPosts ul li:nth-child(6) .item-title:hover{background:rgba(0,0,0,0.2);}

Lưu ý: Các bạn nên xóa hết các Css liên quan đến Popular Post cũ trước nha. Nếu các bạn không biết thì tìm kiếm với từ Popular là ra

3. Tiếp các bạn dán đoạn javascript sau vào trước thẻ đóng

JS<script type='text/javascript'>
// Popular Post Thumb
$(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
//<![CDATA[
// Custom Popular Post
$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,120),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});
//]]>
</script>

4. Save Template (Lưu Mẫu) lại 5. Để thưởng thức thành quả thì các bạn vào Blogger -> Bố cục -> Thêm tiện ích ->Bài đăng phổ biến -> chỉnh các thông số như hình:

[Widget] Bài Đăng Phổ Biến Nhiều Màu Sắc Cho Blogger - Blogspot

Chú ý: các bạn có thế thay đổi các thông số sau

Tiêu Đề
Hiện thị tối đa .... bài đăng

Nếu các bạn ko muốn hiện thị màu

- Từ đoạn code CSS trên các bạn xóa toàn bộ chữ có màu xanh lá cây là xong

Mặc định hiên thị quá 6 bài sẽ mất màu sắc, vì vậy nếu bạn chỉnh nhiều hơn 6 bài thì các bạn phài thêm mã màu cho bài thứ 7 trở đi

- Cũng ỡ đoạn code CSS trên các bạn thêm sau vào sau dòng .PopularPosts ul li:nth-child(6) .item-title {background:rgba(0,188,212,0.5);}

CSS.PopularPosts ul li:nth-child(7) .item-title {background:rgba(0,188,212,0.5);}

Các bạn thay mã màu có chữ đỏ thành mả màu bạn muốn (mã màu định dạng ở rgba nha)

Tương tự cho bài 8, thay số 7 thành 8, bài 9, bài 10
Để hiển thị được
- Các bạn thêm dòng sau

CSS.item-title:hover,.PopularPosts ul li:nth-child(7)

vào trong đoạn sau

CSS.PopularPosts ul li:nth-child(1) .item-title:hover,.PopularPosts ul li:nth-child(2) .item-title:hover,.PopularPosts ul li:nth-child(3) .item-title:hover,.PopularPosts ul li:nth-child(4) .item-title:hover,.PopularPosts ul li:nth-child(5) .item-title:hover,.PopularPosts ul li:nth-child(6) .item-title:hover{background:rgba(0,0,0,0.2);}

Sau đó nó sẽ thành như thế này:

CSS.PopularPosts ul li:nth-child(1) .item-title:hover,.PopularPosts ul li:nth-child(2) .item-title:hover,.PopularPosts ul li:nth-child(3) .item-title:hover,.PopularPosts ul li:nth-child(4) .item-title:hover,.PopularPosts ul li:nth-child(5) .item-title:hover,.PopularPosts ul li:nth-child(6) .item-title:hover,.PopularPosts ul li:nth-child(7) .item-title:hover{background:rgba(0,0,0,0.2);}

Lời Kết
Vậy là mình đã hướng dẫn các bạn tạo Bài Đăng Phổ Biến Nhiều Màu Sắc Cho Blogger - Blogspot, nếu có thắc mắc các bạn cứ comment bên dưới hoặc liên hệ mình, mình sẽ giải đáp.

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