Tùy chỉnh widget Popular Posts thanh lịch cho Blogger

Widget Popular Posts - tiện ích những bài viết được xem nhiều trong Blogspot. Đây là tiện ích thống kê rất hay của Blog mà hầu hết người dùng blog đều sử dụng. Một ngày nào đó bạn có muốn thay đổi widget Popular Posts cho nó trở nên thanh lịch hơn, bắt mắt hơn? Nếu có thì bạn hãy thử theo dõi nội dung bài viết dưới đây với một hướng dẫn tùy chỉnh widget Popular Posts rất độc đáo và lạ mắt.
Bạn sẽ nhìn thấy hiệu ứng trực diện của thủ thuật này ở demo trực tiếp. Và để làm được điều đấy, bạn theo dõi nội dung được ITViet360 hướng dẫn dưới đây nhé! Chỉ cần một số thao tác đơn giản sẽ giúp bạn có được 1 widget như ở demo

XEM DEMO

Hướng dẫn tùy chỉnh widget Popular Posts thanh lịch cho Blogger

Bước 1: Vào bảng điều khiển Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> Bài đăng phổ biến (Popular Post)
Nhớ kiểm tra có chọn hình ảnh đại diện và mô tả ngắn gọn của bài viết.
Bước 2: Thêm CSS vào mẫu bằng cách lựa chọn Mẫu (template) -> Chỉnh sửa HTML (Edit HTML). Ctrl + F để tìm tới ]]></b:skin> và dán code dưới đây ngay trên nó
/* Tùy chỉnh Popular Posts hướng dẫn bởi itviet360.com */
.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: Impact; 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; }

Lưu ý rằng: Bạn phải bỏ hết CSS của Popular trước đây (nếu có)
Bước 3: Thêm JS bằng cách bạn tiếp tục Ctrl + F tìm tới </body> và dán code dưới đây ngay trên nó
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
 $(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
</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>
Nếu File JS được bôi đỏ đã có trong template blog của bạn thì bạn bỏ đi nhé
Sau khi bạn đã thêm xong thì bạn hãy lưu mẫu lại và xem kết quả.
Chúc các bạn vui vẻ ! Chuyên mục: Thu thuat, Thu thuat blogspot, thu-thuat, thu-thuat-blogger