14 thg 12, 2012

Thêm bình luận mới nhất có avatar và trích dẫn cho blogger



Mình sẽ chia sẻ với các bạn một phong cách bình luận mới nhất với avatar trong hình tròn, và đi kèm cùng với các trích đoạn bình luận.
Bạn có tùy chọn để thay đổi ảnh avatar của ẩn danh.



Làm cách nào để thêm Comments mới nhất cho blogger


Vào blogger > Bố cục > Thêm widget HTML/Javascript
Dán code bên dưới vào nội dung của HTML/Javascript sau đó Lưu lạ 

----------------------------------------------------------------------------------------------------------
<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,
 showMorelink = false,
 moreLinktext = "More »",
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://trollfile.googlecode.com/files/w2b%20recent%20comments%20with%20avatars.js"></script>
<script type="text/javascript" src="http://thienha-tran2000.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>
----------------------------------------------------------------------------------------------------------

  • Thay đổi thienha-tran2000 thành tên blog của bạn
  • 5 (cả hai thông số ở code trên) là số comments mới nhất bạn muốn hiển thị
  • 60 là kích cỡ avatar
  • 40 là số ký tự trích dẫn của comments
Chúc các bạn thành công..hi

14 nhận xét: