Thủ thuật: Tự động tóm tắt bài viết với ảnh thumbnail cho Blogspot - Bản mới nhất

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

Thủ thuật: Tự động tóm tắt bài viết với ảnh thumbnail cho Blogspot - Bản mới nhất
Traidatmui.com – Theo yêu cầu của bạn Nguyễn Thanh Hải thì hôm nay mình xin chia sẻ cùng các bạn thủ thuật "Tự động tóm tắt bài viết cho Blogspot" với cách hiển thị hoàn toàn khác so với thủ thuật trước đây. Với thủ thuật "Tiện ích tự động tóm tắt bài viết có ảnh thumb cho blogger" mà mình chia sẻ trước đây chỉ giới hạn ở việc phần ảnh thumbnail và phần nội dung bài viết, còn những phần khác như tiêu đề bài viết, phần chân bài viết, ngày tháng đăng bài... sẽ tùy chỉnh theo mặc định của blogger. Nếu bạn thực hiện theo thủ thuật trước đây phần tiêu đề bài viết sẽ hiện thị ở trên còn hình ảnh và phần tóm tắt nội dung sẽ được hiện bên dưới và các phần khác sẽ được giữ nguyên không bị tác động đến.

Hình ảnh minh họa
Thủ thuật: Tự động tóm tắt bài viết với ảnh thumbnail cho Blogspot - Bản mới nhất

Và thủ thuật mình sắp giới thiệu sẽ giúp bạn có thể tùy chỉnh cho cách hiển thị bài viết trông đẹp hơn, theo ý muốn của mình. Ảnh thumb sẽ được float về bên trái và tiêu đề, nội dung hay thông tin bài viết được đưa về phía bên phải trông chuyên nghiệp hơn và dễ dàng tùy chỉnh theo ý mình.

Lưu ý: Ở đây mình chỉ hướng dẫn chung với template cơ bản của Blogger, các bạn hãy tùy theo giao diện blog hiện tại của mình mà chỉnh sửa màu sắc lại cho phù hợp nhé

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chọn mở rộng mẫu tiện ích (Expand Widget Templates)
5. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>
.sumpost{text-shadow:0 1px #fff;color:#111;font-family:arial;font-size:12px;line-height:1.4;margin:0;padding:6px 8px}
.img-post img{background:#fff;float:left;margin:6px 8px 0 8px;border:1px solid #ccc;height:100px;width:120px;padding:2px}
.sumpost h2{font-size:16px;background:none;padding:0;margin:0;line-height:1.2}
.sumpost h2 a{color:#160}
.sumpost .postinfo{color:#0e3f4f;padding:3px 0 3px 8px;margin:0;border-bottom:dotted #ddd 1px}
.sumpost .postinfo .numcm{margin:0 2px 0 2px}
.sumpost .postinfo .author{margin:0 2px 0 0}
.sumpost .postinfo .numcm .num{color:#f80}
.sumpost .postinfo .label{margin:0 2px 0 2px}
.sumpost .postinfo .label a{color:#b0039a}
.readmore{float:right;margin:8px 0 0;padding:0 0 0 0}
.readmore a{color:#d7034e;padding:0}
.readmore a:hover{color:#00f}
.borderline{border-top:1px solid #bbb;border-bottom:1px solid #fff;margin:4px 0 0 0}
6. Chèn tiếp code bên dưới vào trước thẻ </head>
<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
no_image = "http://bit.ly/hGWr7r";
sumposts = 500; //số ký tự bài viết hiển thị khi có ảnh
</script>
<script src='http://data-traidatmuidotcom.appspot.com/scripts/auto_sumpost_new.js' type='text/javascript'/>
<style><b:if cond='data:blog.pageType == "index"'>.post-footer,.post h3,h2.date-header{display:none;}</b:if></style>
7. Tiếp theo bạn hãy tìm đến dòng code bên dưới
<data:post.body/>
8. Thay thế code vừa tìm được thành đoạn code bên dưới
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<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>
<b:loop values='data:post.labels' var='label'>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.title/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.author/>&quot;,&quot;<data:top.authorLabel/>&quot;,&quot;<data:post.numComments/>&quot;,&quot;<data:top.commentLabelPlural/>&quot;,&quot;<data:label.name/>&quot;,&quot;<data:postLabelsLabel/>&quot;,&quot;<data:label.url/>&quot;);
</script>
</b:loop>
</b:if>
</b:if>
9. Cuối cùng là save lại.

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

Loading...

30 nhận xét

  1. cám ơn bạn Trai Đất Mũi nhiều :> :)

    Trả lờiXóa
    Trả lời
    1. ak mình làm được rồi. cám ơn bạn nha
      ak mà có 1 lỗi đó là tự dưng có 1 cái đường kẻ thẳng dưới mà k hiểu nó từ đâu ra :D
      đây này bạn
      https://lh3.googleusercontent.com/-0FuNP9tB9Zc/UJvVNcku07I/AAAAAAAAAVw/wmgk98T77xM/s640/duong.jpg
      bạn xem giúp mình với

      Xóa
    2. Nếu đường kẽ 2 lằn kề nhau đấy là .borderline mà mình trang trí ở trên, còn đường kẽ khác bạn hãy xem lại phần border ở phần .post hay .post-body trong template của bạn.

      Xóa
    3. thật sự là mình k thấy cái border kiểu đó ở đâu :D
      template của mình tự viết nên k có mà

      Xóa
    4. ak cám ơn bạn nhiều nha:D mình sửa được rồi, hóa ra là cái .borderline mình phải để border-bottom: none; hihi

      Xóa
    5. Cái đó mình trang trí thôi, tùy mỗi người có thể dùng cách trang trí khác

      Xóa
  2. ak có 1 lỗi nữa mới xuất hiện !
    Đó là khi vào phần nhãn của blog thì nó lại xuất hiện 2 tiêu đề :D
    còn phần trang chủ thì không có
    https://lh6.googleusercontent.com/-4ztF_wUQ8_c/UJzHNcvs80I/AAAAAAAAAWA/D-JDoPmvzno/s576/Untitled.jpg

    Trả lờiXóa
    Trả lời
    1. Ah cái đấy mình đã phát hiện hồi tối nhưng chưa chỉnh sửa lại, bạn hãy copy đoạn code ở bước 6 lại nhé

      Xóa
    2. Nhận xét này đã bị tác giả xóa.

      Xóa
  3. hi cám ơn bạn nhiều nha, mình làm đc rồi :)

    Trả lờiXóa
  4. hi, mình thấy có 1 lỗi nữa bạn giúp mình với, đó là nó k thực hiện đc trên firefox :D chỉ được trên crom thôi, cám ơn bạn :D

    Trả lờiXóa
    Trả lời
    1. Mình test là trên Firefox mà bạn, chạy bình thường. File js ở trên bạn dùng của mình hay là bạn copy về và tải lên host riêng?

      Xóa
    2. mình up lên host riêng rồi mà
      bạn test thử xem :D
      http://thehinhtainha.blogspot.com/

      Xóa
    3. Đấy là do lỗi do bạn copy code script về, bạn nên tải file js về bằng IDM không nên copy dán vào Notepad. Tải về rồi đưa lên host bạn.

      Xóa
    4. mình tải code bằng internet explorer, firefox cả trực tiếp lẫn idm, crom bằng idm, mà vẫn k được bạn ak :D
      k bit còn lý do nào khác k nhỉ. hihi

      Xóa
    5. Không biết là hiện tại bạn dùng file JS mặc định ở trên thì có xảy ra hiện tượng đấy không, tức file js của mình. Tại vì thủ thuật này mình test trực tiếp trên firefox mà

      Xóa
    6. hi, mình dùng file Js của bạn và test trên firefox và crom đều ngon cả, file Js của mình up lên code.google sao k đc nhỉ, chỉ được mỗi crom :D

      Xóa
    7. Nếu như thế nếu bạn tải về bằng IDM và không chỉnh sửa gì thì sẽ không thể gặp lỗi như thế được bạn.

      Xóa
  5. Lâu rồi mới ghé thăm blog game của cậu, game cho android này chơi thú vị và hấp dẫn lắm, game android giờ phổ biến hơn game java rồi nhĩ. Để mình tai game cho android ở website cậu về chơi thữ xem sao. Mình nghĩ có thêm 1 số game cho iphone thì tuyệt hơn, game iphone giờ cũng khá phổ biến đó. Khi tai game iphone hình như được miễn phí giá cước đó !

    Trả lờiXóa
    Trả lời
    1. Những comment cùng nội dung lặp lại nhiều lần mình sẽ xóa và loại hẵn không cho hiện tại đây nhé bạn ơi.

      Xóa
  6. oke bạn. thì ra mình down file Js về mình lại đổi tên nó thế là k được:D
    có 1 lỗi nữa đó là cái nhãn chỉ hiện được 1 nhãn thôi, mình add 2 nhãn vào thì cái nhãn thứ 2 nó lại chui xuống phần tóm tắt bài viết :D

    Trả lờiXóa
  7. bạn ơi sao tiêu đề bị lỗi này vậy ah?
    undefined
    undefined undefined | undefined undefined | undefined undefined

    Trả lờiXóa
    Trả lời
    1. Cái lỗi đấy là do trong template của bạn đã áp dụng thủ thuật auto readmore trước đây, không có biến title nên nó không nhận dạng được. Bạn phải gỡ bỏ tất cả code trước đây và thực hiện lại các bước trên nhé.

      Xóa
  8. mình làm đến bước 8 tìm thì ra 2 chỗ có ,thay vào chỗ nào vậy bạn

    Trả lờiXóa
    Trả lời
    1. Nếu bạn tìm gặp 2 đoạn <data:post.body/> nằm kề nhau có thể bạn đã thực hiện thủ thuật liên quan, bạn hãy thay thế cả 2 và nhớ xác định đúng thẻ mở đóng cho đúng mới lưu code được nhé. Còn nếu là 2 đoạn <data:post.body/> nằm xa nhau bạn thay thế cái đầu tiên nhé.

      Xóa
  9. sao mình làm rồi mà ko có j` thay đổi nhỉ

    Trả lờiXóa
  10. Sao em làm giống như vậy nhưng khoảng cách giữa 2 bài nó xa quá vậy anh? Anh xem giúp em với được không?

    Trả lờiXóa
    Trả lời
    1. Bạn xem các thuộc tính margin và padding của class .post

      Xóa