[02] Tạo nút Read More (Đọc thêm) một cách tự động
Nguồn: Anh Võ
Tuy đã tự động Readmore cho blog nhưng blog vẫn sẽ tải toàn bộ nội dung của các bài viết. Để giảm thời gian tải của blog, bạn nên kết hợp thêm chức năng “Read more” có sẵn của Blogspot. Thực hiện việc này cũng có nghĩa là sẽ ngăn chặn được việc hay mất bài viết trên blog.
CÁCH THỰC HIỆN
1. Đăng nhập Blogger
2. Chọn: Mẫu > Chỉnh sữa HTML
3. Chèn script
Bước 1: Tìm dòng <data:post.body/>
- Thay thế nó bằng đoạn code sau:
<!-- 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ữ
<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ữ
- 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)
0 nhận xét:
Đăng nhận xét