• 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ùy biến Read More tự động với hình đại diện

14
19/12/2010

Chúng ta đã biết đến cách tạo Read More tự động với hình đại diện (Auto Readmore with Thumbnails) khá phổ biến trong cộng đồng Blogger vì nó là một trong những thủ thuật cần thiết nhất.

Hôm nay tôi xin giới thiệu một cách mà tôi đã xào nấu chế biến từ thủ thuật và có những tùy biến như tạo trường hợp ảnh đại diện float và không float, nếu ảnh đại diện được float thì có thể sang trái hoặc sang phải và nếu không được float thì được căn nằm giữa phần tóm tắt bài viết.

Xem Demo.

Sau đây là hướng dẫn cách cài đặt cho trường hợp ảnh đại diện float sang phải.

Bước 1. Đăng nhập Blogger vào Design >> Edit HTML chọn Expand Widget Templates.

Đặt đoạn code dưới đây vào trước thẻ </head>.

<!--Auto Readmore customized by Huynh Nhat Ha-->
<style type='text/css'>
.readmore {float:left}
.post-thumbnail {
float:right;
margin:0px 0 10px 10px;
}
.center-image {
display:block;
text-align:center;
margin:0px auto;
}
</style>
<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) {
if(thumbnail_float) {
imgtag = '<img src="'+img[0].src+'" class="post-thumbnail" width="'+img_thumb_width+'" height="'+img_thumb_height+'" alt=""/>';
summ = summary_img;
}
else {
imgtag = '<img class="center-image" style="width:'+img_thumb_width+'px; height:'+img_thumb_height+'px;" src="'+img[0].src+'" alt=""/></div>';
summ = summary_img;
}
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

var thumbnail_float = true;
summary_noimg = 350;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
//]]>
</script>

Bước 2. Tìm dòng <data:post.body/> hoặc dòng <p><data:post.body/></p> và thay nó bằng đoạn code 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>
<a class='readmore' expr:href='data:post.url'>Đọc thêm &#187;</a>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>

Lưu Template là OK.

Tùy biến: Nếu muốn ảnh đại diện float sang trái thì ở Bước 1 tại phần code CSS chỉnh lại như sau:

.readmore {float:right}
.post-thumbnail {
float:left;
margin:0px 10px 10px 0;
}

Nếu không cho ảnh đại diện float mà được căn giữa phần tóm tắt bài viết thì ở Bước 2 tại phần cuối đoạn code Javascript, thay dòng var thumbnail_float = true; thành var thumbnail_float = false;.

{14 bình luậnAdd yours ?}

Kira
15:06:00, 20 thg 12, 2010

trước tiên cám ơn bạn vì script hay này, tiếp theo là thắc mắc : mình muốn thêm nhìu dòng thông tin hơn rồi tới chữ đọc thêm thì phải tùy chỉnh thế nào vậy bạn ...

Reply
Kira
18:09:00, 20 thg 12, 2010

àh mình biết rồi

summary_noimg = 350; ---> số chữ không kèm hình
summary_img = 250; ---> số chữ kèm hình
img_thumb_height = 120; ---> chiều cao thumb
img_thumb_width = 120; ---> chiều rộng thumb

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

Anh ơi, sao em làm cách này, nó cứ bị lan sang cả các trang mới xong rồi ở những trang đó bấm vào read more nó ko ra dc bài viết mà vẫn chỉ hiện read more thôi

Reply
13:25:00, 28 thg 3, 2011

nếu bài viết không có hình ảnh thì muốn hiện 1 hình ảnh thông báo giống như blog của anh thì sao ?

Reply
16:02:00, 28 thg 3, 2011

@Hieu À thêm một chút về code, tìm trong tag Auto Readmore sẽ có bài như vậy

Reply
16:54:00, 28 thg 3, 2011

à em tìm được rồi dù sao cũng cảm ơn anh.

var imgtag = ""; <= nó ở dòng này :D
var img = div.getElementsByTagName("img");
var summ = summary_noimg;

Reply
18:09:00, 28 thg 3, 2011

sử dùng readmore bị lỗi khi làm trang page. E xem nhiều bài viết sửa lỗi này nhưng blog của em không được. E send code cho anh để anh sửa lại giúp em nhé :D

Reply
18:57:00, 28 thg 3, 2011

Em đọc bài này xem http://www.bloggerism.tk/2010/11/loai-readmore-khoi-static-page.html

Reply
18:59:00, 28 thg 3, 2011

@Hu?nh Nh?t H� Cái Avatar của Hiếu nhìn nổi da gà đó nha :67)

Reply
19:13:00, 28 thg 3, 2011

em thích skull :D

Reply
01:08:00, 6 thg 9, 2011

Em hỏi anh chút xíu.
Trong bài viết của em có thơ nên khi áp dụng cái read more thì nó hiển thị dưới dạng văn xuôi, Vậy có cách khắc phục không anh?

Tks!

Reply
06:58:00, 6 thg 9, 2011

Thế thì phải dùng Readmore của Blogger thôi bạn ạ. Dấu ngắt nhảy trong khung soạn thảo ấy, không dùng readmore tự động được.

Reply
07:28:00, 6 thg 9, 2011

Không phải đâu DNH, ngoài cách dùng jump break của Blogger còn có thể dùng Autoreadmore như thế này:

Code Bước 1:

<script type='text/javascript'>
summary_txt = 400;
img_thumb_width = 125;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<img")!=0)
{
var s = strx.split("<img");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=0){
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, pURL){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
if(img.length<=0) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'" title="'+'"><img src="http://lh6.ggpht.com/_dsEG33PDaHw/TSJuyxzIKkI/AAAAAAAAAgU/GP7fRmaI-5A/thumbnail.png" width="'+img_thumb_width+'px" /></a></span>';
summ = summary_txt;
}
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'" title="'+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px"/></a></span>';
summ = summary_txt;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Và code Bước 2:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id' style='font-size:14px; text-align:justify;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Đọc thêm ...</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Reply
10:48:00, 22 thg 12, 2012

cảm ơn bạn nhé. mình làm đc rồi :)

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