聽。小兔仔的聲音

首先要感謝網誌大大分享的內容，
真是非～～～～～常好用捏^O^
只是一開始不懂文中第五步驟：使用　[分類1][分類2]標籤　
要怎麼使用，還一直都試不出樹狀的樣子，（嘿～人家對程式不熟嘛XD）
後來突然想說會不會是這樣...例如 [生活][玩樂]北海道遊

呈現：- 生活
               - 玩樂
                 北海道遊

然後一試真是這樣耶～哈（一看就懂的人請不要笑...噗）
但我不需要這麼多層，所以後來改為...[玩樂]北海道遊...就好了，
只要把同樣分類的文章加上這個標籤，就可以囉～酷XD

呈現：  - 玩樂(5)
                 北海道遊(5)



參考網誌：
Gormit's 原型製作～Blogger 文章分類工具 (第二版) 


步驟一
打開版面配置,加入標籤這個小工具, 一定要設定為用按字母排序
顯示設定不重要等下一步的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(http://lh4.ggpht.com/_aunFc5EDRyI/S1u5viwK6ZI/AAAAAAAAAIE/gntN8IjNtQY/minus.gif)" } else { ul.style.display="none" li.style.backgroundImage="url(http://lh4.ggpht.com/_aunFc5EDRyI/S1u5tkkq3uI/AAAAAAAAAH8/L3MD-dRtmkY/plus.gif)" } } function draw_obj(obj) { document.write("<li style='padding-left: 0px>'"); document.write("<img src='http://3.bp.blogspot.com/_WoCJXgXotb8/SsBGEeZ7m-I/AAAAAAAAAJg/9imBipUIe7Q/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(http://lh4.ggpht.com/_aunFc5EDRyI/S1u5tkkq3uI/AAAAAAAAAH8/L3MD-dRtmkY/plus.gif) 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新增小工具裡可選用的日曆，
下方都跟了一些(廣告??)訊息...
想要簡單的就好了，找到了以下網友大大的分享，
感謝捏...^^"


參考網誌：
貓盒子的筆記本～Blogger: 便利的日曆文章列表 
Annie 小婆婆札記～【部落格圈】文章列表行事曆語法 









這是由LVCHEN製作的日曆文章列表, 安裝方式非常簡單, 將游標移到日期上還會顯示當天所有的文章標題
要安裝這個日曆元件, 只要在版面配置新增一個HTML/Javascript網頁元素, 加入以下程式碼就可以了

要修改此日曆的CSS樣式, 可以參考Annie 小婆婆札記:【部落格圈】文章列表行事曆語法中有詳細的介紹



● 參數語法 ●

直接將「參數語法」拷貝放在模版（Template）＜body＞和＜/body＞間想陳列顯示的地方。






<div id="blogCalendar"></div><script src="http://lvchen-recentcomments.googlecode.com/svn/trunk/Calendar/1.0/calendar_pack.js" type="text/javascript"></script><script type="text/javascript">Calendar.base='anniechg.blogspot.com'; Calendar.timeZone='-05'; //美國時間 Calendar.timeZoneCheck = true;Calendar.week_label = ["<span style="color:'#ff9999';"> Sun</span>"," Mon"," Tue"," Wed"," Thu"," Fri","<span style="color:'#ff9999';"> Sat </span>"];Calendar.month_label_real = ["JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER"];Calendar.drawTable();</script>







【可點選放大這張列表圖看得更清楚】
01. Calendar.base 記得改上自己部落格網頁的網址（XXXXXXX.blogspot.com）。

02. Calendar.timeZone 記得改上自己的時區，美東為-05、台灣為+08，那個０不可少。至於「Calendar.timeZoneCheck = True」這個參數不需要傷腦筋，這乃檢查該時區是否有實施日光節約時間。【請參考本文第一則留言】

03. Calendar.week_label 上面語法所列乃英文版的星期標示，也可改上自己喜歡的形式，例如中文版的「日一二三四五六」、或者日文版的「日月火水木金土」，就去該英文字的相對位置修改囉（e.g. Sat = 六 = 土）。語法中的空格不見去了，記得補上喔！

04. Calendar.month_label_real 和星期標示相同，月份標示也可改上自己喜歡的形式，例如英文版的僅第一個字母大寫（January, February, ...）或中文版的「一月、二月、……」。

● 版面語法 ●

就直接將「版面語法」拷貝放在上面所列之「參數語法」下方即可。







<style>#blogCalendar { display:block; text-algin:center; border:1px dotted #FFE87C; width:85%; background: #fefff3; } #CalendarCaption a{ text-decoration:none; } #CalendarCaption{ border-bottom:2px solid #999; width:88%; margin:auto; } #CalendarTable a{ font-weight:bold; color: #0066CC; } .Today{ background: #FFE87C; font-weight:bold; text-decoration:none; } #CalendarFooter{ font-weight:bold; padding-left:45px; margin-top:5px; margin-bottom:5px; background: #ffe87c; } .yearInput{ color: #0066cc; background: #dbe2ed; } #monthTable{ color: #0066cc; background: #dbe2ed; } </style>







【可點選放大這張列表圖看得更清楚】
01. #blogCalendar 就是指整個行事曆，border 就是指外框的小點尺寸和顏色，width 就是指寬度，background 就是指背景色，這三個都可按照自己的喜好和版面色系及尺寸來修改。






【可點選放大這張列表圖看得更清楚】
02. .Today 就是月曆中標示今天的日期，相同地也可修改其 background 背景色。

03. #CalendarFooter 就是下面那行 Today 色塊，小婆喜歡它和 Today 的背景色相同，相互對應咩。

04. .yearInput 就是那個表頭的年份，看倌們可以點一下試看看。這個是採「輸入數字」的方式快速地轉換年份選單。【感謝 LVCHEN 親來指點迷津！】

05. #monthTable 則是那個表頭的月份，這個是採「下拉表單」選項方式，也就是說可以快速地點選想去檔案文章的月份，這真是貼心的設計。【感謝 LVCHEN 親來指點迷津！】

有興趣的看倌們可去 LVCHEN 家看原始語法，比較一下就知道小婆改了那些地方啦。

>.^