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

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!