Popular Posts Widget tuyệt đẹp cho blogger

Muốn một sự thanh lịch và tuyệt đẹp cho widget Popular Posts trên blog blogger của bạn? Có vẻ bạn đã hạ cánh vào đúng nơi rồi đấy. Hôm nay mình chia sẻ đến các bạn một widget Popular Posts độc đáo của trang All Blogger Tricks do mình chỉnh sửa đôi chút để phù hợp với tiếng việt hơn.

Các bạn có thể xem demo bằng cách nhấp vào nút bên dưới:

Xem Demo

Sau khi xem demo, nếu các bạn thấy thích có thể thực hiện các bước bên dưới để đưa nó vào blog của mình.

Thêm một tiện ích Popular Posts

Đầu tiên từ giao diện quản lí blog đi vào Bố cục → Thêm Tiện ích → Bài đăng phổ biến. Thêm các widget ở vị trí mong muốn và nhấn Lưu.Nhớ chọn các mục hình ảnh thu nhỏ và đoạn trích nhé.

Thêm CSS

Vào chỉnh sửa HTML và thêm vào trước thẻ đóng ]]></b:skin> đoạn CSS bên dưới:

/* Popular Posts Widget */
.PopularPosts .item-thumbnail { display: block; height: 190px; margin: 0; overflow: hidden; position: relative; width: 100%; }
.PopularPosts .item-title { position: relative; }
.PopularPosts img { display: block; height: auto; position: absolute; width:auto; transition: all 1s ease 0s; }
.item-title a { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-family: Tahoma; font-size: 17px; font-weight: 100; padding: 10px 0; position: absolute; right: 0; text-align: center; top: 30px; width: 100%; }
.item-snippet { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-weight: 900; left: 12%; padding: 10px; position: absolute; text-align: center; top: 95px; width: 70%; }
.item-content:hover img {transform: rotate(10deg) scale(1.2);}
.item-content { position: relative; }

Cũng lưu ý rằng bạn phải gỡ bỏ tất cả các mã CSS Popular Posts trước đây (nếu có) trước khi thêm một hoặc kết quả này sẽ là sự kết hợp của cả hai.

Thêm JavaScript

Thông thường các tiện ích Popular Posts không yêu cầu bất kỳ đoạn mã JavaScript nào, nhưng điều này cần để thay đổi tất cả kích thước hình ảnh và rút gọn nội dung.

Các bạn thêm vào trước thẻ đóng </body> đoạn JS sau:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
 $(document).ready(function() {$('.PopularPosts img').attr('src', function(i, src) {return src.replace( 's200-c', 's400' );});});
</script>
    <script type='text/javascript'>
    //<![CDATA[
    // Popular Posts customization by AllBloggerTricks.com
    // Trim Code by MS-potilas 2012
    $('.popular-posts ul li .item-snippet').each(function(){
     var txt=$(this).text().substr(0,120);
      var j=txt.lastIndexOf(' ');
      if(j>10)
         $(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
    });
    //]]>
    </script>

Sau khi thêm các bạn Lưu mẫu lại. Loại bỏ đoạn màu đỏ nếu nó đã có nó trong template của bạn.