如何为Blogger添加类似指定站点的评论/聊天插件及CSS样式

嘿，我帮你梳理了一套完整的实现方案，既能给Blogger添加评论/聊天风格的展示效果，还能应用你指定的博主图标样式，具体步骤如下：

一、先搞定评论系统基础配置 #

如果你想用类似参考站点的原生评论改造效果，先确保你的Blogger评论系统已经启用：

• 登录Blogger后台，进入设置 → 评论
• 把「谁可以评论」设置为符合你需求的选项（比如「任何人」）
• 保存设置，这样你的文章底部就会显示评论区了

如果偏好第三方聊天式评论插件（比如Disqus、Facebook评论），可以直接去对应平台注册获取嵌入代码，然后在Blogger主题的HTML编辑模式下，把代码粘贴到</body>标签前即可。不过参考站点看起来是基于原生评论做的样式定制，下面重点讲这个方案。

二、添加自定义CSS实现聊天风格+博主图标 #

接下来把你提供的CSS和额外的聊天气泡样式整合，步骤如下：

1. 登录Blogger后台，进入主题 → 自定义 → 高级 → 添加CSS
2. 粘贴以下代码（注意你提供的base64图标编码要确保完整，如果截断了可以补全或者替换成自己的图标URL）：

/* 替换博主评论的默认图标 */
.comments .comments-content .icon.blog-author { 
  background-repeat: no-repeat; 
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpK...);
  background-size: contain;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

/* 聊天式评论气泡布局 */
.comments .comments-content .comment-thread {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 10px 0;
}

.comments .comments-content .comment {
  max-width: 75%;
  padding: 12px 18px;
  border-radius: 20px;
  line-height: 1.5;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* 博主评论样式（右侧蓝色气泡） */
.comments .comments-content .blog-author.comment {
  align-self: flex-end;
  background-color: #007bff;
  color: #ffffff;
}

/* 普通访客评论样式（左侧灰色气泡） */
.comments .comments-content .non-author.comment {
  align-self: flex-start;
  background-color: #f0f2f5;
  color: #333333;
}

3. 点击「应用到博客」保存样式

三、验证效果 #

完成后打开你的博客文章页面，查看评论区：

• 博主的评论图标应该已经替换成你指定的样式
• 评论会以聊天气泡的形式左右分布，和参考站点的风格一致
  如果图标不显示，检查base64编码是否完整，或者直接替换成图标在线URL（比如url("你的图标链接")）

内容的提问来源于stack exchange，提问作者Kavindu Chathuranga