Hướng dẫn thêm widget bình luận mới nhất cho Blogspot

Một tiện ích được nhiều bạn dùng Blogspot quan tâm đó là bình luận mới nhất. Với tiện ích này giúp blog của bạn thể hiện ra những ai đã quan tâm và bình luận nội dung của bạn. Bạn sẽ dễ dàng nắm bắt được những chia sẻ, thắc mắc của mọi người trên blog.

Tiện ích sử dụng mã CSS3 để làm hiệu ứng rê chuột khá mượt và sáng. Các bạn hoàn toàn chỉnh sửa màu sắc, kích thước và những vấn đề tùy chọn liên quan theo ý của mình được.

Cách thêm Widget comments mới nhất cho Blogspot:

• Bước 1: Vào bảng điều khiến Blogger -> Bố cục -> Thêm tiện ích (Widget) -> HTML/Javascript
• Bước 2: Dán code dưới đây vào tiện ích vừa thêm:

<style type="text/css" scoped>
ul.allbloggertricks_recent{list-style:none;margin:0;padding:0;}
.allbloggertricks_recent li{background:none!important;display:block;clear:both;overflow:hidden;list-style:none;border:1px solid transparent;border-radius:9px;max-height:100px;-webkit-transition-duration:.5s;-moz-transition-duration:.5s;-o-transition-duration:.5s;transition-duration:.5s;-webkit-transition-property:0;-moz-transition-property:0;-o-transition-property:0;transition-property:transform;margin:0 0 6px!important;padding:3px!important}
.allbloggertricks_recent li:hover{border:1px solid #ddd;
-webkit-transform:rotate(6deg);-moz-transform:rotate(6deg);-o-transform:rotate(6deg) }
.allbloggertricks_recent a {text-decoration:none;}
.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;width:35px;height:35px}
.allbloggertricks_recent li span{margin-top:4px;color: #FFF;display: block;font-size: 12px;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    var
 numComments  = 4,
 showAvatar  = true,
 avatarSize  = 35,
 roundAvatar = true,
 characters  = 40,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
 maxfeeds=50,
 adminBlog='Tên Admin';
//]]>
</script>
<script type="text/javascript" src="https://fileitviet360.googlecode.com/svn/trunk/abt-recent-commentsv3.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=allbloggertricks_recent&amp;&amp;max-results=50">
</script>

Trong đó các giá trị bạn cần lưu ý:
- numComments: Số comments hiển thị ra khung.
- characters: Số ký tự ngắn của comment hiển thị ra
- #FFF: Màu chữ của ký tự ngắn comment hiển thị ra. Tùy vào màu nền của tiện ích mà bạn chọn màu chữ này cho phù hợp và nổi nhé.

• Bước 3: Lưu Mẫu và xem kết quả.

Tweet