分类标签

日志 (82) 分享 (39) Dota2 (22) 3D 打印机 (21) 学习 (21) 网赚教学 (18) 树莓派 (17) 纸模型 (15) DIY (14) 影评 (13) 旅游 (13) Raspberry PI (12) 创作 (12) 游戏 (11) 3D Print (9) 搞笑 (9) 知识库 (8) 神魔之塔 (8) 评测 (8) 日誌 (7) vlog (4) 激励 (4) 短篇故事 (4) 视频 (4) quadcopter (2) 动物 (2) 黑苹果 (2) slo-mo (1) 开箱 (1)
Order Your 3D Print here.

【教学】如何使用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