Thêm Widget comments mới nhất cho Blogspot

Một Widget khá cần thiết cho người dùng Blogger đó là thống kê comments mới gần đây nhất.
Khi các bạn đã quen thuộc với blogspot thì có rất nhiều tiện ích bạn muốn thêm hoặc tùy chỉnh theo ý muốn của mình. Blogger cũng hỗ trợ khá tốt những
tiện ích (Widget ) sử dụng CSS, HTML, Javascript...

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.
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.

Demo trực tiếp tại site: Làm đẹp khỏe

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

• Bước 1: Vào bảng điều khiến Blogger -> 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  = 5,
 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 lại tiện ích và xem kết quả. :)

Xem nhiều thủ thuật hơn tại Lãng Tử Studio

Đừng quên Like và Share nếu thấy bài viết bổ ích


Nguồn: itviet360