Thứ Ba, 28 tháng 10, 2014

Xin chào các bạn, hôm nay Hồng Designer lại chia sẻ với các bạn một tiện ích cho thể thiếu cho blogger, đó chính là tiện ích Widget comments mới đẹp cho blogger. Một dạng mới của widget commens đó là bản V3 cực đẹp.


Add Widget comments mới đẹp cho blogger

Để thêm tiện ích này vào blog của bạn, trước tiên đi vào Blog Bố cục → Thêm Widget → HTML / JavaScript. Thêm mã dưới đây vào.
<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: #222;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='Your Name';
//]]>
</script>
<script type="text/javascript" src="http://files.allbloggertricks.com/Scripts/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>
Sau khi đã thêm code các bạn tiến hành cài đặt chỉnh sửa

Thiết lập thông số Widget

  • NumComments - Hiển thị số lượng comments trong widget 
  • ShowAvatar - Ẩn hoặc hiện avata 
  • AvatarSize - Kích thước của avatar trong các widget
  • RoundAvatar - Thay đổi hình dạng của avata (tròn, vuông ...) 
  • Characters - Số ký tự hiển thị trong nhận xét. 
  • DefaultAvatar - Ảnh thay thế khi comments không có avata. 
  • AdminBlog - Thay thế thành tên admin blog. 
Sau khi thực hiện tất cả những thay đổi bấm lưu mẫu. Và kiểm tra thành quả của mình nhé.

0 nhận xét:

Đăng nhận xét