RSS

Thứ Ba, 16 tháng 12, 2014

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...
- Một tiện ích được nhiều bạn dùng Blogspot quan tâm và hỏi Người chia sẻ đó là bình luận mới gần đây 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.
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: Quảng cáo Online

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é. các bạn hãy vào đây chọn mã màu nhé : Bảng mã màu 

  • Bước 3: Lưu lại tiện ích và xem kết quả. thật tuyệt vời.

  • Các bạn thấy bài viết hữu ích hãy like hộ mình nhé :) Thanks
  •  Người chia sẻ 

0 nhận xét:

Đăng nhận xét

Thiết kế website rẻ đẹp

Dịch vụ marketing / Dịch vụ Quảng cáo online / Đào tạo Marketing online / Trà Ô Long Nhân Sâm / Trà Ô Long Tứ Quý / Trà Hoa Lài / Trà Xanh Bảo Lộc / Gạch Thẻ Taicera / Gạch Thẻ / The Marq quan 1/ The Marq/ PP Beauty Academy/ Ailes Fashion/ Mỹ Phẩm Phụ Kiện Việt Châu/ Dịch vụ marketing online / Tranh Dan Tuong / Tranh Dán Tường /