移除 Blogger 博客文章中的“Read More”按钮

本教程旨在帮助 Blogger 用户移除博客文章中自动出现的“Read More”（阅读更多）按钮，即使文章中没有使用跳转链接。通过简单的 CSS 代码修改，您可以轻松隐藏该按钮，从而改善博客的视觉呈现效果。

在 Blogger 博客中，即使您没有手动插入跳转链接，系统也可能会自动在每篇文章末尾显示“Read More”（阅读更多）按钮。这可能会影响博客的整体美观，尤其是在内容较短的文章中。以下步骤将指导您如何通过自定义 CSS 样式来隐藏这些自动生成的按钮。

步骤 1：进入 Blogger 主题设置

首先，登录您的 Blogger 博客后台。在左侧导航栏中，找到并点击“主题”选项。

步骤 2：编辑 HTML

在主题设置页面，点击“自定义”按钮旁边的下拉箭头，然后选择“修改 HTML”。这将打开 Blogger 的 HTML 编辑器，您可以在这里直接编辑博客的主题代码。

步骤 3：查找 ]]></b:skin> 标签

在 HTML 编辑器中，使用快捷键 Ctrl+F (Windows) 或 Cmd+F (Mac) 打开搜索框。在搜索框中输入 ]]></b:skin> 并按下回车键。编辑器将自动定位到该标签所在的位置。

步骤 4：添加 CSS 代码

在找到 ]]></b:skin> 标签后，将以下 CSS 代码直接粘贴到该标签之前：

AI新媒体文章

专为新媒体人打造的AI写作工具，提供“选题创作”、“文章重写”、“爆款标题”等功能

75

查看详情

.jump-link.flat-button.ripple{
  display:none;
}

这段 CSS 代码的作用是选择所有 class 包含 jump-link、flat-button 和 ripple 的元素，并将它们的 display 属性设置为 none，从而隐藏这些元素。由于“Read More”按钮通常具有这些 class，因此这段代码可以有效地隐藏它们。

步骤 5：保存主题

在添加完 CSS 代码后，点击编辑器右上角的“保存”按钮。Blogger 将自动保存您的主题修改。

步骤 6：检查效果

保存成功后，刷新您的博客页面，查看“Read More”按钮是否已被成功移除。如果一切顺利，您应该不再看到这些按钮出现在您的文章末尾。

注意事项：

• 备份主题： 在修改 HTML 代码之前，强烈建议您备份当前的主题。这样，如果出现任何问题，您可以轻松地恢复到原始状态。
• CSS 选择器： 上述 CSS 代码针对的是 Blogger 默认主题中的“Read More”按钮样式。如果您的博客使用了自定义主题，按钮的 class 可能不同。您需要检查按钮的 HTML 结构，并根据实际情况修改 CSS 选择器。可以使用浏览器的开发者工具（通常按 F12 键打开）来检查 HTML 元素。
• 清除缓存： 如果您在修改后没有看到立即生效，请尝试清除浏览器缓存，然后重新加载页面。

总结：

通过以上简单的 CSS 代码修改，您可以轻松地移除 Blogger 博客文章中自动生成的“Read More”按钮，从而改善博客的视觉效果。记住，在修改任何 HTML 代码之前，务必备份您的主题，以防万一。如果问题仍然存在，请检查您的主题是否使用了自定义样式，并相应地调整 CSS 选择器。

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