Bạn đã quá nhàm chán với các giao diện Popular Posts / Bài đăng phổ biến mà Blogger mặc định cho bạn? Bạn không thích nó vì nó quá đơn điệu và giống quá nhiều người, vì ai cũng sử dụng nó? Bạn muốn có sự thay đổi và điểm nhấn trong Popular Posts / Bài đăng phổ biến? Đừng quá lo lắng, hôm nay Terocket sẽ giới thiệu đến các bạn một thủ thuật blogger nâng cao dành cho Popular Posts / Bài đăng phổ biến. 

 >>Hiển thị ảnh thumbnail của bài viết bất kỳ trên tiện ích Popularposts của blogger
>>Bo tròn bài viết trong Popular Post cho Blogger
>>Rainbow PopularPosts với thumbnail và số cho blogger(V4)
>>Multi Color Popular Posts có số đếm cho blogspot (v3)
>>Popular Posts dạng Slides trượt dọc cho Blogger
>>Tùy chỉnh Popular Posts đơn giản của blogger/blogspot
>>Popular posts dạng ảnh có số đếm từ jquery v2 cho blogger
>>Popular Post dạng ảnh Gallery cho blogspot
>>Tiện ích Bài đăng phổ biến bố trí chiều ngang - vers 2
>>Cool Popular Posts style đẹp cho bài đăng phổ biến
>>Màu nền riêng cho bài viết xem nhiều nhất
>>Thêm hiệu ứng tooltips cho rencent post và popuplar post cho blogger
>>Làm đẹp tiện ích Popular Posts (hiệu ứng tooltip)
>>Popular Posts dạng ảnh xoay tròn từ CSS3 cho blogger
>>Ẩn một bài viết bất kỳ trong tiện ích Popular Posts
>>Hiển thị đoạn trích dẫn dạng title cho bài đăng phổ biến
>>Hiển thị bài đăng phổ biến dạng ảnh chuyển động
>>Popular pots có có số đếm và title trích dẫn

Popular Posts / Bài đăng phổ biến được Terocket giới thiệu với giao diện cực kỳ đẹp, cực kỳ trang nhã, hiện đại với các hiệu ứng, hình ảnh to, phông chữ to, đập vào mắt người đọc là sự ấn tượng khó thể phai nhòa. Bạn sẽ không hối tiếc với Popular Posts / Bài đăng phổ biến phiên bản V1 mà Terocket cung cấp sau đây. Nào, cùng Terocket thiết kế Popular Posts / Bài đăng phổ biến cho blogger hiện đại và thật phá cách nhé.

Demo Popular Posts / Bài đăng phổ biến V1

Live Demo

Cách thức thực hiện thủ thuật Popular Posts / Bài đăng phổ biến V1 cho blogger:

Bước 1 - Đầu tiên bạn cần tạo một tiện ích Popular Posts / Bài đăng phổ biến cho blog của mình

Bằng cách vào Blog Title → Layout → Add Widget → Popular Posts. Tiếng Việt có nghĩa là Vào Blogger → Bố cục → Thêm tiện ích → Bài đăng phổ biến.

Bạn cần làm như hình ảnh nhé!

Bước 2 - Thêm CSS cho Popular Posts / Bài đăng phổ biến V1

Bước đầu tiên bạn cần vào Blog Title → Template → Edit HTML. Nhấn Ctrl + F và tìm kiếm ]]></b:skin> trong hộp tìm kiếm. Sau đó hãy dán đoạn mã code dưới đây vào trước ]]></b:skin>

/* Popular Posts Widget customized by Terocket.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 ý là bạn phải gỡ bỏ hết tất cả các CSS của Popular Posts / Bài đăng phổ biến trước đây mà bạn đã từng làm nhé.

Bước 3 - Chèn Javascript Popular Posts / Bài đăng phổ biến vào trước </body>

Thường thì Popular Posts / Bài đăng phổ biến không cần phải sử dụng Javascript, nhưng với Popular Posts / Bài đăng phổ biến V1 thì cần sử dụng nhé.

Đầu tiên bạn cần vào Blog Title → Template → Edit HTML và Nhấn Ctrl + F và tìm kiếm </body>. Sau đó chép đoạn mã code dưới đây vào trên </body> nhé.

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

Bạn nhớ là nếu trong mẫu của mình đã có jquery.min.js rồi thì không cần sử dụng jquery.min.js trong đoạn code trên nữa, lúc đó thì xóa đoạn link của nó trong đoạn code  ở trên đi nhé!

Bước 3 - Lưu mẫu và tận hưởng thành quả nào.

Terocket - An Thành Adthinks