• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Tạo Read More tự động với hình đại diện trên Blogger

10
14/10/2010

Tạo liên kết Read More (đọc thêm) cho bài viết trên Blogger một cách tự động mà không cần thao tác thủ công dùng các thẻ span (class=fullpost) để ngăn phần miêu tả và phần đăng bài đầy đủ như cách cũ, ngoài ra còn hỗ trợ hình đại diện (thumbnail) khá chuyên nghiệp, lấy hình đầu tiên trong bài viết làm hình đại diện.

Hướng dẫn cài đặt:

Bước 1: Vào Bố cục (Layout) – Chỉnh sửa HTML (Edit HTML), chọn Expand widget, tìm đến thẻ <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>

Bước 2: Thêm đoạn mã dưới đây vào phần HEAD (giữa 2 thẻ <head> ... </head>) của template:

<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>

Lưu ý các thông số màu đỏ trong đoạn mã phía trên:
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).

{10 bình luậnAdd yours ?}

09:57:00, 17 thg 1, 2011

Cảm ơn bài viết của anh rất hay

Reply
23:02:00, 26 thg 2, 2011

Thủ thuật này anh cho canh đều "justify" như thủ thuật tạo Read more không sử dụng Javascript được không anh?

Reply
23:16:00, 26 thg 2, 2011

Muốn canh đều thì đặt CSS này:
#content {
text-align:justify;
}

Muốn bài viết canh đều thì đặt cái này

.post-body {
text-align:justify;
}

với blog lynhatruc thì đặt zầy

#content .post .post-entry {
text-align:justify;
}

:58)

Reply
23:26:00, 26 thg 2, 2011

@Huỳnh Nhật HàMắc cỡ thiệt! :( Em không biết đặt mấy code đó vào chỗ nào nữa?

Reply
23:35:00, 26 thg 2, 2011

Đặt trước thẻ ]]</b:skin> chứ đâu em.

Reply
23:38:00, 26 thg 2, 2011

@Huỳnh Nhật HàOh! Bài viết đẹp lắm, cám ơn anh!

Reply
08:02:00, 23 thg 2, 2012

Cảm ơn chủ topic nhé
Mr Phim

Reply
16:56:00, 1 thg 3, 2012

Em đã làm thử cả 2 cách làm Read more trên trang của anh, bên đây thì có hiển thị nhiều dòng summary nhưng chữ Read more không trang trí gì cả nên hơi thường, còn bên http://www.thuthuatblogger.info/2011/01/auto-reamore-without-javascript-for.html có khung viền màu đen xung quanh chữ Read more nên trông đẹp hơn hẳn, tiếc là chỉ summary 140 chữ. Anh chỉ em cách làm chữ Read more đẹp hơn cho loại dùng javascript này được không ạ^^

Reply
17:04:00, 1 thg 3, 2012

@Vân Hạnh
ah anh giúp em thêm cách không để ảnh thumbnail cho dạng này^^

Reply
23:31:00, 29 thg 7, 2014

good luck

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn