Cảm ơn bạn đã tham gia khảo sát
Đóng góp của bạn sẽ giúp chúng tôi dần cải thiện về mặt nội dung cũng như giao diện của trang.

Khanh Blogger

Khanh Blogger

Style Popular Post (Bài đăng phổ biến) tuyệt đẹp thích hợp cho chủ đề ảnh của Blogspot

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 ! 

Bình luận

XEM NHIỀU TRONG TUẦN

Bạn có thể quan tâm