很久以前，自己想分欄卻不知從何下手，幸虧得到了江南布衣的幫助成功了。
前幾天，幫zhaoxin分欄，費盡千辛萬苦終于成功了。
回味這段艱難的歷程，特別能體會分欄的悲歡。
所以下了這個分欄教程。盡力做到淺顯明白。希望即使如我一樣對代碼一竅不通的人也一樣能分欄成功。
聲明：
1、我不太明白這些代碼的準確含義。
2、這不是跨年度分欄。
3、必須是博客網(wǎng)的老公社用戶才可以分欄。
4、我是在古道西風瘦馬的《博客分欄寶典》基礎(chǔ)上寫成的。
好了，現(xiàn)在開始吧！
第一步：定義分欄條塊。
1、復(fù)制下列代碼
.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.把復(fù)制好的代碼粘貼到首頁模板css中。
具體操作：登錄進入博客管理后臺/控制面板/模板設(shè)置/模板DIY/CSS DIY：首頁----CSS原碼的文本框中粘貼。路徑博客管理后臺/博客管理/模板/模板DIY/CSS DIY：首頁----CSS原碼也可。
注意：1、可能在博客網(wǎng)原css代碼后你已經(jīng)自己放置了一些例如滾動條之類的代碼。希望你把下列代碼放到原代碼后面，你自己添加的代碼前面。防止由于你自己代碼的不足導(dǎo)致分欄代碼無效。
2、由于模板的不同，
紅色代碼中第二行width:300px;的數(shù)值可能有所不同，我的是300，你可能需要適當縮小比如width:245px;
第二步：書寫置頂日志。
一、復(fù)制下列代碼在你的記事本。
注意：你可能有八個或者十二個分欄，但是我建議你先從四個入手，如果成功再適當增加代碼。
<DIV><!----以下代碼為引入索引網(wǎng)頁----><IFRAME id=cataloghtml style="DISPLAY: none; Z-INDEX: 5; POSITION: absolute" src="catalog_2007.html"></IFRAME><!----以下代碼為提取各欄內(nèi)容--
---->
<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>
<!---------讀入數(shù)據(jù)----------->
<BODY showallcatalog()>
<!---------以下為日志排版樣式----------->
<DIV>
<DIV class=mydiv>
<DIV class=mybg><A href="http://nmnczhxb.blogchina.com/catalog_2007.html#category1"><IMG class=myimg alt=點擊查看更多內(nèi)容 src="> ※課堂實錄</DIV>
<UL id=mcategory1 type=circle><!--第一部分內(nèi)容--></UL></DIV><!--結(jié)束-->
<DIV class=mydiv>
<DIV class=mybg><A href="http://nmnczhxb.blogchina.com/catalog_2007.html#category229852"><IMG class=myimg alt=點擊查看更多內(nèi)容 src="> ※我的日記</DIV>
<UL id=mcategory2 type=circle><!--第二部分內(nèi)容--></UL></DIV></DIV><!--結(jié)束-->
<DIV>
<DIV class=mydiv>
<DIV class=mybg><A href="http://nmnczhxb.blogchina.com/catalog_2007.html#category229871"><IMG class=myimg alt=點擊查看更多內(nèi)容 src="> ※我的詩歌</DIV>
<UL id=mcategory3 type=circle><!--第三部分內(nèi)容--></UL></DIV><!--結(jié)束-->
<DIV class=mydiv>
<DIV class=mybg><A href="http://nmnczhxb.blogchina.com/catalog_2007.html#category229876"><IMG class=myimg alt=點擊查看更多內(nèi)容 src="> ※我的散文</DIV>
<UL id=mcategory4 type=circle><!--第四部分內(nèi)容--></UL></DIV></DIV><!--結(jié)束-->
</DIV></DIV></DIV>
二、修改代碼。
1、修改紅色部分代碼
把“showcatalog("mcategory1","category?");”中的“?”改為你的欄目相應(yīng)的數(shù)值。
具體操作：在博客首頁，將鼠標放到欄目上，不要點擊，瀏覽器狀態(tài)欄-----就是瀏覽器的最下面，開始二字的上面 就會出現(xiàn)當前欄目的數(shù)值。
不同的模板數(shù)值不同，比如我的課堂實錄分欄http://nmnczhxb.blogchina.com/catalog_2007.html#category1中category？是1，而第二個分欄的數(shù)值卻變成了category229852
大部分的數(shù)值一次為category1，category2這樣類推下去。你只要記住你的欄目的數(shù)值就可以了。然后在
showcatalog("mcategory1","category1");//課堂實錄
showcatalog("mcategory2","category229852");//我的日記
showcatalog("mcategory3","category229871");//我的詩歌
showcatalog("mcategory4","category229876");//我的散文
這四個欄目代碼中把category？數(shù)值換成你欄目的。其余不變。
注意，建議你先做兩個或者四個分欄。成功后再添加。因為代碼類似。
如果你是八個或者十二個分欄注意
showcatalog("mcategory1","category1");//課堂實錄
showcatalog("mcategory2","category229852");//我的日記
showcatalog("mcategory3","category229871");//我的詩歌
showcatalog("mcategory4","category229876");//我的散文
中的mcategory？是按1、2、3、4、5、6、7、8、……依次排列的。
然后根據(jù)數(shù)值修改你的欄目名稱。就是課堂實錄我的日記之類，換成你自己的。要和你的category數(shù)值對應(yīng)。
2、修改
<DIV>
<DIV class=mydiv>
<DIV class=mybg><A href="http://nmnczhxb.blogchina.com/catalog_2007.html#category1"><IMG class=myimg alt=點擊查看更多內(nèi)容
紅色部分代碼中<A href="http://nmnczhxb.blogchina.com/catalog_2007.html#category1">的網(wǎng)址換成你的欄目1中的真實網(wǎng)址。當然，后面的課堂實錄也要換成你欄目的名字。
注意，我想你也注意到了。這個地址和前面我們剛剛修改的那段代碼其實是對應(yīng)的。
依次修改這四個欄目。就是紅色代碼部分。
注意如果你是八個欄目的話，<UL id=mcategory1 type=circle><!--第一部分內(nèi)容--></UL></DIV><!--結(jié)束-->中id=mcategory1 數(shù)值是mcategory？是1.而下段代碼是2，依次3、4、5、6、7、8、類推。
三、發(fā)布這個代碼
1、首先進入博客管理后臺/寫新文章。
2：給這篇日志起一個名字比如“歡迎你”
3： 在“撰寫”的工具欄中單擊其中的“<>”按鈕，切換至“HTML原始碼”狀態(tài)。此時工具欄的大部分工具變?yōu)榛疑豢捎脿顟B(tài)，說明切換成功
4、粘貼你的剛剛修改好的分欄代碼
5：文章是否置頂：選擇置頂。置頂就是放到首頁上去，分欄就是在首頁中分欄。
6：文章是否展開：一定要選展開。不過，這一點你即使忽略了，系統(tǒng)的默認值也是展開，但您不能選收攏。
7、點擊“保存并發(fā)布”。
如果一切順利的話，分欄就成功了！！！！