2011年3月5日星期六

为部落格编制复合花纹背景

很多朋友都拥有自己的部落格吧?可是e哥相信也有很多朋友都对HTML无从下手吧?
今天e哥就教大家更改部落格HTML的一些原始码语法。非常简单!我们就从部落格背景开始!马上进入示范:

Repper网站URL是http://repperpatterns.com/register/



1首入,登入Repper网站进行注册,大家只需填入基本资料后,按下“Complete Sign Up”。

2接著,大家必需开启电邮信箱进行验证。

3点下连结后,再次回到Repper主页,输入用户名及密码后,按“Try & Buy”,再按“free demo”便可登录Repper花纹编制器了。

Repper花纹编制器URL是http://repperpatterns.com/tool/

4Repper花纹编制器是用Adobe Flash编写而成的软件。大家需确定自己的电脑已装有最新版本的Flash Player。

5这就是编制器的主页。图中的花纹是预设的,大家可看到5个工具栏,分别是:source image,selection,tiling,colors以及
export。

6一开始,按“load image”,从电脑硬碟置入任何图片;而“selection”是让大家选择图片的任何部份以编制花纹,花纹复合效果会立刻显示在背景里。

7“tiling”和“colors”是花纹大小以及颜色属性的调整,大家不妨多多尝试尝试。

8选定了自己喜欢的花纹图案后,按下“export”储存入电脑硬碟。大家可能会看到“警告视窗”会弹出;别担心,按“cancel”就可以了。

如何更换部落格背景?

9再来,登录Blogger控制后台,按“新建帖子”;输入标题,再点选“上传图片”按钮,把刚才的花纹图案上传进帖子里。跟著,按“储存为草稿”就Ok了,请别关闭帖子。

10现在我们要更改背景了。用右键按下“设计”在新的视窗开启,再按“修改HTML”进入模板的HTML页面。请把“扩展窗口小部件模板”打勾后,再“下载完整模板”以作备份。

11备份后,按快速键Ctrl+F,右上角会弹出搜寻栏框;输入“body {”后按下Enter就可看到被选取(橙色)的body原始码了。我们要修改的是:background-color:#ccddbb;。请选取这一段原始码,按Ctrl+C复制后,Ctrl+V贴入Notepad文字编辑器里(烦贴入两次)。

12在Notepad里,大家可看到第2行的原始码已经被修改了,依照上图删除(黄色)的原始码再输入(蓝色)的原始码。

13接著,我们回去步骤10的帖子处(Edit HTML页面),选取花纹图案的永久连结,按快速键Ctrl+C复制网址,Ctrl+V贴入Notepad(第3行)里。

14回到Notepad里,请选取“XXX”三个字母后,按下Ctrl+V,把花纹的连结贴入。看看上图第4行的变化。

15把这已修改好的原始码(从background:到repeat;)复制(Ctrl+C)后,到步骤11“修改HTML”页面,选取“background-color:#ccddbb;”,按Ctrl+V贴入新的原始码。最后按“保存模板”便完成了。

16页面刷新后,证明模板已成功保存了,再按“查看模板”便可看到新改版的部落格了(看下图)。






备注:
只要大家成功修改HTML后,所下载的完整模板.xml文件即可以随时删除。

5 条评论:

  1. where can i find the notepad?

    回复删除
  2. 回复lIN9
    http://notepad-plus-plus.org/

    回复删除
  3. To:E ge
    Where can I download comic?
    I remember there is the JComic Downloader, but I had lost the episode that teach how to use it. Can you give me the two link please?

    回复删除
  4. 此评论已被作者删除。

    回复删除
  5. I cannot go to step 11.
    There's no body } and background-color:#ccddbb

    回复删除