本文提供了一个简单易懂的教程，旨在帮助 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) 搜索以下代码：
]]>
这个标签通常标志着 CSS 样式的结束位置。
添加 CSS 代码：
AI新媒体文章
专为新媒体人打造的AI写作工具，提供“选题创作”、“文章重写”、“爆款标题”等功能
75 查看详情
在找到 ]]> 标签之前，紧挨着它的上方，粘贴以下 CSS 代码：
.jump-link.flat-button.ripple{display:none;}
这段代码的作用是将类名为 jump-link flat-button ripple 的元素隐藏起来。由于 “Read More” 按钮通常使用这些类名，因此这段代码可以有效地隐藏它们。
保存更改：
点击 HTML 编辑器右上角的 “保存”（Save）按钮，保存你所做的更改。
检查效果：
返回你的博客首页或任意文章页面，刷新页面，检查 “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 代码正确地插入到 ]]> 标签之前。如果插入位置不正确，可能会导致样式无法生效。
总结：
通过上述步骤，你可以轻松地移除 Blogger 博客文章中自动生成的 “Read More” 按钮，从而提升博客的整体美观性和用户体验。记住，在修改 HTML 代码之前备份你的主题，并仔细检查代码的正确性。如果遇到任何问题，可以查阅 Blogger 的官方文档或寻求社区的帮助。
以上就是移除 Blogger 博客文章中的多余 “Read More” 按钮的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/587049.html
微信扫一扫 
支付宝扫一扫 
