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>将文字包围起来

10 条评论:

匿名 说...

可以输入汉字阿,如图:
http://hi.baidu.com/ihai/album/Post/2b904a1068c953fcc3ce7993.html

难道说在space中可以,在blogger中不可以,你试一下看看

匿名 说...

试过了,完全正常,可能你需要下载最新的live writer ,你下的可能是第一个beta版吧……
http://g.msn.com/8SEENUS030000TBR/WriterMSI


不过在writer中竟然不可以调整文字大小(当然可以在html编辑下修改大小了),而且颜色也就那么几个,这也太不方便了吧—

咖啡鱼 说...

第一个版本根本不支持Blogger beta,我当然不会下错。
对中文输入法支持的不好

putt 说...

呵呵,这个问题昨天让我找到解决方法
可以试试;)

Unknown 说...

好了,我也作出我的blogger了……
http://rpsh.blogspot.com/

开始怀疑想到底是我们在玩blog,还是blog玩我们啊……

zEUS. 说...

嘿嘿,又改模板啦~~
你每次改模板总能给人耳目一新的感觉~

Unknown 说...

如何设置blogger自带的那个引用,我怎么改不了


还有,这个

creat a link

有什么作用

咖啡鱼 说...

不同的模板可能不一样,如果你没有在Fonts&colors里找到设置引用的地方的话,那么你要去CSS里查找并做相应的修改。
Creat a link是反向链接

Unknown 说...

恩,偶搞定了

反向连接有什么用啊,举个例子呗

Unknown 说...

受益匪浅