在blogger 的標籤檢視中加上清單列表

25 August, 2008

list of label

列出 標籤的清單
上圖是用在我的部落格的標籤清單,下方則是列出內文。



為了讓部落格在閱讀上更好找文章,我一直在找好用的方式。上一篇的 "其他我有在用的 widget" 中有介紹 Beautiful Beta 所寫的目錄表單。但使用上還是覺得不是很實用,最大的困擾是每一篇文章都要載入這模組,而且很耗資源,讓網站變得很慢。上星期花了點時間給 label 或 月份文章列表 加上清單。只有在點選 標籤 列表時才會載入,這樣就很省資源,而且蠻清楚。

進入到:
Control panel -> Layout -> edit Html -> Expand Widget Templates

找到下列的碼:

<b:include data='top' name='status-message'/>

<data:adStart/>



插入以下的碼:


<!-- Start of post list -->
<b:if cond='data:blog.homepageUrl!= data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
&#60;div class='labelwrap'&#62;
&#60;div class='labelbg'&#62;

</b:if>
</b:if>
<b:loop values='data:posts' var='post'>
<b:if cond='data:blog.homepageUrl!= data:blog.url'>
<b:if cond='data:blog.pageType != "item"'><a expr:href='data:post.url'><data:post.title/></a><br></b:if>
</b:if>
</b:loop>
<b:if cond='data:blog.homepageUrl!= data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
&#60;/div&#62;
&#60;/div&#62;

<b:include name='nextprev'/>
</b:if>
</b:if>

<!-- End of post list -->



在來則是加入 css,在 <head></head> 之間插入下面的碼:


/* Status css-source http://bloggermagz.blogspot.com/2007/09/customize-your-blogger-status-message.html */
#main .labelwrap {
width:90%;
padding:5px 5px 5px 5px;
margin-top:10px;
margin-left:10px;
background: #FFF9B3 ;
border:1px solid gold;
}

#main .labelbg {
background: #FFF9B3 ;
}



這樣就完成了。

延伸閱讀:

2 comments:

№3 summer said...

hey..這里有點小提醒。那個
后面要加個 Eng-Tag 才能實現清單列表隔行的效果。否則沒辦法存檔。剛剛我試過這個方法,一切問題都解決了。

Ahock said...

感謝告知啊!

熱情推薦:

關於作者

My Photo
Ahock
在台灣過著古晉人的生活,算是滯留台灣10多年了~ ps:這邊放的照片是我的母親梅花。
View my complete profile
Visitors
since 06 March 2008
網站日誌

  © Blogger templates Newspaper II by Ourblogtemplates.com 2008

Back to TOP