A ha-U scared me, bady!: 强化Blogger的引用功能（二）

2009年2月16日星期一

强化Blogger的引用功能（二）

其实昨天就在色彩斑斓找到这个方法了，不过由于改到最后提示变量失败再加上时间很晚，所以就没有继续弄下去。今天闲来无事，又试了下，终于成功了。

老规矩，和之前的“强化Blogger的引用功能”作下比较：
1.由于定义了变量，所以可以更加方便地更改引用区的颜色。
2.引用区长度需要根据不同模板自己设定。
3.编辑日志时同样需要调用函数。
4.配合“让Blogger首页显示文章摘要时”功能时稍微有点问题(会紧贴着引用区，不过可以解决)。

演示：

下面来说实现方法——

依次进入“控制台”-“布局”-“修改HTML”，先备份一下当前模板，然后查找
<head>
在其下方添加如下代码：

<Variable name="pullquoteBgColor" description="引用区背景色" type="color" default="#660000" value="#ffffee">
<Variable name="pullquoteTextColor" description="引用区文字色" type="color" default="#660000" value="#000000">
<Variable name="pullquoteborderColor" description="引用区边框色" type="color" default="#660000" value="#669922">

再查找
]]></b:skin>
再其上方添加如下代码：

/*引用区*/
.pullquote {
width: 90%;
background-color:$pullquoteBgColor;
background-image: url(http://sunrrr.googlepages.com/quotes_grey.gif);
background-repeat: no-repeat;
color:$pullquoteTextColor;
float: left;
border:1px solid $pullquoteborderColor;
font-weight:bold;
line-height:120%;
padding:40px 10px 10px 10px;
margin-top:10px;
margin-left:10px;
}

然后保存模板，小功告成。

注：
1.修改模板后可以在“字体和颜色”中修改引用区相关的颜色。
2.上面代码中红色的数值请根据各自的Blogger模板做相应调整，对应的是引用区的宽度，多试几次就行了。
3.上面代码中蓝色的数值是引用区内“引号”的图片地址，可以根据个人喜好换成自己喜欢的图片。
4.在想使用引用功能的时候，需要用<span class="pullquote"></span>将文字包围起来，如：
<span class="pullquote">在此输入想引用的内容</span>

-------------------------------------------------------------------------------------
以上图片和文字均为原创，转载请注明转自Luke瞎折腾！

收藏本文