Share All World
Nghiêm cấm click vào cái loa (100+) !!!

Auto readmore với thumbnail trên Blogger dùng Script - Style 1

Auto readmore với thumbnail trên Blogger dùng Script - Style 1
Trong bài này namkna sẽ hướng dẫn các bạn tạo Auto Readmore (đọc thêm) cho bài viết tự động hoàn toàn không còn thủ công như trước đây. Với Script mình giới thiệu hỗ trợ ảnh Thumbail lấy hình ảnh đầu tiên xuất hiện trong bài viết để làm ảnh đại diện, do vậy blog của bạn nhìn sẽ chuyên nghiệp hơn.

Thêm 1 điểm nữa là tiện ích lấy ảnh trong Album Picsa làm ảnh thumbnail, Với những hình ảnh không thuộc host Picasa của google sẽ không lấy được thumbnail. Do vậy bạn hãy Upload trực tiếp ảnh của mình lên blog khi post bài nha.
Ảnh minh họa:
Auto readmore với thumbnail trên Blogger dùng Script - Style 1
☼ Cách tiến hành:

1- Đăng nhập (login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (process)
4- Click chọn Mở rộng tiện ích mẫu ( Expand Template Widgets)
5- Tìm (Ctrl +F) thẻ bên dưới:
<data:post.body/>
- Và thay nó bằng đoạn mã sau đây:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>--&gt;Đọc thêm...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
6- Thêm đoạn mã dưới đây vào sau thẻ <head> (hoặc đặt trước thẻ </head>):
<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</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;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}


//]]>
</script>

Trong đó bạn thay đổi các thông số cho phù hợp với blog của bạn nha:
  • summary_noimg là số ký tự phần miêu tả cho các bài không có hình đại diện.
  • summary_img là số ký tự phần miêu tả cho các bài có hình đại diện.
  • img_thumb_height chiều cao của hình đại diện (pixel).
  • img_thumb_width chiều rộng của hình đại diện (pixel).
7- Bấm Lưu mẫu lại và về trang chủ của blog để xem kết quả nha.

Nếu bạn sợ sử dụng scrip sẽ làm blog bạn chậm thì bạn có thể xem bài viết tạo autoread more không sử dụng Javarscrip Tại đây
Nhãn:

Không có nhận xét nào:

Đăng nhận xét