Style mới lạ. Cực chất. Nếu cảm thấy blog của mình vẫn chưa được đẹp cũng như còn sơ sài thì bài viết này sẽ giúp blog của bạn trở nên lộng lẫy hơn !

Một style thân quen nhưng mới lạ được viết bởi Chandeep (BlogStricks). Nó sẽ thích hợp với một số bạn cũng như một số blog làm về chủ đề Ảnh cũng như chia sẻ hình ảnh. Các theme chia sẻ thủ thuật khi thêm style này vào cũng sẽ làm cho blog bạn trở nên chuyên nghiệp hơn. Bắt đầu thôi.


Các bước thực hiện

Bước 1: Trước tiên, bạn cần vào bố cục > Thêm tiện ích > Bài đăng phổ biến và chỉnh các thông số tùy chỉnh


Bước 2: Chèn CSS sau vào phía dưới thẻ <style>:
.popular-posts ul { counter-reset: popcount; margin: 0 !important; padding: 0 !important; } .popular-posts ul li { height: 160px; max-width: 300px; list-style: none !important; margin: 0 0 10px !important; overflow: hidden; padding: 0 !important; position: relative; border: 0; } .PopularPosts .item-thumbnail { margin: 0; } .PopularPosts ul li img { display: block; float: left; padding: 0; width: 300px; height: 160px; } .PopularPosts .item-title { bottom:0; left: 0; right: 0; padding-bottom: 0; position: absolute; z-index: 999; } .PopularPosts .item-title a { background: rgba(51, 51, 51, 0.6); color: #fff; display: block; font-size: 16px; line-height: normal; padding: 20px; text-transform: capitalize; } .popular-posts ul li:hover .item-title a { color: #FFF; } .popular-posts ul li:before { color: #fff; content: counter(popcount, decimal); counter-increment: popcount; float: left; list-style-type: none; padding: 5px 12px; position: absolute; text-shadow: 1px 1px #000, 1px 1px #000; top: 0; }

Lưu ý: Trước khi chèn CSS này vào thì bạn cần xóa CSS Popular Post cũ đi nhé

Bước 3: Tạo hiệu ứng và nén ảnh cho Popular Post bằng cách chèn đoạn script sau ngay trên thẻ </head>:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
Popular Post img resize script $(document).ready(function(){$(".popular-posts li .item-thumbnail a img",$(this)).each(function(){var src=$(this).attr("src").replace('/s72-c/','/s0-c/');$(this).attr("src",src)})});
//]]> </script>
Nếu blog của bạn đã có thư viện Jquery thì hãy xóa dòng in đậm đi nhé !

Như vậy mình đã hướng dẫn các bạn cách tạo một Popular post với style cực chất. Bây giờ hãy lưu lại và hưởng thụ nhé. Đừng ngại bình luận phía dưới nếu có thắc mắc hay những câu hỏi liên quan.
Chúc các bạn thành công !

Tags