2008年3月1日 星期六
[Blogger]修改Archive相關功能
- 欲解決Archive List在IE下其三角形過大的問題，加入以下code至CSS block：
/* -- fix the too big triangle in archive-list problem -- */
#ArchiveList .toggle-open { /* Fixed for IE */
_font-size: 80% !important;
} - 預設的Archive List會將最近月份的文章列表展開，若是文章很多會影響美觀，解決辦法是先找到以下Code：
<li expr:class='"archivedate " + data:i.expclass'>
修改成如下所示：<li expr:class='"archivedate collapsed"'> - Blogger預設顯示某月份Archived Posts的方式是將所有文章內容展開，但是這樣很不美觀。解決這個問題步驟如下：
將以下Code加入<head>與</head>之間：<script type="text/javascript">
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}
function showFullPost(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'inline';
if (spans[i].id == "readmore")
spans[i].style.display = 'none';
}
}
var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}
function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}
function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}
</script>
接著展開小裝置範本，尋找<b:includable id='main' var='top'>，將下列Code增加於其前面：<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table style='width:500px; border: 1px dashed #888888 ; padding-bottom:1.5em; margin-bottom:0;'><tr>
<td width='40px'>
<a expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"' href='javascript:void(0)' style='text-decoration:none' title='Expand/collapse this post'>[+/-]</a>
</td>
<td>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
</td>
</tr>
</table>
<div class='post-body' expr:id='data:post.id' style='display:none'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
</b:includable>
修改下列Code（紅色為新增部分）：<b:includable id='main' var='top'>
<!-- POSTS -->
<div class='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:include data='top' name='status-message'/>
<!-- new -->
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='PeekABooPost'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<!-- new --> - Done!
參考資料：
No comments yet