Blogger beta：自定义Blog里的引用

这是鱼的第一百篇Blog。写一个不算Hack的“Soft-hack”。呵呵。效果就像本篇贴子的引用。

你觉得还喜欢这样的效果吗，当然颜色是可以自定义的也终于发现Windows live writer的BuG了，在Html编辑模式下就不能用汉字了，不得不Copy。不过的确非常喜欢这个编辑器，太方便了。昨天有人问Live writer是什么，它是微软Live战略里的一个软件，离线写Blog，Google一下吧，或者去官方博客看看（可以从那儿下载）。

言归正传，我们知道在默认的Blogger里也存在一个“引用”，不过这个小小的Hack更实用些，用它来说明一些东西还是非常方便的。

这个Hack里用到三个变量，我们要先在Head里定义它。如鱼定义的代码为：

<Variable name="pullquoteBgColor" description="pullquoteBgColor" type="color" default="#660000" value="#003366">
<Variable name="pullquoteTextColor" description="pullquoteTextColor" type="color" default="#660000" value="#ffff66">
<Variable name="pullquoteborderColor" description="pullquoteborderColor" type="color" default="#660000" value="#e6e6e6">

里面有一些初始值，不要太关心，过一会我们可以方便的在“Fonts & Colors”里个性的设置它。

定义了变量我们就可以在CSS中添加以下CSS来“描述”这个区域了，在这里你也可以完全让它变成任意你喜欢的样子。

下面是CSS：

.pullquote {
width: 15%;
background-color:$pullquoteBgColor;
background-image: url(图片地址);
background-repeat: no-repeat;
color:$pullquoteTextColor;
float: right;
border:1px solid $borderColor;
font-weight:bold;
line-height:120%;
padding:40px 10px 10px 10px;
margin-top:10px;
margin-left:10px;
}

里面有一张图片，你需要自己保存并上传，最后改变CSS里的地址，右键另存这张图片

在最后的最后，我们要到“Fonts & Colors”里面点击鼠标来挑选我们喜欢的颜色，你会发现里面多了三个颜色变量。分别是：pullquoteBgColor（背景颜色）、pullquoteTextColor（文字颜色）、pullquoteborderColor（边框颜色）。如果你想在贴子里使用引用的时候，需要用＜span class="pullquote"＞＜/span＞将文字包围起来