"Tiện ích tự động tóm tắt bài viết có ảnh thumb cho blogger"

(Traidatmui.com) – Trước đây mình đã có giới thiệu đến các bạn thủ thuật tạo nút read more (Đọc tiếp) cho blogger tại đây, tuy nhiên với thủ thuật trước thì bạn phải cần thêm code trong khi soạn thảo bài viết của bạn mới có thể ứng dụng được nút read more. Hôm nay mình xin chia sẻ đến các bạn một thủ thuật đơn giản và tiện ích hơn thủ thuật trước, với thủ thuật này thì bài viết của của sẽ được tự động tóm tắt một đoạn trong bài đăng của bạn, và nếu bài viết của bạn có ảnh sẽ được hiển thị dạng ảnh thumbnail.

Hình ảnh minh họa
1. Đăng nhập vào tài khoản blogspot
2. Vào thiết kế (Design) chọn chỉnh sửa HTML (Edit HTML)
3. Chọn mở rộng tiện ích
4. Chèn code bên dưới vào trước thẻ ]]></b:skin>
.readmore {
float:right;
margin:1px 10px 5px 0px;

padding:3px;}
.readmore a{
color:#fff;
padding:3px 5px 3px 5px;
background:#0000ff;
}
.readmore a:hover{
color:#0000ff;
background:#ddd;}

.sumpost {
color:#000;
font-family:arial;
font-size:12px;}
.img-post {
float:left;
margin-right:5px;
border:1px solid #fff;
height:96px;
padding:1px;}

5. Tiếp đến bạn chèn code bên dưới vào sau thẻ <head>
<script type='text/javascript'>
var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 230; //số ký tự bài viết hiển thị khi không có ảnh
summary_img = 500; //số ký tự bài viết hiển thị khi có ảnh
img_thumb_height = 90; //chiều cao của ảnh thumb
img_thumb_width = 100; //độ rộng của ảnh thumb
</script>
<script src='http://data-traidatmui.appspot.com/scripts/auto_sumpost.js' type='text/javascript'/>

Bạn dựa vào hướng dẫn trong code để tùy chỉnh cho phù hợp với blog của mình
6. Bây giờ bạn tìm đến đoạn code như bên dưới
<data:post.body/>

7. Thay đoạn code vừa tìm được ở trên thành code bên dưới
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<p><data:post.body/></p>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div class='readmore'><a expr:href='data:post.url'>Đọc tiếp...</a></div>
</b:if>


8. Cuối cùng save template lại

Lưu ý: Nếu trước đây bạn đã thêm tiện ích read more (Đọc tiếp) thì bạn nên gở bỏ trước khi thêm thực hiện thủ thuật này để tránh việc trùng lấp trong bài viết của bạn.

☼ Cập nhật

Vâng với thủ thuật này khi bạn sử dụng tính năng tạo trang mới của blogger, bạn sẽ gặp phải một lỗi đó là nội dung ở trang này sẽ không hiển thị toàn bộ được. Để khắc phục lỗi này thì bạn hãy thêm đoạn mã vào đoạn code ở bước 7 như bên dưới.
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<p><data:post.body/></p>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div class='readmore'><a expr:href='data:post.url'>Đọc tiếp...</a></div>
</b:if>
</b:if>

Code màu đỏ chính là phần code thêm vào code ở bước 7, nếu bạn không rỏ thì có thể sử dụng hẳn code này thay cho code bước 7.

Chúc bạn thành công

Tham khảo Fandung.com

Xem khác cùng chủ đề

26 nhận xét | Viết lời bình

11/13/2010 06:11:00 SA Trả lời

anh Dinh ơi, tiện ích này khi hiển thị ở menu, mình click vào thì ko hiển thị đầy đủ bài viết, anh xem lại rồi giúp em nha!

Admin
11/13/2010 06:15:00 SA Trả lời

Đây là thủ thuật tóm tắt bài viết trên blog, e nói hiển thị ở menu là như thế nào, em nói rõ hơn a mới có thể giúp em được.

11/13/2010 08:13:00 SA Trả lời

phía trên blog của em có phần menu: trang chủ - about me - blog sao - giải trí , em tạo ra nó nhờ vào tiện ích "trang" của blogger, anh click vào xem thử là hiểu à, khi vào trang cũng hiện "đọc thêm" nhưng khi mình click vào thì lại ko hiện cả trang. Anh giúp em nha, em cám ơn anh rất nhiều

11/18/2010 01:16:00 SA Trả lời

Hi em Mai Ly nen doc bai nay de giai quyet su cố ở blog em nhé. Không khó đâu.

http://huynh-nhat-ha.blogspot.com/2010/11/loai-readmore-khoi-static-page.html

12/10/2010 08:40:00 CH Trả lời

Bạn ơi ở trang tĩnh như giới thiệu, about, bấm vào Xem tiếp, nó không hiện ra toàn bộ bài.
Bạn fix lại giùm mọi người với.

Admin
12/11/2010 12:43:00 SA Trả lời

Vâng mình đã fix và cập nhật lại,bạn tham khao nhe.

12/11/2010 09:18:00 SA Trả lời

Cho tôi hỏi là tôi mới đổi lại dùng template Hybrid, nó đã có sẵn chức năng tạo ảnh thumbnail và rút gọn bài viết( tuy không có chữ readmore), khi tôi còn dùng cách làm trước thì bấm vào xem tiếp không ra toàn trang, tôi vẫn chưa sửa lại mà đổi sang dùng template này, bây giờ chuyển sang dùng template Hybrid này nó vẫn bị hỏng phần trang tĩnh, tôi muốn sửa lại nhưng không sửa được vì không có giống như vậy.
Có thể xin chỉ cho tôi code làm mất readmore ở trang tĩnh được không.
Trong trường hợp của tôi khó quá

Admin
12/12/2010 01:43:00 SA Trả lời

Đối với template Hybrid News thì bạn không cần thực hiện thủ thuật này, mình đã xem qua và thấy khi bạn tạo trang bằng tính năng có sẳn của Blogger thi nó vẫn hiển thị đầy đủ bài viết của bạn ở trang này.

2/05/2011 07:38:00 SA Trả lời

Ban giup minh tao 1 kieu read more giong trang nay duoc khong
Minh thich cai kieu tieu de bai viet nam ngang voi hinh anh, va nhin no rat gon
http://www.duyblog.com/

2/07/2011 06:20:00 SA Trả lời

quá hay nhưng sau tiện ích này hiển thị tới 20 bài đăng trên 1 nhãn, có cách gì giảm số bài hiển thị không ạ

Admin
2/07/2011 06:24:00 CH Trả lời

Bạn xem bài viết này nhé, bài viết sẽ giúp bạn hạn chế được số bài viết ở trang nhãn. Xem tại đây

9/11/2011 07:11:00 CH Trả lời

khong tim dc " "

9/11/2011 07:13:00 CH Trả lời

Mình mắc ở bước 6, không search được từ đó, help.

Admin
9/11/2011 07:30:00 CH Trả lời

Bạn chọn mở rộng mẫu tiện ích (Expand Widget Template) trước khi Search. Bạn xem bước 3 nhe

9/12/2011 12:19:00 SA Trả lời

I had changed successfully. Thanks so much!

Admin
9/12/2011 12:38:00 SA Trả lời

Ok! =L:

9/12/2011 07:02:00 CH Trả lời

nó ra tới 2 bài viết trong 1 trang thì làm sao hả anh

9/12/2011 07:06:00 CH Trả lời

trong 1 bài viết nó hiện ra tới 2 bài lận khi nhấn vào đọc ấy ...

Admin
9/12/2011 09:01:00 CH Trả lời

Đó là trong template em có tới 2 ID Blog1 và Blog2, em xóa đi một cái nó sẽ không bị lặp lại bài viết đó

Nặc danh
11/17/2011 07:59:00 SA Trả lời

Mình làm theo đúng như bạn hướng dẫn mà không được. Máy cứ báo lỗi : "Chúng tôi không thể lưu mẫu của bạn
Hãy sửa lỗi bên dưới và gửi lại mẫu của bạn.
Có trên một tiện ích được tìm thấy bằng: Image6. Các ID tiện ích phải là duy nhất". Mình phải làm sao bạn ơi

Admin
11/17/2011 10:38:00 CH Trả lời

@ Nặc danh: Bạn hãy thử refresh lại sau đó thực hiện save từng bước xem xay ra lỗi ở code nào. Hiện tại Blogger đôi khi vào chỉnh sửa HTML (chỉnh sửa template) thì nó tự động thêm một thẻ vào data:blog.languageDirection làm cho cấu trúc mẫu không đúng nên không thể lưu lại. Bạn reload lại và làm lại nhé.

1/07/2012 11:01:00 CH Trả lời

Chào bạn, thủ thuật rất hay. Mình áp dụng thành công tuy nhiên số bài đăng của mình chỉ hiện có 5 bài thôi (ít quá). Mình vào phần cài đăth chỉnh lại thành 25 bài tuy nhiên nó vẫn chỉ hiện 5 bài thôi. Mình cũng đã thử cách như bạn HD tại http://www.traidatmui.com/2011/02/tuy-chinh-so-bai-viet-hien-thi-o-trang.html và chỉnh lên 25 tuy nhiên số trang hiển thị vẫn không thay đổi (là 5). Mong bạn tìm và chỉ cho mình nguyên nhân và cách khắc phục nhé. Thanks!

6/03/2012 11:09:00 SA Trả lời

ko làm được, nó ko hiện gì thu gọn gì mà hiện tất

7/02/2014 03:03:00 SA Trả lời

mình chèn code vào nhưng không thấy nó thay đổi gì cả

Admin
7/05/2014 07:45:00 CH Trả lời

Bạn xem đã chèn chính xác tất cả như hướng dẫn chưa nhé

8/11/2015 06:12:00 SA Trả lời

cái này áp dụng cho tất cả các nhãn trên blog, nhưng em chỉ muốn áp dụng nó trên 1 số nhãn cụ thể thì làm thế nào ạ mong anh hướng dẫn thêm

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang