|
TOP
z-blog三栏主题的优化
[ 编辑:qiraosky | 时间:2012-03-20 23:36:45
| 浏览:389次 | 来源:德州电脑服务网 | 作者:德州电脑服务网 ]
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需要高手指点的地方。 期待您的回答! |
热门文章
|