Popular Posts Với Ảnh Đại Điện Lớn Cho Blogger - Blogspot

Đối với một Blog bất kỳ thì Tiện ích Popular post là rất cần thiết bởi nó chứa các bài viết đọc nhiều người xem nhất, từ đó sẽ giúp khách tham quan sẽ ở lại lâu hơn blog của bạn. Hôm nay mình sẽ hướng dẫn các bạn tạo một Popular đẹp cho blog thân yêu của mình.

Mục lục:

• Mục Đích
• Thực Hiện
• Nâng Cao  
• Lời Kết

Mục Đích

• 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.
• Tạo sự ấn tượng khó thể phai nhòa đối với đọc giả

Thực Hiện

1. Các bạn vào Blogger -> Mẫu -> Chỉnh sửa HTML, sau đó dán đoạn javascript sau vào trước thẻ đóng </head> 

JS<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>

Chú ý: trước khi dán các bạn nên tìm trong blog mình với từ khóa "jquery" để xe Blog có hay chưa. Nếu có rồi thì bỏ qua bước trên nha

2. Tiếp tục các bạn tìm thẻ đóng ]]></b:skin> hay thẻ đóng </style> và đặt đoạn CSS sau vào trước thẻ đóng đó

CSS/* Popular Posts */
.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 ý: Các bạn nên xóa hết các Css liên quan đến Popular Post cũ trước nha. Nếu các bạn không biết thì tìm kiếm với từ Popular là ra

3. Tiếp các bạn dán đoạn javascript sau vào trước thẻ đóng </body>

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
    $('.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>

4. Save Template (Lưu Mẫu) lại.
5. Để thưởng thức thành quả thì các bạn vào Blogger -> Bố cục ->  Thêm tiện ích ->Bài đăng phổ biến -> chỉnh các thông số như hình:

Chú ý: các bạn có thế thay đổi các thông số sau

•  Tiêu Đề 
•  Hiện thị tối đa .... bài đăng 

Demo
click to view

Nâng Cao

Cái này để vậy đẹp rồi khỏi chỉnh sửa gì hết

Lời Kết

Vậy là mình đã hướng dẫn các bạn tạo Popular Posts Cho Blogger - Blogspot, nếu có thắc mắc các bạn cứ comment bên dưới hoặc liên hệ mình, mình sẽ giải đáp. Chúc các bạn thành công

Nguyễn Đăng Hậu

Đam mê công nghệ, lập trình web, game đua xe và nhiều thứ khác. Thích học hỏi, tìm tòi nhiều kiến thức hay bổ ích. Thích chia sẽ cho mọi người, bạn bè về những kiến thức học được.