2009年6月21日星期日

blogger template就是这样出来的 (3)

这一篇说的是signature和其他有关blogpost的疑难杂症.
因为我看到无论是大哥哥大姐姐还是小弟弟小妹妹都遇到这方面的问题.


到底要怎样把签名或者可爱的图片放在文章下方的details的旁边呢?

其实这个我到现在还没有搞清楚它的原理,
但是我还是照着原本得到的资料把code编辑得好好的.



在Edit HTML那里找寻/* Posts的整段code.
这是有关你的文章的code.

1.
如果你想要在每篇文章的地段加上一些分割线,
可以找这个:
.post {
margin: 0 0 1.5em;
padding-bottom: 1.5em;

如果是要放普通的border,
可以这样打:
border-bottom: 1px dashed $borderColor;
如果你要放图片,
就可以这样打:
background: url(图片地址) repeat-x fixed bottom center;
请不要放太过大的图片.

2.
你平时upload上blog的图片,
你不想要看到碍眼的border,
先找到这个:
.post img {
padding: 4px;
border: 1px solid $borderColor;

把border那行删掉就行了.

3.
现在,
是弄signature的时候了.
先找到这段先:
.post-footer {
margin: -.25em 0 0;
color: $textColor;
font-size: 87%;
}

.post-footer .span {
margin-$endSide: .3em;
}

在这些的下面or上面,
打下这段code:
.post-footer {
font-size: 90%;
padding: 30px 20px 32px 110px;
background: url(图片地址) left no-repeat;
}

红色的是padding,
我不懂要怎样教你,
反正你就慢慢调整吧~
第一个是上面,
第二个是左边,
第三个是下面,
第四个(110px)的是右边.
慢慢调整到你的signature能够完美呈现出来吧~

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

关于那个signature,
我知道有一个网站有得弄到美美的signature.
可是它的颜色选项不多,
而且带着link,
有时候自己看了总觉得不完美.

上次我向大家介绍过Dafont.com,
你们可以去那里download了漂亮的字体,
然后使用photoshop或其他软件弄出漂亮的signature.
弄好后upload到photobucket,
然后用它的url和我的方法弄那个signature.

由于我的signature的尺寸和你们的不一样,
所以padding的上下左右你们必须自己慢慢调整.
一边调整一边不断地预览,
一定会达到最佳效果的 =)
不要太过心急,
只要有耐心一定能弄好的~

2 个脚印:

Jiaxin 说...

慢慢学着。。。

你好厉害。

一下子写了那么多。。。

语婕 @ 姝俐 说...

我并不是很厉害,
只是比很多人多了一股傻劲~

我相信只要愿意学就一定能学到.
毕竟你我都有IT的天分.

我真正厉害的是打华语字很快 =)
所以写了很多,
读者还来不及看我就写着第四篇了~