博客园美化（7）博客底部自定义评论样式

博客底部自定义评论样式

样式效果

编辑：

展示：

使用方法

1.在自己的博客园中找到管理->设置页面
2.在页脚 HTML 代码中插入

<!--自定义评论样式-->
  <!--拥有聊天一样的评论功能心不心动，在页脚里添加以下-->
<link  type="text/css" rel="stylesheet" href="https://blog-static.cnblogs.com/files/zouwangblog/comment.css">
<script type="text/javascript">
$(function(){
    $('#blogTitle h1').addClass('bounceInLeft animated');
    $('#blogTitle h2').addClass('bounceInRight animated');
    // 删除反对按钮    $('.buryit').remove();
    initCommentData();
});
function initCommentData() {
    $('.feedbackItem').each(function() {
        var text = $(this).find('.feedbackListSubtitle .layer').text();
        // 将楼层信息放到data里面
        // $(this).find('.blog_comment_body').attr('data-louceng', text.replace(/^#/g, ''));
        if($(this).find('.feedbackListSubtitle .louzhu').length>0) $(this).addClass('myself');
        var avatar = $(this).find('> .feedbackCon > span').html() || 'http://pic.cnitblog.com/face/sample_face.gif';
        $(this).find('> .feedbackCon > .blog_comment_body').append('<img class="user-avatar" src="'+avatar+'"/>')
    });
}

$(document).ajaxComplete(function(event, xhr, settings) {
  // 监听获取评论ajax事件
  if(settings.url.indexOf('/mvc/blog/GetComments.aspx') >= 0) {
    initCommentData();
  }
});
</script>

---

参考链接美化博客园大全