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

本文旨在提供一种简单有效的方案，帮助 Blogger 用户移除博客文章中自动出现的“Read More”按钮。通过添加一段 CSS 代码，即可轻松隐藏该按钮，从而优化博客的阅读体验，并使文章展示更符合个人需求，无需手动添加跳转链接。

Blogger 博客平台有时会在文章列表中自动添加“Read More”按钮，即使文章内容已经完全显示。这可能会影响博客的整体美观和用户体验。以下步骤将指导你如何通过 CSS 代码隐藏这些不必要的按钮。

操作步骤：

1. 进入主题编辑页面： 首先，登录你的 Blogger 账号，进入博客的控制面板。在左侧菜单栏中，选择“主题”选项。

2. 编辑 HTML 代码： 在主题页面中，点击“自定义”按钮旁边的向下箭头，然后选择“修改 HTML”。这将打开 Blogger 的 HTML 编辑器。

3. 查找指定代码： 在 HTML 编辑器中，使用快捷键 Ctrl+F (Windows) 或 Cmd+F (Mac) 打开搜索框。在搜索框中输入 ]]></b:skin> 并按下回车键。这将定位到主题 CSS 样式定义结束的位置。

   

   AI新媒体文章

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

   75

   查看详情

4. 添加 CSS 代码： 在找到的 ]]></b:skin> 代码之前，粘贴以下 CSS 代码：

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

5. 保存更改： 点击编辑器右上角的“保存”按钮。Blogger 会自动保存你的更改并更新博客主题。

代码解释：

• .jump-link: 这是一个 CSS 类选择器，用于选择所有具有 jump-link 类的 HTML 元素。
• .flat-button: 这也是一个 CSS 类选择器，用于选择所有具有 flat-button 类的 HTML 元素。
• .ripple: 这是一个 CSS 类选择器，用于选择所有具有 ripple 类的 HTML 元素。
• display: none;: 这个 CSS 属性用于隐藏选定的 HTML 元素。

注意事项：

• 备份主题： 在修改 HTML 代码之前，强烈建议备份你的博客主题。如果出现任何问题，你可以轻松恢复到之前的状态。
• 清除缓存： 保存更改后，如果“Read More”按钮仍然存在，请尝试清除浏览器缓存并重新加载博客页面。
• 主题差异： 不同的 Blogger 主题可能使用不同的 CSS 类名。如果上述代码无效，请检查你的主题 HTML 代码，找到“Read More”按钮对应的 CSS 类名，并相应地修改代码。
• 其他方法： 某些 Blogger 主题可能提供了直接移除“Read More”按钮的选项。在修改 HTML 代码之前，请检查主题设置，看看是否有相关的配置选项。

总结：

通过以上步骤，你可以轻松移除 Blogger 博客文章中自动出现的“Read More”按钮，从而优化博客的阅读体验。 记住，在修改 HTML 代码之前备份你的主题，并确保清除浏览器缓存以查看更改效果。 如果遇到问题，请参考主题文档或寻求社区帮助。

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