Vua Tên Miền: Chuyên gia Tư vấn và Mua bán tên miền đẹp, đảm bảo uy tín và giá trị! Hãy liên hệ: Mr. Nguyễn Đình Chiến (.com), Mobi-Zalo: 0912 191 357 để được tư vấn, hổ trợ miễn phí! Trân trọng cảm ơn quý khách đã ủng hộ VuaTenMien.Com trong thời gian qua!
kinh doanh, bán hàng, tư vấn, bảo hiểm Những cá nhân, tổ chức, đại lý,muốn bán, hợp đồng bảo hiểm
Tuesday, March 3, 2015

Popular Posts Widget thanh nhã tuyệt đẹp cho blogger

Muốn một sự thanh lịch và tuyệt đẹp cho widget Popular Posts trên blog blogger của bạn? Có vẻ bạn đã hạ cánh vào đúng nơi rồi đấy. Hôm nay mình chia sẻ đến các bạn một widget Popular Posts độc đáo của trang All Blogger Tricks do mình chỉnh sửa đôi chút để phù hợp với tiếng việt hơn.

Các bạn có thể xem demo bằng cách nhấp vào nút bên dưới:
Sau khi xem demo, nếu các bạn thấy thích có thể thực hiện các bước bên dưới để đưa nó vào blog của mình.

Thêm một tiện ích Popular Posts

Đầu tiên từ giao diện quản lí blog đi vào Bố cục → Thêm Tiện ích → Bài đăng phổ biến. Thêm các widget ở vị trí mong muốn và nhấn Lưu.Nhớ chọn các mục hình ảnh thu nhỏ và đoạn trích nhé.

Thêm CSS

Vào chỉnh sửa HTML và thêm vào trước thẻ đóng ]]></b:skin> đoạn CSS bên dưới:
/* Popular Posts Widget */
.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: Tahoma; 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; }
Cũng lưu ý rằng bạn phải gỡ bỏ tất cả các mã CSS Popular Posts trước đây (nếu có) trước khi thêm một hoặc kết quả này sẽ là sự kết hợp của cả hai.

Thêm JavaScript

Thông thường các tiện ích Popular Posts không yêu cầu bất kỳ đoạn mã JavaScript nào, nhưng điều này cần để thay đổi tất cả kích thước hình ảnh và rút gọn nội dung.

Các bạn thêm vào trước thẻ đóng </body> đoạn JS sau:
<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( 's200-c', 's400' );});});
</script>
<script type='text/javascript'>
//<![CDATA[
// Popular Posts customization by AllBloggerTricks.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>
Sau khi thêm các bạn Lưu mẫu lại. Loại bỏ đoạn màu đỏ nếu nó đã có nó trong template của bạn.
tcaviet@gmail.com

0 comments:

Post a Comment

BÀI ĐƯỢC XEM NHIỀU NHẤT:

kinh doanh, bán hàng, tư vấn, bảo hiểm Những cá nhân, tổ chức, đại lý,muốn bán, hợp đồng bảo hiểm