修改 Blogger Template 教程 | GFisH-鱼的心情记事本
GFisH-鱼的心情记事本: 修改 Blogger Template 教程

Saturday, June 27, 2009

修改 Blogger Template 教程

很多有写部落格的人都会面对模板不适合自己的感觉,然而,尝试去改过后,全部layout没有如预期效果好却反而跑到完。下面是一些需要知道的事项,过后我在慢慢的教大家换背景还有调整宽度等等,可能会比较复杂,但是改模板我的gfishdiary是用了差不多3天才改成功的。要试试改的话,就开一个test blog来改吧,不好拿现在这个live的来改。

选择与分析技巧
首先,我们要选择比较方便我们改的模板;当然,如果你技巧了得的话,用blogger提供的就很好改了。如果只要改改小地方的话,就去google找自己喜欢的模板吧。

我把现在市面上的模板背景图形分成3大类,这个是我自己分的,外面不是这样分的。

第一类,比较简单的,就背景图加header融合成一张大图片,这个模板通常都是比较复杂的图片背景,而且load很慢(file size太大)。自由度很低,宽度是不能改的;要就整张图改掉,不能一部分改变。这个通常是那些艺术家用的,以他们自己而造的,不推荐使用。

第二类就很常见的,背景用一张图让他重覆呈现,然后做一个header叠在背景上面,但是很多都是做长方形的header,这样的话你的body不可能大过那个header了,改的话很不美观。这样的模板也是不能调宽度的,美观问题。

第三类呢,就web site会比较多见,blog就比较少见。但是这个模式的自由度很高,宽度可以无数量的增加,就看你的screen多大,他会自己调整。美观上也很不错,整个page的两旁都可以放一些图片来点缀。但是,唯一的缺点是,这个很费时费力,blog通常不搞到那么复杂。

下面是一些模板example,第一个example是type1的,他的layout是由一张图片构成的,然后用css把title还有一些字体排上去的。

第二个呢,因为那个header,我们就无法改他的宽度了(改了不美),除非你把原本的header拉大。

第三个就比较聪明的type2,他的啐纸边是可以repeat的,请按大图仔细看看。但是唯一不好的是,他那个啐纸边上面有蓝蓝的点缀,使得我们的背景要使用蓝色的来配合它。

第四个是gfishdiary的模板,背景是repeat的,而header我没有用长方形,所以body宽度那边怎样调都不会太难看。


要如何分辨你的模板是那一类型的呢?
首先打开你的code,然后去寻找url(http://xxxx.com/xxxxxx.gif)这样的字体。就好象下图的link,可能是jpg,gif或者png这3种。找到后,copy他的link然后用你的IE/Firefox打开看看就知道了,通常我们只要看最前面的几个就可以分辨了。

就如上面的example(type2第一个),background: #fff url(http://subagya.googlepages.com/introincorp.jpg) no-repeat; 这一行我就可以发现到他的背景没有和header一起连在一张图。然后我们在慢慢的找出其他图的用处,在慢慢研究到底我们可以改到哪里。

暂时就写到这里吧,下一篇就会有很多coding了。有问题请留言gfishdiary。祝你找模板愉快,哈哈。

css layout 篇
http://gfishdiary.blogspot.com/2009/07/blogger-template.html
背景篇
http://gfishdiary.blogspot.com/2009/07/body-background-color-ccddbb-background.html
Margin & Padding
http://gfishdiary.blogspot.com/2009/08/blogger-template-margin-padding.html

16 comments:

小雪 said...

有时为了模板可以搞好几天,
真的累死了。

sylvia said...

我的CSS 更改为
background:#f5b3c0 url(http://img1.jc001.cn/img/644/712644/1174131041991.jpg)reapt;
有没有错?
为什么Perview 看不出效果
图片的link是在google里找的。
是不是只有一个地方会出现“backgroug"?
对不起我是新手。

GFisH said...

sylvia,
你的code是有点点问题的~

reapt的拼法是repeat,还有repeat之前要有一个空格。图片最好下载下来然后上载到自己的空间,那么就不用怕源文件被删除。

正确的code如下:
background:#f5b3c0 url(http://img1.jc001.cn/img/644/712644/1174131041991.jpg) repeat;

lili said...

我想要特别的背景..
类似这样的..
http://free-blogger-template-layout.blogspot.com/2009/05/tired-girl-blogger-layout.html
要怎样弄呢?

lili said...

http://www.createblog.com/website-templates/35993-funhouse/

为什么这个背景不能用呢?
是不是哪里有问题吗?

GFisH said...

Lili,

http://www.createblog.com/website-templates/35993-funhouse/
http://free-blogger-template-layout.blogspot.com/2009/05/tired-girl-blogger-layout.html
我大约查过了,都ok呀~
请给我看看你的page,我帮你找出问题。

只要copy他的xml code,放在edit html那边就可以了~要保险一点的话就copy他所有图片去其他picture hosting。

lili said...

他的xml code是哪里一个?
我copy了,然后paste
它就出现

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The markup in the document following the root element must be well-formed.

这两行字。

我的blog是
http://love-babyzaizai.blogspot.com/

GFisH said...

Lili,

funhouse那个,他的code不完整,上面少了很多。我看还是放弃那个吧。

而tiredgirl那一个是可以用的,下面我就是apply这个template的例子~
http://gfishtemplate.blogspot.com/

要找template的话,找blogger xml template,以前旧的blogger template是不能用了。

lili said...

我有点不明白的说。呵呵

这个
http://btemplates.com/
能不能用呢?

GFisH said...

以前blogger的template是纯css的,一两年前,他们引入了xml技术,所以呢,template上会有一些不同,这样旧的template就不能用了。

http://btemplates.com/
因该可以用,但是你要先试试看才可以肯定。

lili said...

可是我找不到他的code..

GFisH said...

lili,
在download那边下载,然后unzip你会看到xml的file,你用notepad来开。
copy & paste在你的blog layout应该就可以了。

下面我用了你给website里面的green field template~看起来是没有问题的。
http://gfishtemplate.blogspot.com/

lili said...

谢谢你哦..
我做到了。

=)

тuuвао.兔宝.♥ said...

为什么我看到别人的Blog弄了Layout..还是可以用那个"布局"..而我的..弄上去后..完全用不到"布局"的..

GFisH said...

兔宝,你要用什么“布局”?有example看吗?

bluesky said...

上班無聊就想說弄一下模板好了..我谷歌了幾個,弄了好幾個小時(囧)
哈哈..希望可以成功,在谷歌找到你這個,有比較清楚了,感謝你.! 希望可以成功。

Related Posts with Thumbnails