Popular Post Widget Với phong cách v2

Vài ngày trở lại tôi nhận được một yêu cầu từ một trong những độc giả của chúng tôi để làm hướng dẫn cho thêm bài phổ biến mới của chúng tôi. Các widget bài phổ biến mới là một phần của thiết kế mới . Một số loại bài phổ biến phong cách widget được phát hành bởi nhiều blogger.

- Phổ biến bài viết là một tiện ích mà hiển thị đọc nhất hoặc đăng blog phổ biến với tiêu đề, biểu tượng và mô tả dựa trên blog phân tích số liệu thống kê. Mặc dù tiện ích phổ biến bài viết sẽ làm cho khách truy cập tiếp tục đọc bài viết của bạn từ bài hiển thị trong các Widget.

- Vì vậy, làm một hấp dẫn đối với Widget phổ biến bài viết sẽ bắt mắt hơn cho người đọc. Hướng dẫn này sẽ giúp bạn thực hiện Popular Post Widget của bạn như trong một hấp dẫn sử dụng CSS3.

- Trước hết bạn nên thêm bài phổ biến với đoạn, trước và tiêu đề trong blog của bạn và làm theo các bước dưới đây để thêm phụ tùng nồi phổ biến hấp dẫn.

Đi vào Blogger → Template → Edit HTML

Tìm : ]]> </ b: skin> và thêm mã CSS sau đây trước khi nó.

.PopularPosts .widget-content ul li {
padding: 0;
list-style:none;
background: #eee;
margin: 10px 0px;
border:0;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
}
.PopularPosts .item-title {
padding: 0 5px;
}
.PopularPosts .item-snippet {
padding: 0 5px 5px;
}
.PopularPosts .widget-content ul li {
overflow: hidden;
}
.PopularPosts .widget-content ul li:hover {
background: #000;
}
.PopularPosts .widget-content ul li:hover .item-snippet {
color: #fff;
}
.PopularPosts .widget-content ul li:hover .item-title a {
color: #fff;
}
.PopularPosts .item-thumbnail {
height: 100px;
overflow: hidden;
margin-right:0;
}
.PopularPosts img {
width:100%;
margin-top: -40px;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
}
.PopularPosts ul li:hover .item-thumbnail img {
margin-top: -150px;
}

Bạn nên thực hiện jQuery trong blog của bạn nếu không được nêu ra. Để thực hiện jQuery, thêm đoạn code dưới đây nhỏ trước : </ head>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>

- Mặc định phổ biến bài viết kích thước ảnh là 72pm, nhưng kích thước sẽ không bao gồm hấp dẫn. Chúng ta cần phải thay đổi kích thước hình ảnh để phù hợp với các bên. Vì vậy, sử dụng JavaScript chúng ta có thể thay đổi kích thước thay vì CSS. Nếu chúng ta sử dụng CSS chúng ta có thể điều chỉnh độ rộng, sẽ mất chất lượng hình ảnh. JavaScript chiều rộng thay đổi kích thước hình ảnh mặc định 72px đến 296px.

- Thêm mã sau đây trước : </ body> trong mẫu của bạn.

<script type='text/javascript'>
    //<![CDATA[
    var newSize = 296;  // this is the new thumbnail size, you can change this
    $(".popular-posts .item-thumbnail img").each(function() {
        var oldSize = $(this).attr("width");
        $(this).attr("width", newSize); $(this).attr("height", newSize);
        $(this).attr("src", $(this).attr("src").replace("/s"+oldSize+"-c/", "/s"+newSize+"-c/"));
    });
    //]]>
  </script>

- Cuối cùng Lưu nó. Xem kết quả trong blog của bạn sống.

- Tôi hy vọng bạn thích tiện ích này rất nhiều. Bài viết này đặc biệt dành riêng cho độc giả của chúng tôi.