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.

Mục lục:

• Mục Đích
• Thực Hiện
• Nâng Cao 
• Lời Kết

Mục Đích

• 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ả

Thực Hiện

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:

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

Demo
click to view

Nâng Cao

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

Nguyễn Đăng Hậu

Đam mê công nghệ, lập trình web, game đua xe và nhiều thứ khác. Thích học hỏi, tìm tòi nhiều kiến thức hay bổ ích. Thích chia sẽ cho mọi người, bạn bè về những kiến thức học được.