Popular Posts For VietnamGuidebook

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ướ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='https://googledrive.com/host/0Bxd6TC84WVUeMjV6MVdCclc3a0E'/>

<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