在blogger 的標籤檢視中加上清單列表
25 August, 2008
列出 標籤的清單
上圖是用在我的部落格的標籤清單，下方則是列出內文。
為了讓部落格在閱讀上更好找文章，我一直在找好用的方式。上一篇的 "其他我有在用的 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"'>
<div class='labelwrap'>
<div class='labelbg'>
</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"'>
</div>
</div>
<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:
hey..這里有點小提醒。那個
后面要加個 Eng-Tag 才能實現清單列表隔行的效果。否則沒辦法存檔。剛剛我試過這個方法，一切問題都解決了。
感謝告知啊！
Post a Comment