z-blog三栏主题的优化

发布日期：2017/6/24

SEO博客在前一段时间曾为Bard自己的生日做了一个简洁的三栏主题，当然就是目前正在使用的这个。

这个三栏主题Bard在做的时候只用了的时间，而且内把广告什么的悉数都加好了，因此当初除了内部链接策略外没有十分注重seo搜索引擎优化，这对使用者来说是十分不友爱的，因此在Bard来上海求职并且尚未有人要的时候，对自己的博客适当SEO，各位使用三栏主题的先生可以参考一下Bard的优化方法，对Bard做的不够好的地方予以指点。

1、将主体部分的代码前移

首先这个主题主题部分的三个部分分别是#Divsidebar、#Divmain、#DivHeadlines，(PS：不管这三个名称是不是吻合规范，当初Bard为了方便修改，暂时这么写的。)，并且上面依次是#DivnrvBar、#DivTop，下面是#DivBottom。除此之外，这些DIV元素的好顶层被#Divmiddle、#DivPage包裹，简图如下：

 

如上图所示，因为Divsidebar元素在主体部分的前面，因此这将文章主体部分的内容大大推后，使页面不能够凸起文章，因此搜索引擎对其的友爱度会大大降低，并影响排名，这个时候，我们应该想到：假如把Divsidebar这部分内容放到后面，而又不影响页面的布局就好了。就在这个时候，我们应当可以想到Div元素的定位：position属性!

对，主体部分我们可以将代码顺序任意写，而只需要设定#Divsidebar、#Divmain、#DivHeadlines这三个Div元素的定位即可，例如我们可以在bardseo.css中将这三句代码这样修改：

#divSidebar{

float: left;

width: 21%;

margin: 0px;

padding: 0px 0 10px 0;

background-color: #EAFAFD;

border-right: 1px solid #cccccc;

}

#divMain{

float: lfet;

width: 54%;

padding: 10px 0 0 10px;

}

#divHeadlines{

float:right;

width: 21%;

background-color: #EAFAFD;

border-left: 1px solid #cccccc;

padding-right: 0px;

}

修改为

#divSidebar{

float: left;

width: 21%;

margin: 0px;

padding: 0px 0 10px 0;

position: absolute;

left: 0;

top: 141px;

background-color: #EAFAFD;

border-right: 1px solid #cccccc;

}

#divMain{

float: lfet;

width: 54%;

margin: 0 0 0 23%;

padding: 10px 0 0 10px;

}

#divHeadlines{

float:right;

width: 21%;

background-color: #EAFAFD;

position: absolute;

top: 141px;

right: 0;

border-left: 1px solid #cccccc;

padding-right: 0px;

}

与此同时，这种做法将会导致一个比较不好的效果，那就是底部版权声明部分的东西仅仅跟在主体，也就是说，当主体部分内容不够多，高度比较矮的时候，版权声明部分就比较靠前的位置，这也是Bard需要高手指点的地方。