也扯打造个性BlogJava模板

Canvas Wong — Tue, 06 May 2008 07:49:00 GMT

编写此文的目的：当你看到我这篇博文的时候，估计你就不能体会我为什么要编写此文了。在此文发表之前，我需要一篇博文来改变我的首页的丑陋的状态，于是我就写了这篇博文。
使用到的工具：大脑一个,手两只， IE Developer(点击下载)，其他东西若干
打造过程:
前天申请的BlogJava,感觉很不错，看看后台，发现可以通过修改CSS改变自己博客的面貌。 cnblog上有人说有比较好的costom的模板，可在BlogJava里我却没有找到这个模板。系统里已经自带了很多模板了，都很漂亮，但是自己还是喜欢那种oracle数据库帮助文档那种样式的页面，在后台选了个最接近自己想法的模板cogitation,然后就开始这次改造工程。
大侠们见谅，以下部分没有什么内涵，都是一些干完体力活后发的牢骚
如果你还想继续往下看，请确保你已经成功安装了IE Developer浏览器插件。
打开自己的BlogJava首页，可以看到自己选的模板已经生效了，先用IE Developer查看一下自己首页的结构吧，很简单，一目了然。想起了后台可以自己用HTML定义页面的头部和尾部，这个太好了，直接把原先的页面头和尾设为不显示,css代码如下：

#footer{
display:none;
}
#top {
display:none;
}

然后自己写个页面头和尾，把自己的写的头和尾的html代码拷到后台对应的地方，代码不要是完整的html页，一两个table即可。自己写的头和尾页可以有css，把这些css放到『通过css定制页面』中去吧。例如我的页首页脚html代码就是这样：

<table width="100%" height="60" border="0" cellpadding="0" cellspacing="0" >
  <tr>
    <td valign="middle" id="canvasHeader">
    <h3>Canvash3>
    <p>积极且具有忧患意识的人,在每一次忧患中都会看到机会,并且在每个机会中也都会看到某种忧患!<p>
    td>
    <td><img src="/images/blogjava_net/canvas/logo.gif" alt="logo" width="130" height="45" align="right" />td>
  tr>
table>
<div id="canvasNav">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="right">
  <tr>
    <td><table  height="20" border="0" cellpadding="0" cellspacing="0" >
  <tr>
    <td width="100" align="center"><a href="http://www.blogjava.net/canvas/">首页a>td>
    <td width="100" align="center"><a href="http://www.blogjava.net/canvas/admin/EditPosts.aspx?opt=1" >新随笔a>td>
    <td width="100" align="center"><a href="http://www.blogjava.net/canvas/rss" >聚合<img src="http://www.blogjava.net/images/xml.gif" style="border-width:0px;" />a>td>
    <td width="100" align="center"><a href="http://www.blogjava.net/canvas/contact.aspx?id=1" >联系a>td>
    <td width="100" align="center"><a href="http://www.blogjava.net/canvas/admin/EditPosts.aspx" >管理a>td>
  tr>
table>td>
  tr>
  <tr >
    <td background="/images/blogjava_net/canvas/hr.gif" height="4">td>
  tr>
table>
div>

<div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td background="/images/blogjava_net/canvas/hr.gif" height="4">td>
  tr>
  <tr>
    <td align="center" id="canvasfooter">

  <img src="/images/blogjava_net/canvas/bottom.gif" alt="canvas" width="80" height="25" /><br />
  <a href="http://elgnaw.cn/">Copyright © Canvas Wonga> <a href="mailto:canvas.wong@gmail.com">Contact mea>

    td>
  tr>
table>
div>

接下来就是用IE develop导出页面css，然后自己修改成自己想要的样子，再放回『通过css定制页面』中去即可。
看到留言框内有个google广告，通过后台可以去掉这个广告，但是会留下一个iframe框，不知道你那是不是也这样。仔细看了一下留言页面代码，使用这段css代码把iframe设置为不显示:

iframe{
display:none;
}

总结:右键->查看源代码,原模板的东西都在，只是没有显示出来，糊弄一下看客的眼睛而已。

找一个自己喜欢的模板，将它打造得面目全非吧。

Canvas Wong 2008-05-06 15:49 发表评论

BlogJava-Canvas-文章分类-CSS

也扯打造个性BlogJava模板