不知道大家觉得我的blog的效果怎么样:) 我个人感觉还不错哦，hoho！仿照微软的主页做的一点点修改，主要使用了dom和css。
关于如何添加js代码和自定义css，很多人的blog里面都有了，我就不说了。
下面是我自己的修改过程，一一说来，供大家分享，写的不好别扔我：）
我选用的皮肤是：marvin2。
首先是添加一个顶部的导航菜单，我把原来左侧最上面的my links的内容放到了导航菜单里面，并且自己自定义了几个链接。
通过分析页面的源文件，我们可以看出marvin2的布局基本上是这样的：
<form>
<div id="top"></div>
<div id="menu"></div>
<div id="leftmenu">
<h3>my links</h3>
<ul>
<li></li>
</ul>
</div>
<div id="main">
<p class="date"></p>
<div class="post">
<h2></h2>
<p class="postfoot"></p>
</div>
</div>
<p id="footer"></p>
</form>
通过javascript使用dom属性和方法操纵文档内容，就可以改变最后的效果了：
<script>
// 定位到左边菜单节点
var left = document.getelementbyid("leftmenu");
// 创建一个新的div节点
var menu = document.createelement("div");
// 设置该div节点的id为menu，为了在css中定义其样式
menu.setattribute("id", "menu");
// 重写div节点里面的内容，我去掉了xml的小图标，添加了两个链接
menu.innerhtml = '<ul><li><a id="mylinks1_homelink" href="/myhan/">home</a></li><li><a id="mylinks1_contactlink" accesskey="9" href="/myhan/contact.aspx">contact</a></li><li><a id="mylinks1_syndication" href="http://blog.njmars.com/myhan/rss.aspx">syndication</a></li><li><a id="njmars" href="http://blog.njmars.com/myhan/">blog.njmars!</a></li><li><a id="csdn" href="/">blog.csdn!</a></li><li><a id="mylinks1_admin" href="/myhan/admin/default.aspx">admin</a></li></ul>';
// 关键：left.parentnode就是form了，使用insertbefore()方法在节点left之前插入新的节点
left.parentnode.insertbefore(menu, left);
</script>
所以之后页面的布局实际上就成了这样子的了：
<form>
<div id="top"></div>
<div id="menu"></div>
<div id="leftmenu">
<h3>my links</h3>
<ul>
<li></li>
</ul>
</div>
<div id="main">
<p class="date"></p>
<div class="post">
<h2></h2>
<p class="postfoot"></p>
</div>
</div>
<p id="footer"></p>
</form>
然后我继续通过js使用dom操纵页面，将左侧原来的my links内容去掉，然后将左侧几项的顺序调换一下。代码如下：
<script>
// 修改和交换左侧一栏的内容
function swapleft()
{
// 这个if判断页面是否已经下载完毕，因为这段代码放在news栏目里面，显示的较leftmenu的其他内容要早
// 如果直接之行下面的代码的话，会有错误产生。
// 我使用定时器不断的检查，知道页面全部下载完毕之后，在之行下面的内容:)
if (document.getelementbyid("footer")) {
// 定位到左侧菜单节点
var left = document.getelementbyid("leftmenu");
// 通过left对象的childnodes属性得到<div id="leftmenu"></div>这个节点里面的内容，如<h3></h3>和<ul></ul>
// list 是一个数组
// 注意 <h3>和<ul>是同一级别的节点，而项目<li>是<ul>的子节点。
var list = left.childnodes;
// 对left的字节进行操作
// 使用removenode方法，将该节点删除。
list[0].removenode(true);
list[0].removenode(true); // 注意，这个节点本来是list[1]，但是上面删除了list[0]，这个就变成了list[0]了。
list[0].swapnode(list[2]); // 交换节点，将节点的顺序换掉。
list[1].swapnode(list[3]);
list[2].swapnode(list[5]);
list[3].swapnode(list[6]);
list[5].swapnode(list[9]);
list[6].swapnode(list[10]);
list[0].innertext = "心语"; // 修改节点的文字内容
list[9].innertext = "状态";
} else {
settimeout("swapleft();", 30);
}
}
settimeout("swapleft();", 30);
</script>
随后我还添加了一个计数器，可以看到我的计数器显示的位置是一个独立的小栏里面，我一样还是使用dom，动态的添加了这个玩意：
