【教学】如何使用Blogsspot 在HTML 以五个简单步骤做一个Code的框架(傻瓜级)

很多学习编程的朋友也会尝试制作属于自己的教程
说到编程 打Code肯定少不了
既然是编程教程 需要有一个code 的框架也少不了

Blogspot本身原设没有支持<code></code>的
需要自行添加
但是在那个复杂的修改过程之前 我们来做个简单的傻瓜级教程。

先上个效果

CODE:

这里输入内容

以上这个效果的code 其实是一堆code演变的
看起来可能会很乱 其实有心 这就是傻瓜级的活了。



1,复制下面的code

CODE:

<dl class="codebox" style="background-color: white; border: 1px solid rgb(216, 216, 216); color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 19.2399997711182px; margin-bottom: 1.5em; padding: 3px;"><dt style="border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; font-weight: bold; line-height: 2em; margin-bottom: 3px; text-transform: uppercase;">CODE:</dt><dd style="line-height: 2em; margin: 0.5em auto;"><code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(225, 225, 232); color: #8b8b8b; display: block; font-family: Monaco, 'Andale Mono', 'Courier New', Courier, mono; height: auto; line-height: 1.3em; margin: 2px 0px; max-height: 200px; overflow: auto; padding: 5px 4px 3px;">这里输入内容</code></dd></dl><br/>

2.在部落格发帖的左上角点HTML

3.预计你要多少个框 就粘贴多少个 
*为了好看 在HTML粘贴完一个便空一行吧 免得自己有需要修改的时候自己乱套了

效果如下：

CODE:

这里输入内容

CODE:

这里输入内容

CODE:

这里输入内容

4.回到Compose 页面

5.直接在框框上写入 或Paste 你的code 

就这样完成啦~

CODE:

12345

CODE:

上山打老虎

CODE:

结果打到小老鼠

本次简单复制法 到此为止，
欢迎大家订阅我的部落格
有更好意见的朋友也欢迎和我分享

9月5日添加其他款式


type your code here


在这个code 最前和最后加 < 和 </code>

code style="background: url(https://sites.google.com/site/klcintwimages/Code_BG.gif) 0% 0% repeat-y rgb(240, 240, 240); border: 1px solid rgb(204, 204, 204); color: #333333; display: block; font-family: 'Courier New'; font-size: 10pt; line-height: 1.2em; max-height: 200px; overflow: auto; padding: 10px 10px 10px 21px;">type your code here