2009-08-05

【教学】美化部落格

很多人会问我关于部落格美化的事情,所以我就发一篇教学文了。
首先,很多人问我如何在标题下加入图片:


在outer wrapper那段语法结束后,就加入以下这一段语法,如果你的HTML没有这一段的话。


/* Headings
----------------------------------------------- */

h2 {
background: url("http://dl4.glitter-graphics.net/pub/1371/1371454vc5usewxv4.gif") no-repeat bottom left;
margin:.6em 0 0;
height:30px;
padding:0 0 10px 0;
font-size:110%;
font-weight:bold;
line-height: 1.4em;
letter-spacing:.1em;
color:#000000;
}

在background url中,你可以把红色的那一段修改成你要的图片,而图片我本人是大力推荐http://glitter-graphics.com/里的divider图片,那里的长度都很适合作为heading哦!

漂亮headings预览图:



================================================

之后呢,就是在comment旁边的图片(看到那只很可爱的狗没有?):



同样的,你要加入一些语法啦:

/* Posts<<<<<(你要找到这个字)

过后,在post-footer再下一个段中,加入被蓝色highlighted的语法,里面深蓝色的字体是图片的url,这个你同样的可以去http://glitter-graphics.com/去找animated graphics,那里的可爱图片很多。

animated graphics 预览图:


====================================================
.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}
.post-footer {
font-size: 90%;
padding: 30px 30px 30px 90px;
background: url(http://dl9.glitter-graphics.net/pub/679/679789gs2dqrx3bd.gif) left no-repeat;

}
(后面还有一些语法我就不copy出来了)

=============================================

其实美化部落格很简单,就要看看你有没有时间和精力和心思喽,对了,还要提醒大家一点,如果部落格是一蓝色为主,那刚才的图片最好是蓝色或者和蓝色很相像的颜色,因为这样给人往去会比较好看及和谐哦。
p/s:有问题可以留言问我,我会在那里一一解答。如果发现我很多天都还没回答,就是代表我人在samarahan,不在sibu,我在samarahan比交通游戏,要过好几天才会回来。
笔于
2009年8月5日
9.51a.m.

16 則留言:

剑魔.令狐冲 提到...

那个蘑菇图案很可爱=)

瑂玹 提到...

thanks

刺猬博客~哦屁~ 提到...

我想問你,你那個上面的那個蒲公英是哪里弄的?

嘉CacinG進 提到...

哇~~好可爱哦!

mm....我记得有人问过我怎么弄~~
忘记是谁了 XD

乌龟·就是我 提到...

谢谢分享~
有maple story的蘑菇哦~
回去弄个!
(超级maple迷~)哈哈……

杨宝贝 提到...

我想知道怎样弄home,contact me那些

叶宝宝 kyeritz 提到...

嗯嗯嗯
这的确对我很有用!
(盗~

名仔 提到...

大家都因为这篇受益咯!!!

哈哈哈 ^^

IM MS. X.PEI-小沛™ ★ 提到...

谢谢你瓦
有空我会弄看

IM MS. X.PEI-小沛™ ★ 提到...

不行
放了没出现的
==

嘉俽 Jiaxin 提到...

谢谢你的教学呢!

祈颖 提到...

剑魔.令狐冲
哈哈,是啊,那里的东西都很可爱

瑂玹
不客气,还怕我写的太乱你们看不懂呢

刺猬博客~哦屁~
等下把link给你

嘉CacinG進 说...
哈哈,虫子很健忘,以后叫你健忘虫子好了(揍)

乌龟·就是我 说...
弄个吧,哈哈

杨宝贝
等下把link给你

叶宝宝 kyeritz
欢迎盗取^^(误)

名仔
希望你们看得懂喽,哈哈.

IM MS. X.PEI-小沛™ ★ 说...
@@真的吗?等下我去你的blog看一下

嘉俽 Jiaxin 说...
不客气^^

Y0r0k0bi x Jocelyn 提到...

谢谢哦!那么背景的教学呢?在哪好背景的图片?

IM MS. X.PEI-小沛™ ★ 提到...

不行瓦
有msn吗?
那边请教><

阿Don 提到...

pro 到..
我好久没去改了
打算12月尾才改=p

janelle_l 提到...

上了一堂课!谢谢!

Related Posts Plugin for WordPress, Blogger...