回到首页
订阅Luke瞎折腾
找资源前务必先看这里!!
Blogger技巧
免费空间推荐
Luke的网络收藏夹
Luke的网络硬盘
控制台
新建日志

2009/02/17

强化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瞎折腾


收藏本文
相关文章:

0 评论:

发表评论

有问题请留言,Luke帮你解决。问了方便回答,请尽量不要匿名。