Hiển thị

Home »
Thứ Tư, 22 tháng 2, 2012

Auto Readmore cho Blogspot

Auto Readmore với ảnh thumbnail là tiện ích xuất hiện đã lâu và được cộng đồng Blogspot sử dụng rất phổ biến bởi những lợi ích rất thiết thực mà nó mạng lại. Tuy Google cũng đã bổ sung JumpLink ( một dạng Readmore ) cho Blogspot nhưng dường như vẫn chưa thỏa mãn yêu cầu của các Blogger. Việc thực hiện thủ công JumpLink cho từng bài post xem ra khá nhọc nhằn đối với những Blog đã có nhiều bài viết.




Bây giờ chúng ta bắt đầu thủ thuật:

Bước 1 : Vào Thiết kế > Chỉnh sửa HTML > Mở rộng mẫu tiện ích

Bước 2 : Tìm trong template ( Ctrl + F ) dòng <data:post.body/> và thay thế nó bằng đoạn code bên dưới
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> 
<b:else/> 
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/> 
<b:else/> 
<div expr:id='"summary" + data:post.id'><data:post.body/></div> 
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>"); 
</script> <span class='rmlink' style='float:right;padding-top:10px;'><a expr:href='data:post.url'> Đọc tiếp… </a></span> 
</b:if></b:if>
Bước 3 : Chèn đoạn code bên dưới vào trước thẻ đóng </head>
<script type='text/javascript'>var thumbnail_mode = "float" ; 
summary_noimg = 430; // Số ký tự hiển thị khi không có ảnh
summary_img = 340;    // Số ký tự hiển thị khi bài viết có ảnh
img_thumb_height = 100; // Chiều cao của ảnh
img_thumb_width = 120; // Bề rộng của ảnh
</script> 
<script type='text/javascript'> 
//<![CDATA[ 
function removeHtmlTag(strx,chop){ 
if(strx.indexOf("<")!=-1) 
{ 
var s = strx.split("<"); 
for(var i=0;i<s.length;i++){ 
if(s[i].indexOf(">")!=-1){ 
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); 
} 
} 
strx = s.join(""); 
} 
chop = (chop < strx.length-1) ? chop : strx.length-2; 
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
strx = strx.substring(0,chop-1); 
return strx+'...'; 
} 
function createSummaryAndThumb(pID){ 
var div = document.getElementById(pID); 
var imgtag = ""; 
var img = div.getElementsByTagName("img"); 
var summ = summary_noimg; 
if(img.length>=1) { 
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></span>'; 
summ = summary_img; 
} 
if(img.length<1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijEtrqstsA8kqnAO6GbV4Z847xjyqXUm-9JsYc22AsLr9KUlhDXj6jr89fJ6Aeuj58GKbpbVbQRWI4b3HxxWWB5Ay0HZnPHvaLh7Ez-3OqvLqtfry5gsYCBBvoS-S1uVJczCNRy7sajD8U/" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></span>'; 
summ = summary_img; 
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; 
div.innerHTML = summary; 
} 
//]]> 
</script>
* Đoạn code trên đã thêm ảnh mặc định cho những bài viết không có ảnh, Căn cứ vào các chú thích để chỉnh sửa cho phù hợp với blog.
Bước 4 : Save template .
Tags: ,

You may also...

Comments[ 0 ]


Đăng nhận xét

Hot