Popular Post rực rỡ màu sắc cho Blogspot

Chào các bạn, hôm nay mình xin được chia sẻ cho các bạn cách tạo Popular Post rực rỡ màu sắc cho Blogspot. Các bạn có muốn thay đổi một chút để tạo ra sự khác biệt không? Nếu như muốn thì hãy cùng mình làm ngay nhé! Dưới đây là hình ảnh cho các bạn xem trước để bị kích thích nào.

Các bạn thấy thích chứ? Nếu thích thì còn chần cừ gì mà không bật máy lên và vào trang chỉnh sửa mẫu của bạn để thực hiện nào? Lưu ý, các bạn cần phải thêm widget Popular Post của Blogger từ trước rồi nhé! Nếu không thì để sau thêm cũng chưa muộn đâu. Còn để thêm thì các bạn vào Bố cục -> Thêm tiện ích -> Bài đăng phổ biến. Vậy là xong nha.
Bước 1: Tùy chỉnh CSS cho popular post. Các bạn hãy tìm đến đoạn sau ]]></b:skin>, sau đó các bạn thêm đoạn CSS này vào bên trên nó nhé!

/* 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);
}

Bước 2: Các bạn thêm đoạn javascript này vào trên thẻ </body> của mình nhé. Làm như vậy để blog của bạn sẽ tải hết nội dung rồi mới tải đến js này. Từ đó cải thiện được tốc độ blog của bạn đấy.

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

OK, bây giờ các bạn chỉ việc lưu lại nữa thôi. Xong rồi, ra trang chủ để xe thành quả đi nào!!!!
Bạn nào chưa làm thì có thể xem DEMO nhé!