移除 Blogger 博客文章中的多余 "Read More" 按钮_技术学堂

移除 Blogger 博客文章中的多余 "Read More" 按钮

发布时间：2025-10-29 09:19

发布者：网络

浏览次数：

移除 blogger 博客文章中的多余

本文提供了一个简单易懂的教程，旨在帮助 Blogger 用户移除博客文章中自动出现的 "Read More" 按钮。通过添加一段 CSS 代码，即可轻松隐藏所有文章中的该按钮，即使文章本身没有使用跳转链接。

Blogger 博客平台有时会在每篇文章的末尾自动添加一个 "Read More"（阅读更多）按钮，即使文章内容已经完整显示。这可能会影响博客的整体美观性和用户体验。本教程将指导你如何通过简单的 CSS 代码修改来移除这些多余的按钮。

操作步骤：

进入 Blogger 主题设置：

首先，登录你的 Blogger 博客，进入后台管理页面。在左侧导航栏中，找到并点击 "主题"（Theme）选项。
编辑 HTML 代码：

在主题设置页面，点击 "自定义"（Customize）按钮旁边的向下箭头，选择 "修改 HTML"（Edit HTML）。这将打开 Blogger 的 HTML 编辑器。
查找 CSS 结束标签：

在 HTML 编辑器中，使用快捷键 Ctrl + F (Windows) 或 Cmd + F (Mac) 搜索以下代码：
```
]]></b:skin>
```
这个标签通常标志着 CSS 样式的结束位置。
添加 CSS 代码：
万相营造
阿里妈妈推出的AI电商营销工具
168 查看详情
在找到 ]]> 标签之前，紧挨着它的上方，粘贴以下 CSS 代码：
```
.jump-link.flat-button.ripple{display:none;}
```
这段代码的作用是将类名为 jump-link flat-button ripple 的元素隐藏起来。由于 "Read More" 按钮通常使用这些类名，因此这段代码可以有效地隐藏它们。
保存更改：

点击 HTML 编辑器右上角的 "保存"（S*e）按钮，保存你所做的更改。
检查效果：

返回你的博客首页或任意文章页面，刷新页面，检查 "Read More" 按钮是否已被成功移除。

代码解释：

注意事项：

在修改 HTML 代码之前，建议先备份你的主题。这样，如果出现任何问题，你可以轻松地恢复到之前的状态。
如果上述方法无效，可能是因为你的 Blogger 主题使用了不同的类名来定义 "Read More" 按钮。你可以使用浏览器的开发者工具（通常按 F12 键打开）来检查按钮的 HTML 结构，并找到正确的类名，然后修改 CSS 代码。例如，如果按钮的类名是 read-more-button，那么 CSS 代码应该修改为 .read-more-button { display: none; }。
确保你的 CSS 代码正确地插入到 ]]> 标签之前。如果插入位置不正确，可能会导致样式无法生效。

总结：

通过上述步骤，你可以轻松地移除 Blogger 博客文章中自动生成的 "Read More" 按钮，从而提升博客的整体美观性和用户体验。记住，在修改 HTML 代码之前备份你的主题，并仔细检查代码的正确性。如果遇到任何问题，可以查阅 Blogger 的官方文档或寻求社区的帮助。

以上就是移除 Blogger 博客文章中的多余 "Read More" 按钮的详细内容，更多请关注其它相关文章！