如何在Google Blogger博客页面中使用外部CSS文件且无需修改模板？

嘿，刚好我之前帮朋友折腾过这个，不用动核心模板也能轻松加自定义样式，比如你要的codeBox代码块，给你捋两个最实用的方法：

方法一：用Blogger的HTML/JavaScript小工具（全局生效） #

这个是最推荐的，一次设置全站生效，不用碰模板代码：

1. 先托管你的外部CSS文件
   你得把写好的CSS文件放到一个公开可访问的地方，比如Google Drive（免费又方便）：

   • 上传你的CSS文件到Drive，右键文件→「分享」→设置权限为「知道链接的任何人都可查看」
   • 复制文件的分享链接，比如https://drive.google.com/file/d/xxxxxx/view?usp=sharing，然后把它改成直接访问的格式：把/file/d/xxxxxx/view?usp=sharing替换成/uc?export=download&id=xxxxxx，这样Blogger才能正确加载这个CSS文件。

2. 添加HTML小工具到博客

   • 登录Blogger后台，进入你的博客→点击左侧的「布局」（Layout）
   • 找个不影响页面布局的位置（比如页面最底部的「页脚」区域），点击「添加小工具」
   • 在弹出的小工具列表里选「HTML/JavaScript」
   • 在内容框里粘贴这段代码，把你的CSS文件URL换成刚才改好的链接：

     <link rel="stylesheet" type="text/css" href="你的CSS文件URL">
     

   • 保存小工具，然后预览博客，你的外部CSS就生效了！

方法二：直接在单篇文章里引入（单篇生效） #

如果只想给某一篇文章加样式，不用全局设置：

• 打开要编辑的文章，切换到「HTML」模式（别用可视化编辑器）
• 在文章最开头粘贴<link>标签引入你的外部CSS，或者直接把CSS代码写在<style>标签里：
  示例（直接写样式）：

  <style>
  .codeBox {
    background: #f6f8fa;
    padding: 16px;
    border-radius: 6px;
    font-family: Consolas, monospace;
    overflow-x: auto;
    border-left: 3px solid #3572b0;
  }
  </style>
  

• 然后在文章里需要放代码的地方，用<div class="codeBox">包裹你的代码内容就行：

  <div class="codeBox">
  // 这里是你的代码
  function helloWorld() {
    console.log("Hello Blogger!");
  }
  </div>
  

小提醒 #

• 确保你的外部CSS文件是公开可访问的，不然Blogger加载不到样式
• 如果不想托管外部文件，直接把CSS代码写到HTML小工具的<style>标签里也是完全可以的，适合代码量不大的情况
• 测试样式的时候，记得清空浏览器缓存，避免看不到最新效果

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