是我開始寫blog之後就一直想要做的。
不過找了好久,還是沒有找到一個我會用的!
但我還是不放棄,每兩三天就又google一下。
今天總算讓我找到(我看的懂的XD)分類的方法了
剛剛試了一下,真的可以分類耶!
馬上很開心要想把它分享給大家~
有興趣的的朋友可以試試喔!
[轉貼分享]
使用 [分類1][分類2]標籤 的格式來定義標籤即可
安裝如同第一版的步驟
步驟一
打開版面配置,加入標籤這個小工具, 一定要設定為用按字母排序
顯示設定不重要等下一步的script只會以清單表現
步驟二
選擇"修改HTML" 並鉤選"展開小裝置範本"
找到步驟一新加的小工具 找像下列的字串
<b:widget id="Label2" locked="false" title="標籤" type="Label">
一直到
</b:widget>
為止
步驟三
將上述範圍內的內容改為:
<b:widget id='Label3' locked='false' title='文章分類(v2)' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div expr:class='"widget-content " + data:display + "-label-widget-content"'> <script> var label_tree= new Object(); function tn(tag) { return tag.substring(1,tag.length-1); } function build_node(tree,idx,cnt) { if(!tree[idx[0]]){ tree[idx[0]]=new Object(); tree[idx[0]]['_cnt']=0; tree[idx[0]]['_item']=new Array(); } tree[idx[0]]['_cnt'] = parseInt(tree[idx[0]]['_cnt']) + parseInt(cnt); if(idx.length==1){ return tree[idx[0]]; } return build_node(tree[idx[0]],idx.slice(1),cnt); } function add_label(_name,_cnt,_url,_dir) { var e1 = new RegExp("\\[(.+?)\\]","g"); var e = new RegExp("\\[(.+)\\]","g"); var m = _name.match(e); var tag = _name; var obj=new Object(); obj['tag']=_name; obj['cnt']=_cnt; obj['dir']=_dir; obj['url']=_url; if(m){ obj['tag']= _name.substring(m[0].length,_name.length); var m1 = _name.match(e1); if(m1){ node=build_node(label_tree,m1,_cnt); if(node){ node['_item'].push(obj); } } } else{ if(!label_tree['_item']){ label_tree['_item']=new Array(); } label_tree['_item'].push(obj); } } function menu_exp(id) { var ul=document.getElementById("ul_"+id); var li=document.getElementById("li_"+id); if (ul.style.display=="none"){ ul.style.display="block" li.style.backgroundImage="url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Ixmc4zfrDw-EMJpwzG6Yx3LiniVWVjcCXOBEDz7Ptg5lSjVySOR-2NY2nGmN60sAbpNPyVKg3vPNJmus78Jjo3nS7PUjKhRFozsvVai9HjIUuVLJqgiQAth9ZbeSRh3HhK-SqJxb414/)" } else { ul.style.display="none" li.style.backgroundImage="url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0ClI-9PmS4XMNQnlqPB2YVxj0AhwZGlDw5oR_Y_VBIruQFK5wbSRcM_Xs3q4lgPwh9mIXZAe2LPUjeY-wzxeE9Q-SFmBwEkZhoVwCYs2D1nFfI8c-AoKVUEfuZvH1oQCgb8upejgwSTQ/)" } } function draw_obj(obj) { document.write("<li style='padding-left: 0px>'"); document.write("<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYbJQiuMAE4vOke2pXnmBlQ9S1VgGPuCOk2E14j9QJalD7Ygz0uVCIktwJPJlAY_M5KL9PEeMFmKT0n0-ae1v4X5l1RDPxywzD3EmhkIB_N70WUYY41Eg9dxoS6DMIdwGTgrpEMiJ6dbI/s1600/icon-yellow-bullet.png' /><a dir='"+obj['dir']+"' href='"+obj['url']+"'>"+obj['tag']+"</a>"); document.write("<span dir='"+obj['dir']+"'>("+obj['cnt']+")</span>"); document.write("</li>\n"); } function draw_tree(tree) { for(var tag in tree){ if(tag!='_item'&& tag!='_cnt'){ var rid = Math.random(); document.write("<li class=submenu id=li_"+rid+" onclick=menu_exp('"+rid+"'); style='font-weight:bold;padding-left: 20px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0ClI-9PmS4XMNQnlqPB2YVxj0AhwZGlDw5oR_Y_VBIruQFK5wbSRcM_Xs3q4lgPwh9mIXZAe2LPUjeY-wzxeE9Q-SFmBwEkZhoVwCYs2D1nFfI8c-AoKVUEfuZvH1oQCgb8upejgwSTQ/) no-repeat left 0px;cursor: pointer'>"); document.write(tn(tag)); document.write("("+tree[tag]['_cnt']+")"); document.write("</li>"); document.write("<ul id=ul_"+rid+" style='display:none;padding-left: 20px'>"); draw_tree(tree[tag]); document.write("</ul>\n"); } } if(tree['_item']){ for(var i=0;i < tree['_item'].length;i++){ draw_obj(tree['_item'][i]); } } } </script> <b:loop values='data:labels' var='label'> <script> add_label('<data:label.name/>','<data:label.count/>','<data:label.url/>','<data:blog.languageDirection/>'); </script> </b:loop> <ul> <script> draw_tree(label_tree); </script> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget>
步驟四
按下儲存範本就完成了
步驟五
使用以下的格式作為文章的標籤
使用 [分類1][分類2]標籤
程式會自動抓出[分類]的內容列表
我直接轉貼別人的教學,有興趣的可以過去造訪一下喔^^
Blogger 文章分類工具 (第二版)
1 意見:
Q:+號會壓在分類字上~該怎麼調整才會落在第一個字的左方呢?
A:
有兩個可能的改法可以試試;
改法一
找到 function draw_tree(tree) 內有
padding-left: 20px; (兩個)
改成
padding-left: 35px;
改法二
在padding-left: 20px;後面加上
padding-left: 20px;text-indent: 0
張貼留言