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

Điểm 4.6/5 dựa vào 87 đánh giá

(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

Loading...

26 nhận xét

  1. 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!

    Trả lờiXóa
  2. Đâ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.

    Trả lờiXóa
  3. 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

    Trả lờiXóa
  4. 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

    Trả lờiXóa
  5. 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.

    Trả lờiXóa
  6. Vâng mình đã fix và cập nhật lại,bạn tham khao nhe.

    Trả lờiXóa
  7. 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á

    Trả lờiXóa
  8. Đố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.

    Trả lờiXóa
  9. 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/

    Trả lờiXóa
  10. 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 ạ

    Trả lờiXóa
  11. 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

    Trả lờiXóa
  12. Mình mắc ở bước 6, không search được từ đó, help.

    Trả lờiXóa
  13. 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

    Trả lờiXóa
  14. I had changed successfully. Thanks so much!

    Trả lờiXóa
  15. nó ra tới 2 bài viết trong 1 trang thì làm sao hả anh

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

    Trả lờiXóa
  17. Đó 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 đó

    Trả lờiXóa
  18. 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

    Trả lờiXóa
  19. @ 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é.

    Trả lờiXóa
  20. 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!

    Trả lờiXóa
  21. ko làm được, nó ko hiện gì thu gọn gì mà hiện tất

    Trả lờiXóa
  22. mình chèn code vào nhưng không thấy nó thay đổi gì cả

    Trả lờiXóa
    Trả lời
    1. Bạn xem đã chèn chính xác tất cả như hướng dẫn chưa nhé

      Xóa
  23. 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

    Trả lờiXóa