为Blogger添加引用和代码引用功能

这个其实不是一个很必要的功能,不过却可以让我们的文章更整齐。

其实Blogger本身就有引用的功能了,不过其实不是说很好看,也不够明显。而至于代码引用,Blogger本身也没有刻意区分出来。

添加方法其实很简单,只是添加两段CSS代码而已。
方法如下:
1. Blogger后台——设计——修改HTML,然后记得备份模板。

2. 在]]></b:skin>之前添加以下代码:

/* Code And Blockquote
----------------------------------------------- */
CODE {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 8pt;
overflow:auto;
background: #f0f0f0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzy9JxC4opvhqrjZXvYMIaKyAGb9fe9O5v8FuyfqrJcv_6aUpaG-djnj1jKqU2oRKXtx5FveWr08St5ufi9CT2PdbqJbYg29eYPWBU1dr9Cyyj4ncGTDpa_bFxer5RXcCxvdr0E8iCFmY/) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:200px;
line-height: 1.2em;
}

.post blockquote {margin:1em 20px;padding-left:8px;background: #F5F8E8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibw9JTyMmJDE2atp9muyoPE5m13JGlGhYe4WFMpItZjcz-A_WFXZHc1mLDPj8SLd6l-sMn0PvjrR0gAU-YpNdqLuFGNt7yB3zvx0lplfbciMABZS36AGYBg4APLh2yGzMvHJPWuIXU0Wc/) no-repeat;border-Left:2px solid #D0EC98;border-right:2px solid #D0EC98;background-position: left top;
}


红色那两段是图片的链接,你也可以使用你自己喜欢的图片,不过请重新上传到自己的空间。

3. 保存。

4. 以后只要是引用的话,便把引用的话放在<blockquote>及</blockquote>,代码引用则放在<code>及</code>之间就行了。

例子:
<blockquote>引用文字</blockquote>

<code>引用代码</code>

linfavourite signature
进一步查看我的其它网站

评论

发表评论

相关文章