Bạn đã quá nhàm chán với các giao diện Popular Posts / Bài đăng phổ biến mà Blogger mặc định cho bạn? Bạn không thích nó vì nó quá đơn điệu và giống quá nhiều người, vì ai cũng sử dụng nó? Bạn muốn có sự thay đổi và điểm nhấn trong Popular Posts / Bài đăng phổ biến? Đừng quá lo lắng, hôm nay Terocket sẽ giới thiệu đến các bạn một thủ thuật blogger nâng cao dành cho Popular Posts / Bài đăng phổ biến.
Popular Posts / Bài đăng phổ biến được Terocket giới thiệu 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, đập vào mắt người đọc là sự ấn tượng khó thể phai nhòa. Bạn sẽ không hối tiếc với Popular Posts / Bài đăng phổ biến phiên bản V1 mà Terocket cung cấp sau đây. Nào, cùng Terocket thiết kế Popular Posts / Bài đăng phổ biến cho blogger hiện đại và thật phá cách nhé.
Demo Popular Posts / Bài đăng phổ biến V1
Cách thức thực hiện thủ thuật Popular Posts / Bài đăng phổ biến V1 cho blogger:
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ạn cần làm như hình ảnh nhé!
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='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {$('.PopularPosts img').attr('src', function(i, src) {return src.replace( 's72-c', 's400' );});});
</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.
Terocket - An Thành Adthinks
Comments[ 0 ]
Đăng nhận xét