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

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

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

操作步骤：

1. 进入 Blogger 主题设置：

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

2. 编辑 HTML 代码：

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

3. 查找 CSS 结束标签：

   在 HTML 编辑器中，使用快捷键 Ctrl + F (Windows) 或 Cmd + F (Mac) 搜索以下代码：

   ]]></b:skin>

   登录后复制

   这个标签通常标志着 CSS 样式的结束位置。

4. 添加 CSS 代码：

   

   AI新媒体文章

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

   75

   查看详情

   在找到 ]]></b:skin> 标签之前，紧挨着它的上方，粘贴以下 CSS 代码：

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

   登录后复制

   这段代码的作用是将类名为 jump-link flat-button ripple 的元素隐藏起来。由于 "Read More" 按钮通常使用这些类名，因此这段代码可以有效地隐藏它们。

5. 保存更改：

   点击 HTML 编辑器右上角的 "保存"（Save）按钮，保存你所做的更改。

6. 检查效果：

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

代码解释：

• .jump-link: 选择器，用于选择所有类名为 jump-link 的元素。
• .flat-button: 选择器，进一步筛选出类名为 flat-button 的元素。
• .ripple: 选择器，继续筛选出类名为 ripple 的元素。
• display: none;: CSS 属性，用于隐藏选中的元素。

注意事项：

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

总结：

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

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