很多有写部落格的人都会面对模板不适合自己的感觉，然而，尝试去改过后，全部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
Saturday, June 27, 2009
修改 Blogger Template 教程
Subscribe to:
Post Comments (Atom)
16 comments:
有时为了模板可以搞好几天，
真的累死了。
我的CSS 更改为
background:#f5b3c0 url(http://img1.jc001.cn/img/644/712644/1174131041991.jpg)reapt;
有没有错？
为什么Perview 看不出效果
图片的link是在google里找的。
是不是只有一个地方会出现“backgroug"?
对不起我是新手。
sylvia，
你的code是有点点问题的～
reapt的拼法是repeat，还有repeat之前要有一个空格。图片最好下载下来然后上载到自己的空间，那么就不用怕源文件被删除。
正确的code如下：
background:#f5b3c0 url(http://img1.jc001.cn/img/644/712644/1174131041991.jpg) repeat;
我想要特别的背景..
类似这样的..
http://free-blogger-template-layout.blogspot.com/2009/05/tired-girl-blogger-layout.html
要怎样弄呢？
http://www.createblog.com/website-templates/35993-funhouse/
为什么这个背景不能用呢？
是不是哪里有问题吗？
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。
他的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/
Lili,
funhouse那个，他的code不完整，上面少了很多。我看还是放弃那个吧。
而tiredgirl那一个是可以用的，下面我就是apply这个template的例子～
http://gfishtemplate.blogspot.com/
要找template的话，找blogger xml template，以前旧的blogger template是不能用了。
我有点不明白的说。呵呵
这个
http://btemplates.com/
能不能用呢？
以前blogger的template是纯css的，一两年前，他们引入了xml技术，所以呢，template上会有一些不同，这样旧的template就不能用了。
http://btemplates.com/
因该可以用，但是你要先试试看才可以肯定。
可是我找不到他的code..
lili,
在download那边下载，然后unzip你会看到xml的file，你用notepad来开。
copy & paste在你的blog layout应该就可以了。
下面我用了你给website里面的green field template~看起来是没有问题的。
http://gfishtemplate.blogspot.com/
谢谢你哦..
我做到了。
=）
为什么我看到别人的Blog弄了Layout..还是可以用那个"布局"..而我的..弄上去后..完全用不到"布局"的..
兔宝，你要用什么“布局”？有example看吗？
上班無聊就想說弄一下模板好了..我谷歌了幾個，弄了好幾個小時（囧）
哈哈..希望可以成功，在谷歌找到你這個，有比較清楚了，感謝你.! 希望可以成功。
Post a Comment