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.

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

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:

13 bình luận

  1. avatar says

    lúc 18:21 23 tháng 6, 2014

    xin cho hỏi cái theme của demo trên là theme gì vậy
    có thể share cho mình dc ko
    cãm ơn bạn trước

  2. avatar says

    lúc 18:53 23 tháng 6, 2014

    Template mặc định của Blogger mà bạn :D
    Bạn vào Mẫu >> Tại phần Đơn giản nó là template đứng thứ 2 ấy.

  3. avatar says

    lúc 18:12 24 tháng 6, 2014

    oh :D cám ơn cậu nha

  4. avatar says

    lúc 18:15 24 tháng 6, 2014

    ah ko :D ý mình là hỏi
    cái template http://experimentalabt.blogspot.in/2012/03/hfh.html này nó tùy biến rồi :D mình cứ tưởng nó mặc định có rồi
    dù sao cũng thanks cậu nhiều

  5. avatar says

    lúc 08:36 30 tháng 11, 2014

    Hay quá ! cảm ơn anh nhiều!

  6. avatar says

    lúc 08:41 30 tháng 11, 2014

    anh ơi blog em không có đoạn mã này ]]> anh giúp em với ạ!

  7. avatar says

    lúc 08:42 30 tháng 11, 2014

    sao copy đoạn mã này mà nó lại như vậy nhỉ "]]> "

  8. avatar says

    lúc 08:44 30 tháng 11, 2014

    spam nhiều quá rồi! cái đoạn mã đầu tiên anh chỉ để copy vào ấy ạ!

  9. avatar says

    lúc 08:46 30 tháng 11, 2014

    Thành thật xin lỗi quá, nhờ anh xóa giúp em! tìm được rồi ạ -_-

  10. avatar says

    lúc 14:18 12 tháng 3, 2016

    sao khi em cài đặt xong thì hình ảnh bị nhòe, chữ bị lệch font và các bài đăng chồng chất lên nhau vậy anh?

  11. avatar says

    lúc 14:18 12 tháng 3, 2016

    sao khi em cài đặt xong thì hình ảnh bị nhòe, chữ bị lệch font và các bài đăng chồng chất lên nhau vậy anh?

  12. avatar says

    lúc 16:42 13 tháng 3, 2016

    Có thể là lỗi xung đột css với css đã có trước đó trên blog của bạn

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.