Giao diện tiện ích bài đăng phổ biến đẹp cho Blogger

Đã lâu lắm rồi blog mình chưa chia sẻ những trang trí giao diện mới cho các widget cũng như như một số thành phần nhỏ khác trên Blogger. Hôm nay mình xin chia sẻ cho các bạn giao diện khá đẹp cho tiện ích bài đăng phổ biến. Giao diện này ngoài việc sử dụng CSS để trang trí, nó phải sử dụng thêm Javascript và jQuery để tăng chất lượng cho ảnh thumbnail của tiện ích, nhưng bạn vẫn có thể yên tâm vì nó rất nhẹ không ảnh hưởng nhiều đến tốc độ tải trang.

Bạn có thể xem thủ demo tại đây: http://experimentalabt.blogspot.in/2012/03/hfh.html

Giao diện tiện ích bài đăng phổ biến đẹp cho Blogger

Chuẩn bị

Đầu tiên bạn phải thêm vào sẵn tiện ích bài đăng phổ biến: Vào phần Bố cục → Thêm một tiện ích bài đăng phổ biến.

Lưu ý bạn phải để tiện ích đấy trên blog của bạn hiện đoạn trích và hình ảnh thu nhỏ.

Thêm vào CSS

Bây giờ đến phần chỉnh sửa giao diện cho nó, bạn vào Mẫu → Chỉnh sửa HTML → Tìm đến thẻ ]]></b:skin> và thêm đoạn CSS sao vào bên trên

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

Ở đây nếu bạn sẵn có đoạn CSS nào sẵn tùy chỉnh cho tiện ích bài đăng phổ biến cho blog của bạn, thì minh khuyến cáo nên xóa nó đi để tránh tình trạng phá vỡ giao diện này.

Thêm vào JS

Tiếp tục đến phần tối ưu cho ảnh của tiện ích mà mình đã nói ở đầu bài, cũng tại phần Chỉnh sử HTML → Tìm đến thẻ </body> và thêm đoạn mã sau lên trê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>

Trong giao diện của bạn nếu đã có sẵn mã nhúng của jquery rồi thì bạn có thể bỏ đoạn màu đỏ đi. Nếu bạn không chắc bạn có thể bỏ thử đoạn màu đỏ, nếu tiện ích của bạn có hình ảnh tốt thì có nghĩa là template của bạn đã có rồi.

Lời kết

Như vậy là bạn đã có một tiện ích bài đăng phổ biến thật tinh tế và đẹp, cảm ơn giao diện thật đẹp cho tiện ích từ AllBloggerTricks. Nếu có thắc mắc gì cần hỗ trợ về tiện ích bạn hãy để lại nhận xét cho mình.

Về việc làm sao mà tự nhiên ảnh thu nhỏ của tiện ích rõ hơn sau khi sử dụng JS thì bạn có thể tham khảo qua các bài viết trước của mình:

• Tăng kích thước thumbnail không giảm chất lượng ảnh cho Blogger
• Một số thủ thuật nhỏ với ảnh tải lên ở Blogger và Picasa