Elegant Popular Posts cho blogspot

Hôm nay, mình sẽ giới thiệu với các bạn một mẫu popular post cực đẹp, nó kết hợp hiển thị hình ảnh, đoạn trích và tiêu đề. Wiget được phát triển bởi ABT này có một nhược điểm đó là chỉ hiển thị ảnh được tải trực tiếp lên.

VIEW DEMO

#Thêm CSS

1. Đăng nhập Blogger
2. > Mẫu > Chỉnh sửa HTML
3. > Tìm thẻ ]]></b:skin>
3. > Dán code dưới vào trên thẻ vừa tìm được

/* Popular Posts Widget customized by AllBloggerTricks.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; }

#Thêm Scrip

1. > Tìm thẻ </head> đối với mẫu template của Blogger và thẻ </body> với các mẫu khác, thường là như vậy. Trong trường hợp không thành công bạn hãy thử với thẻ kia.

2. > Dán code dưới vào trên thẻ vừa tìm được

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

Lưu ý: Nếu blog của bạn đã có đoạn màu đỏ thì hãy xóa nó đi
3. > Save lại.

#Thêm Tiện ích

1. > Bố cục > Thêm tiện ích > Bài đăng phổ biến
2. > Đánh dấu tích như hình dưới

3. Save.

Lưu ý: 

• Hãy chỉnh độ rộng của Sidebar rộng một chút thì mới hiển thị thì wiget này mới hiển thị tốt.
• Wiget này chỉ hiện thị ảnh tải trực tiếp từ máy tính lên