如何为Blogger平台托管的食谱网站添加打印按钮？

嘿，很高兴能帮你搞定在Blogger食谱博客里添加打印按钮的需求！我整理了两种实用方案，从快速上手到自定义美化，你可以根据自己的需求来选：

这个方法最简单，直接调用浏览器原生打印功能，几步就能搞定：

• 登录Blogger后台，进入「主题」板块，点击「自定义」旁边的「编辑HTML」
• 找到你想放置打印按钮的位置（比如每个食谱帖子的开头或结尾区域，一般对应模板里的<div class='post-body'>前后），插入这段代码：

<button onclick="window.print()">打印食谱</button>

• 保存模板就大功告成啦！用户点击按钮后，会直接触发浏览器的打印界面，他们可以自行选择打印机、调整打印参数。

默认打印会带出博客的导航栏、侧边栏、页脚这些无关内容，用这个方案可以只保留食谱核心内容，体验更好：

1. 先添加美化后的打印按钮，同样在编辑HTML里插入这段代码（可以放在食谱内容的顶部或底部）：

<style>
.print-btn {
  background-color: #f47c7c;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  margin: 15px 0;
}
.print-btn:hover {
  background-color: #e06666;
}
</style>
<button class="print-btn" onclick="window.print()">打印这份食谱</button>

2. 接着添加打印专属的CSS样式，把这段代码放到模板的<style>标签内部，或者单独新建一个<style media="print">标签：

@media print {
  /* 隐藏所有不需要打印的元素，按需调整选择器 */
  header, footer, .sidebar, .print-btn, .blog-pager, .comments-section {
    display: none !important;
  }
  /* 让食谱内容占满打印页面宽度，去掉多余边距 */
  .post-body {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* 可选：调整字体大小和行高，让打印内容更清晰易读 */
  .post-body p, .post-body h2, .post-body h3 {
    font-size: 12pt !important;
    line-height: 1.5 !important;
  }
}

3. 保存模板后，预览帖子就能看到好看的按钮，打印时只会显示食谱的文字、图片这些核心内容啦！

小提示 #

• 如果你的Blogger主题支持「帖子模板」功能，直接把按钮代码加到帖子模板里，以后新建食谱帖子会自动带上打印按钮，不用每次手动添加~
• 记得用浏览器的「打印预览」（Ctrl+P / Command+P）测试效果，随时调整CSS直到满意为止。

内容的提问来源于stack exchange，提问作者sir charles