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

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!

Xem khác cùng chủ đề

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

11/08/2012 03:43:00 SA Trả lời

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

Admin
11/08/2012 06:52:00 SA Trả lời

Bạn thử xem sao nhé :)

11/08/2012 07:53:00 SA Trả lời

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

Admin
11/08/2012 08:30:00 SA Trả lời

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.

11/08/2012 07:25:00 CH Trả lời

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à

11/08/2012 07:53:00 CH Trả lời

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

Admin
11/08/2012 08:36:00 CH Trả lời

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

11/09/2012 01:06:00 SA Trả lời

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

Admin
11/09/2012 01:13:00 SA Trả lời

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é

11/09/2012 03:21:00 SA Trả lời
Nhận xét này đã bị tác giả xóa.
11/09/2012 06:01:00 SA Trả lời

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

11/10/2012 07:38:00 SA Trả lời

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

Admin
11/10/2012 07:53:00 SA Trả lời

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?

11/10/2012 08:02:00 SA Trả lời

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 đó !

11/10/2012 08:21:00 SA Trả lời

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

Admin
11/10/2012 04:04:00 CH Trả lời

Đấ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.

Admin
11/10/2012 04:05:00 CH Trả lời

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.

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

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

Admin
11/11/2012 05:03:00 CH Trả lời

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à

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

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

Admin
11/12/2012 03:17:00 SA Trả lời

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.

11/12/2012 06:01:00 SA Trả lời

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

12/28/2012 02:21:00 SA Trả lời

bạn ơi sao tiêu đề bị lỗi này vậy ah?
undefined
undefined undefined | undefined undefined | undefined undefined

Admin
1/05/2013 07:39:00 CH Trả lời

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

3/11/2013 08:50:00 SA Trả lời

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

Admin
3/11/2013 06:56:00 CH Trả lời

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

4/28/2013 08:20:00 CH Trả lời

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

Admin
4/29/2013 12:07:00 SA Trả lời

Site bạn là gi?bạn xem đã làm chính xác chưa?

3/03/2014 08:06:00 CH Trả lời

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?

Admin
3/07/2014 05:58:00 SA Trả lời

Bạn xem các thuộc tính margin và padding của class .post

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