。學習.blogger－聽。小兔仔的聲音

首先要感謝網誌大大分享的內容，
真是非～～～～～常好用捏^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]標籤　
程式會自動抓出[分類]的內容列表

小兔仔發表在痞客邦留言(0) 人氣()

因為blogger新增小工具裡可選用的日曆，
下方都跟了一些(廣告??)訊息...
想要簡單的就好了，找到了以下網友大大的分享，
感謝捏...^^"

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

以下為引用這2個網誌的內容－－－－－

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

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

引用Annie 小婆婆札記的部分內容－－－－－

● 參數語法 ●

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

【可點選放大這張列表圖看得更清楚】

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, ...）或中文版的「一月、二月、……」。

● 版面語法 ●

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

【可點選放大這張列表圖看得更清楚】

01. #blogCalendar 就是指整個行事曆，border 就是指外框的小點尺寸和顏色，width 就是指寬度，background 就是指背景色，這三個都可按照自己的喜好和版面色系及尺寸來修改。

【可點選放大這張列表圖看得更清楚】

02. .Today 就是月曆中標示今天的日期，相同地也可修改其 background 背景色。

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

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

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

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

>.^

小兔仔發表在痞客邦留言(0) 人氣()

«	四月 2025	»
日	一	二	三	四	五	六
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

四月 2025

日

一

二

三

四

五

六

聽。小兔仔的聲音

於是我原地旋繞於是我將心纏繞

目前分類：。學習.blogger (2)

blogger小工具: 樹狀文章分類

blogger小工具: 日曆

月曆

文章搜尋

文章分類

[手記] (3)

[biscuit] (7)

[life] (9)

最新文章

最新留言

熱門文章

參觀人氣

誰來我家

我去誰家

動態訂閱

新聞交換(RSS)

QR Code

POWERED BY

«	四月 2025					»
日	一	二	三	四	五	六
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

«	四月 2025					»
日	一	二	三	四	五	六
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

聽。小兔仔的聲音

於是我原地旋繞 於是我將心纏繞

目前分類：。學習.blogger (2)

blogger小工具: 樹狀文章分類

blogger小工具: 日曆

月曆

文章搜尋

文章分類

[手記] (3)

[biscuit] (7)

[life] (9)

最新文章

最新留言

熱門文章

參觀人氣

誰來我家

我去誰家

動態訂閱

新聞交換(RSS)

QR Code

POWERED BY

於是我原地旋繞於是我將心纏繞

«	四月 2025					»
日	一	二	三	四	五	六
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30