Tạo khung Comments cho Blog (kiểu 2)

Blogspot có cung cấp cho người dùng tiện ích Rencent comments (các comments gần đây) nhưng với tiện ích này thì khung comments trông có vẻ đơn điệu, tính thẩm mỹ không cao. Hôm nay, tôi chia sẻ thêm một cách để bạn có một khung Recent comments khá đẹp.

 
Thủ thuật này khá đơn giản, bạn đăng nhập vào Blog > Chọn thiết kế > Thêm tiện ích HTML/Javacript rồi dán tất cả các đoạn code phía dưới vào.

CODE:

<style type="text/css">
    ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
    .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
    .w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
    .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
    .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
    numComments     = 5,
    showAvatar     = true,
    avatarSize     = 60,
    roundAvatar    = true,
    characters     = 40,
    defaultAvatar     = "http://www.gravatar.com/avatar/?d=mm",
    hideCredits    = true;
//]]>
</script>
<script type="text/javascript" src="https://sites.google.com/site/dunghennessyjs/comment.js"></script>
<script type="text/javascript" src="http://www.giapqb.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

Bây giờ, bạn chỉ cần thay đổi địa chỉ Blog của mình vào dòng lệnh màu đỏ và bấm Lưu lại là xong

Quá đơn giản phải không các bạn? Thử xem!!!

Browse More Articles

Tweet

Written by Anonymous

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.