會將整個頁面弄得很高
非常難看
所以自己動手用 jQuery 自制一個網誌預覽功能 (不適用於 IE 8 版本以下或於相容模式下的 IE 8)
此程式會判斷在主頁面還是在網誌頁面
如果在主頁面則啟動預覽功能
原始碼如下:
$(document).ready(function(){
if ($("div.post").size() > 1 && (!$.browser.msie || $.browser.version >= 8)) {
var postBodyHeightPercentage = 0.1;
var postBodyMinimumHeight = 100;
$.each($("div.post > div.post-body"), function(){
var height = $(this).innerHeight() * postBodyHeightPercentage;
$(this).height(height <= postBodyMinimumHeight ? $(this).innerHeight() : height).css({
'overflow': 'hidden'
});
if (height > postBodyMinimumHeight) {
$(this).after($("<a>").css({
'float': 'right'
}).addClass("readMore").text("Read More"));
}
});
$(".readMore").toggle(function(){
var $button = $(this);
var $post = $(this).siblings("div.post-body");
$button.fadeOut("slow");
$post.animate({
'height': $post.height() / postBodyHeightPercentage
}, $post.height() / postBodyHeightPercentage, function(){
$post.css({
'overflow': 'visible'
});
$button.text("Hidden");
$button.fadeIn("slow");
});
}, function(){
var $button = $(this);
var $post = $(this).siblings("div.post-body");
$button.fadeOut("slow");
$post.animate({
'height': $post.height() * postBodyHeightPercentage
}, $post.height(), function(){
$post.css({
'overflow': 'hidden'
});
$button.text("Read More");
$button.fadeIn("slow");
});
});
}
});
使用方法:
請先在 Layout -> Edit HTML 找出以下的標籤
</head>在這個標籤前面加入以下程式碼
<script src="http://www.google.com/jsapi"/>
<script src='http://sites.google.com/site/lawrencespace/lawpronotes/js/blogger_readmore.min.js'/>
按下儲存
然後回到主頁面測試一下
注意: 如果網誌高度不夠，不會啟動 Read More function
相關書籍:
