用了blogger之後，才發現這兒不像Xuite、無名…等其它網誌有自動摘要的功能...文章一多之後，如果文章太長，就會讓首頁看起來很「落落長」，記錄一下我使用的方法，google一下有很多不同的版本，我選一個不太自動，但適合我的寫作習慣的方式來用，原作者文章教學網址在這兒...
step1. 先到版面配置->修改HTML，並且把 展開小裝置範本 打勾，程式碼搜尋找到 <b:skin><![CDATA[ ，<b:skin>這個tag之間都是放CSS的地方，在這裡找個位置貼上第一部份程式碼。
第一部份程式碼：
step2. 接著在]]></b:skin>和</head>之間找位置貼上第二部份程式碼，要注意的是，這邊要把程式碼先把"<"替換成< ;。
第二部份程式碼：
step3.
找到 <div class='post-header-line-1'/> 這一行
第三部份程式碼：修改加入下列紅色字體的程式碼。
第三部份程式碼會因為使用的Blogger TEMPLATE而有所差異，在im93使用的版型沒有 <div class='post-body'>這個<div>標籤，如下圖：
所以，修改這一段時，要在 <div class='post-header-line-1'/> 這一行的下方自己加一個<Div>標籤。
修改前：
修改後：
step4. 使用方法，發佈新文章時，把摘要部份打在前面，想要隱藏的文章內容放在
<span id="detail"></span> 或 <span id="fullpost"></span> 裡面就可以了
例如:
至於 "detail" 和 "fullpost" 的差別 是，前者文章會直接顯示在目前頁面，後者則會將頁面連結到所屬的文章獨立連結頁面做全文顯示 (聽不懂的話...就自己試試咩 冏...)
另外一個小技巧是，可以到blogger管理後台，設定->格式，然後找到最下方文章範本的地方，設定預設格式
step1. 先到版面配置->修改HTML，並且把 展開小裝置範本 打勾，程式碼搜尋找到 <b:skin><![CDATA[ ，<b:skin>這個tag之間都是放CSS的地方，在這裡找個位置貼上第一部份程式碼。
<b:skin><![CDATA[ 第一部份程式碼 ]]></b:skin>第一部份程式碼：
span.showDetail {
float: left;
border: 0px;
font-size: 8pt;
margin: 10px 0 10px 0;
padding: 0 10px 0 0px;
}
span.hideDetail {
display: none;
float: right;
border: 1px solid #333;
font-size: 8pt;
margin: 10px 0 10px 0;
padding: 0 10px 0 10px;
}step2. 接著在]]></b:skin>和</head>之間找位置貼上第二部份程式碼，要注意的是，這邊要把程式碼先把"<"替換成< ;。
]]></b:skin> 第二部份程式碼 </head>第二部份程式碼：
<!-- User defined inline javascript -->
<script language='javascript' type='text/javascript'>
<!-- Script functions for show detail article checking: showDetail(), hideDetail(), checkDetail() -->
function showDetail(id) {
var spans = document.getElementById(id).getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == 'detail' || spans[i].id == 'hideDetail')
spans[i].style.display = 'inline';
if (spans[i].id == 'showDetail')
spans[i].style.display = 'none';
}
}
function hideDetail(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == 'detail' || spans[i].id == 'hideDetail')
spans[i].style.display = 'none';
if (spans[i].id == 'showDetail')
spans[i].style.display = 'inline';
}
post.scrollIntoView(true);
}
function checkDetail(id, link) {
var spans = document.getElementById(id).getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == 'detail') {
spans[i].style.display = 'none';
document.write('<span id=showDetail class=showDetail>');
document.write('<a onclick=javascript:showDetail(\"'+id+'\"); href=javascript:void(0);>完整閱讀...</a>');
document.write('</span>');
document.write('<span id=hideDetail class=hideDetail>');
document.write('<a onclick=javascript:hideDetail(\"'+id+'\"); href=javascript:void(0);>文章收合...</a>');
document.write('</span>');
}
else {
if (spans[i].id == 'fullpost') {
spans[i].style.display = 'none';
document.write('<span id=showDetail class=showDetail>');
document.write('<a href=\"'+link+'\">閱讀全文...</a>');
document.write('</span>');
}
}
}
}
</script>step3.
找到 <div class='post-header-line-1'/> 這一行
<div class='post-header-line-1'/>第三部份程式碼：修改加入下列紅色字體的程式碼。
<div class='post-body' expr:id='"post-" + data:post.id'>
<!-- Add show detail check -->
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#detail, #fullpost {display:none;}</style>
<p><data:post.body/></p>
<script type='text/javascript'>
checkDetail("post-" + "<data:post.id/>", "<data:post.url/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
<div>第三部份程式碼會因為使用的Blogger TEMPLATE而有所差異，在im93使用的版型沒有 <div class='post-body'>這個<div>標籤，如下圖：
所以，修改這一段時，要在 <div class='post-header-line-1'/> 這一行的下方自己加一個<Div>標籤。
修改前：
<div class='post-header-line-1'/>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->修改後：
<div class='post-header-line-1'/>
<div expr:id='"post-" + data:post.id'> <!-- Add show detail check -->
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#detail, #fullpost {display:none;}</style>
<p><data:post.body/></p>
<script type='text/javascript'>
checkDetail("post-" + "<data:post.id/>", "<data:post.url/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>step4. 使用方法，發佈新文章時，把摘要部份打在前面，想要隱藏的文章內容放在
<span id="detail"></span> 或 <span id="fullpost"></span> 裡面就可以了
例如:
這是文章的摘要，這是文章的摘要，這是文章的摘要...<span id="fullpost">這是剩餘文章的內容</span>至於 "detail" 和 "fullpost" 的差別 是，前者文章會直接顯示在目前頁面，後者則會將頁面連結到所屬的文章獨立連結頁面做全文顯示 (聽不懂的話...就自己試試咩 冏...)
另外一個小技巧是，可以到blogger管理後台，設定->格式，然後找到最下方文章範本的地方，設定預設格式
全站熱搜
留言列表
