Tạo Read More (Đọc tiếp) một cách tự động V4
Cách đến nhanh bài viết:· Nhấp chuột trái vào mục muốn xem.
· Về đầu trang của Serial gồm 56 thủ thuật, nhấn nút
HomeSerial – Serial Thứ 1
[02] Tạo Read More (Đọc tiếp) một cách tự động V4
CÁCH THỰC HIỆN
Bước 1: Tìm dòng <data:post.body/>
<!– Tạo Read More (Đọc tiếp) một cách tự động V4 (1) –>
<b:if cond=’data:blog.pageType != “item”‘>
<div expr:id='”summary” + data:post.id’ style=’display:none;’><data:post.body/></div>
<script type=’text/javascript’>createSummaryAndThumb(“summary<data:post.id/>”);</script>
<div style=”clear:both” align=’right’ class=’rmlink’><a expr:href=’data:post.url’>
ĐỌC TIẾP »
</a></div>
</b:if>
<b:if cond=’data:blog.pageType == “item”‘><data:post.body/></b:if>
Thay chữ ĐỌC TIẾP » thành chữ khác nếu bạn muốn. Hoặc nếu muốn dùng hình ảnh thì bạn thay chữ ĐỌC TIẾP » trên bằng dòng code sau:
<img src=”Link_ảnh” />
Bước 2: Tìm thẻ đóng </head>
– Thêm vào trước nó đoạn code sau:
<!– Tạo Read More (Đọc tiếp) một cách tự động V4 (2) –>
<style type=’text/css’>
.thumbnailimg IMG {
max-width:186px;
width: expression(this.width > 186 ? 186: true);
max-height:120px;
height: expression(this.height > 120 ? 120: true);
}
.thumbnailimg {
nofloat: left;
padding:0px 10px 5px 0px;
}
</style>
<script type=’text/javascript’>
var thumbnail_mode = "no-float" ;
var classicMode = true; // Dùng kiểu mới chọn flase, true là kiểu cũ
var summary_noimg = 60; // Số từ tối đa khi bài viết không có ảnh nào
var summary_img = 60; // Số từ tối đa khi bài viết có ảnh
var indent = 3; // Số kí tự thụt vô đầu dòng
</script>
<script type=’text/javascript’>
//<![CDATA[
function stripHtmlTags(s,max){return s.replace(/<.*?>/ig, ”).split(/s+/).slice(0,max-1).join(‘ ‘)}
function getSummaryLikeWP(id) {
return document.getElementById(id).innerHTML.split(/<!–s*mores*–>/)[0];
}
function getSummaryImproved(post,max){
var re = /<.*?>/gi
var re2 = /<br.*?>/gi
var re3 = /(</{1}p>)|(</{1}div>)/gi
var re4 = /(<style.*?/{1}style>)|(<script.*?/{1}script>)|(<table.*?/{1}table>)|(<form.*?/{1}form>)|(<code.*?/{1}code>)|(<pre.*?/{1}pre>)/gi
post = post.replace(re4,”)
post = post.replace(re3,'<br /> ‘).split(re2)
for(var i=0; i<post.length; i++){
post[i] = post[i].replace(re,”);
}
var post2 = new Array();
for(var i in post) {
//if(post[i]!=” && post[i]!=’ ‘ && post[i] != ‘n’) post2.push(post[i]);
if(/[a-zA-Z0-9]/.test(post[i])) post2.push(post[i]) ;
}
var s = “”;
var indentBlank = “”;
for(var i=0;i<indent;i++){
indentBlank += ” “;
}
if(post2.join(‘<br/>’).split(‘ ‘).length < max-1 ){
s = post2.join(indentBlank +’ <br/>’);
} else {
var i = 0;
while(s.split(‘ ‘).length < max){
s += indentBlank + ‘ ‘ + post2[i]+'<br/>’;
i++;
}
}
return s;
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var content = div.innerHTML;
if (/<!–s*mores*–>/.test(content)) {
div.innerHTML = getSummaryLikeWP(pID);
div.style.display = “block”;
}
else {
var imgtag = “”;
var img = div.getElementsByTagName(“img”);
var summ = summary_noimg;
if(img.length>=1) {
if(thumbnail_mode == “float”) {
imgtag = ‘<span class=”thumbnailimg”><img src=”‘+img[0].src+'” /></span>’;
summ = summary_img;
} else {
imgtag = ‘<div class=”thumbnailimg” align=”left”><img src=”‘+img[0].src+'” /></div>’;
summ = summary_img;
}
}
var summary = (classicMode) ? imgtag + ‘<div>’ + stripHtmlTags(content,summ) + ‘ … </div>’ : imgtag + ‘<div>’ + getSummaryImproved(content,summ) + ‘</div>’;
div.innerHTML = summary;
div.style.display = “block”;
}
}
//]]>
</script>
Trong đoạn code trên sẽ có những chỗ bạn cần thay đổi như sau:
– 186 và 120 lần lượt là chiều rộng và chiều cao của ảnh thumbnail. Nếu thay, bạn nhớ thay cho đúng, mỗi cái xuất hiện tới 3 lần. Dùng max- phía trước là để giữ nguyên tỷ lệ ảnh khi thumbnail. Nếu muốn đồng nhất như nhau thì bạn bỏ chữ max- phía trước đi.
– no-float là chế độ hiển thị ảnh theo kiểu Gallery (ảnh nằm trên, chữ nằm phía dưới).
Bạn có thể đổi no-float thành float để cho ảnh của bạn hiện dồn về trái (hoặc phải), và chữ nằm ở phần ngược lại.
Bước 3: Save template. (Lưu mẫu)
THE END.
