很久以前,自己想分栏却不知从何下手,幸亏得到了江南布衣的帮助成功了。
前几天,帮zhaoxin分栏,费尽千辛万苦终于成功了。
回味这段艰难的历程,特别能体会分栏的悲欢。
所以下了这个分栏教程。尽力做到浅显明白。希望即使如我一样对代码一窍不通的人也一样能分栏成功。
声明:
1、我不太明白这些代码的准确含义。
2、这不是跨年度分栏。
3、必须是博客网的老公社用户才可以分栏。
4、我是在古道西风瘦马的《博客分栏宝典》基础上写成的。
好了,现在开始吧!
第一步:定义分栏条块。
1、复制下列代码
.mydiv{
float:left;
width:300px;
line-height:150%;
background-repeat: no-repeat;
background-position: 5px 26px;
padding: 0px;
border-bottom:0px solid #94A6BD;
}
.myimg{
float:right;
height:7px;
width:38px;
border:0;
padding: 6px 5px 5px 0px;
}
.mybg{
height:20px;
background-color:#FFFFFF;
color:#FFFFFF;
padding-top:2px;
padding-left:5px;
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr:#61C8EF,EndColorStr :#F7F7F7,GradientType:1);
}
2.把复制好的代码粘贴到首页模板css中。
具体操作:登录进入博客管理后台/控制面板/模板设置/模板DIY/CSS DIY:首页----CSS原码的文本框中粘贴。路径博客管理后台/博客管理/模板/模板DIY/CSS DIY:首页----CSS原码也可。
注意:1、可能在博客网原css代码后你已经自己放置了一些例如滚动条之类的代码。希望你把下列代码放到原代码后面,你自己添加的代码前面。防止由于你自己代码的不足导致分栏代码无效。
2、由于模板的不同,
红色代码中第二行width:300px;的数值可能有所不同,我的是300,你可能需要适当缩小比如width:245px;
第二步:书写置顶日志。
一、复制下列代码在你的记事本。
注意:你可能有八个或者十二个分栏,但是我建议你先从四个入手,如果成功再适当增加代码。
<DIV><!----以下代码为引入索引网页----><IFRAME id=cataloghtml style="DISPLAY: none; Z-INDEX: 5; POSITION: absolute" src="catalog_2007.html"></IFRAME><!----以下代码为提取各栏内容--
---->
<SCRIPT>
function showcatalog(mycategoryname,categoryname)
{
currCategory = document.body.all[mycategoryname];
ol = cataloghtml.document.body.all;
var entityDiv = null;
for(i=0;i<ol.length;i++)
{
if(ol[i].className =="entity")
{
entityDiv = ol[i];break;
}
}
ol = entityDiv.children.tags("UL");
var oLI=null;
for(i=0;i<ol.length;i++)
{
if(ol[i].children(0).name==categoryname)
{
oLI = ol[i].children.tags("LI");
break;
}
}
if(oLI == null) return ;
myok="";
for(i=0;i<oLI.length;i++)
{
if(i>7) break;
oA = oLI[i].children(1);
s = oA.innerHTML;
myok += "<li style='width:240px;height:22px;overflow:hidden'><a href='"+oA.href+"'>"+s+"</a></li>\r\n";
}
for(;i<8;i++)
myok += "<li style='width:240px;height:22px;overflow:hidden'>...</li>\r\n";
currCategory.insertAdjacentHTML("beforeend",myok);
}
function showallcatalog()
{
showcatalog("mcategory1","category1");//课堂实录
showcatalog("mcategory2","category229852");//我的日记
showcatalog("mcategory3","category229871");//我的诗歌
showcatalog("mcategory4","category229876");//我的散文
}
</SCRIPT>
<!---------读入数据----------->
<BODY showallcatalog()>
<!---------以下为日志排版样式----------->
<DIV>
<DIV class=mydiv>
<DIV class=mybg><A href="http://nmnczhxb.blogchina.com/catalog_2007.html#category1"><IMG class=myimg alt=点击查看更多内容 src="http://myok.blogchina.com/myok/inc/go.gif"></A> ※课堂实录</DIV>
<UL id=mcategory1 type=circle><!--第一部分内容--></UL></DIV><!--结束-->
<DIV class=mydiv>
<DIV class=mybg><A href="http://nmnczhxb.blogchina.com/catalog_2007.html#category229852"><IMG class=myimg alt=点击查看更多内容 src="http://myok.blogchina.com/myok/inc/go.gif"></A> ※我的日记</DIV>
<UL id=mcategory2 type=circle><!--第二部分内容--></UL></DIV></DIV><!--结束-->
<DIV>
<DIV class=mydiv>
<DIV class=mybg><A href="http://nmnczhxb.blogchina.com/catalog_2007.html#category229871"><IMG class=myimg alt=点击查看更多内容 src="http://myok.blogchina.com/myok/inc/go.gif"></A> ※我的诗歌</DIV>
<UL id=mcategory3 type=circle><!--第三部分内容--></UL></DIV><!--结束-->
<DIV class=mydiv>
<DIV class=mybg><A href="http://nmnczhxb.blogchina.com/catalog_2007.html#category229876"><IMG class=myimg alt=点击查看更多内容 src="http://myok.blogchina.com/myok/inc/go.gif"></A> ※我的散文</DIV>
<UL id=mcategory4 type=circle><!--第四部分内容--></UL></DIV></DIV><!--结束-->
</DIV></DIV></DIV>
二、修改代码。
1、修改红色部分代码
把“showcatalog("mcategory1","category?");”中的“?”改为你的栏目相应的数值。
具体操作:在博客首页,将鼠标放到栏目上,不要点击,浏览器状态栏-----就是浏览器的最下面,开始二字的上面 就会出现当前栏目的数值。
不同的模板数值不同,比如我的课堂实录分栏http://nmnczhxb.blogchina.com/catalog_2007.html#category1中category?是1,而第二个分栏的数值却变成了category229852
大部分的数值一次为category1,category2这样类推下去。你只要记住你的栏目的数值就可以了。然后在
showcatalog("mcategory1","category1");//课堂实录
showcatalog("mcategory2","category229852");//我的日记
showcatalog("mcategory3","category229871");//我的诗歌
showcatalog("mcategory4","category229876");//我的散文
这四个栏目代码中把category?数值换成你栏目的。其余不变。
注意,建议你先做两个或者四个分栏。成功后再添加。因为代码类似。
如果你是八个或者十二个分栏注意
showcatalog("mcategory1","category1");//课堂实录
showcatalog("mcategory2","category229852");//我的日记
showcatalog("mcategory3","category229871");//我的诗歌
showcatalog("mcategory4","category229876");//我的散文
中的mcategory?是按1、2、3、4、5、6、7、8、……依次排列的。
然后根据数值修改你的栏目名称。就是课堂实录我的日记之类,换成你自己的。要和你的category数值对应。
2、修改
<DIV>
<DIV class=mydiv>
<DIV class=mybg><A href="http://nmnczhxb.blogchina.com/catalog_2007.html#category1"><IMG class=myimg alt=点击查看更多内容
红色部分代码中<A href="http://nmnczhxb.blogchina.com/catalog_2007.html#category1">的网址换成你的栏目1中的真实网址。当然,后面的课堂实录也要换成你栏目的名字。
注意,我想你也注意到了。这个地址和前面我们刚刚修改的那段代码其实是对应的。
依次修改这四个栏目。就是红色代码部分。
注意如果你是八个栏目的话,<UL id=mcategory1 type=circle><!--第一部分内容--></UL></DIV><!--结束-->中id=mcategory1 数值是mcategory?是1.而下段代码是2,依次3、4、5、6、7、8、类推。
三、发布这个代码
1、首先进入博客管理后台/写新文章。
2:给这篇日志起一个名字比如“欢迎你”
3: 在“撰写”的工具栏中单击其中的“<>”按钮,切换至“HTML原始码”状态。此时工具栏的大部分工具变为灰色不可用状态,说明切换成功
4、粘贴你的刚刚修改好的分栏代码
5:文章是否置顶:选择置顶。置顶就是放到首页上去,分栏就是在首页中分栏。
6:文章是否展开:一定要选展开。不过,这一点你即使忽略了,系统的默认值也是展开,但您不能选收拢。
7、点击“保存并发布”。
如果一切顺利的话,分栏就成功了!!!!