在blogger首頁只顯示文章摘要, 隱藏全文的做法

http://sulatio.blogspot.com/2007/11/bloggerread-more.html


首先要注意的是, 每次修改之前, 最好先備份一下模板.




備份說明: 按一下 "下載完整模版", 把目前的template 另存到電腦.




先選擇 範本--> 修改 html --> 打勾 展開小裝置範本




1.在 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>






2.再來就是找到下列這段程式碼, 把相關程式加上去








<b:includable id='post' var='post'>


<div class='post' expr:id='"post-" + data:post.id'>


<a expr:name='data:post.id'/>








<div class='post-header-line-1'/>


<div class='post-body'>


<b:if cond='data:blog.pageType == "item"'>


<p><data:post.body/></p>


<b:else/>


<style>#fullpost {display:none;}</style>


<p><data:post.body/></p>


<span id='showlink'>


<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'


href='javascript:void(0);'>[+/-] 繼續閱讀...</a></p>


</span>


<span id='hidelink' style='display:none'>


<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'


href='javascript:void(0);'>[+/-] 只顯示摘要...</a></p>


</span>


<script type='text/javascript'>


checkFull("post-" + "<data:post.id/>");


</script>


</b:if>


<div style='clear: both;'/> </div>






其中,繼續閱讀及只顯示摘要的文字, 可以自己換掉.






4. 在設定-->格式






文章範本加入這行




"文章摘要的部分<span id="fullpost">這裡是要隱藏的部分</span>"



沒有留言:

張貼留言