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>.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}
<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ướivar 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>
<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 == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'>
<p><data:post.body/></p>
</div>
<b:loop values='data:post.labels' var='label'>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>","<data:post.title/>","<data:post.url/>","<data:post.author/>","<data:top.authorLabel/>","<data:post.numComments/>","<data:top.commentLabelPlural/>","<data:label.name/>","<data:postLabelsLabel/>","<data:label.url/>");
</script>
</b:loop>
</b:if>
</b:if>
9. Cuối cùng là save lại.<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'>
<p><data:post.body/></p>
</div>
<b:loop values='data:post.labels' var='label'>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>","<data:post.title/>","<data:post.url/>","<data:post.author/>","<data:top.authorLabel/>","<data:post.numComments/>","<data:top.commentLabelPlural/>","<data:label.name/>","<data:postLabelsLabel/>","<data:label.url/>");
</script>
</b:loop>
</b:if>
</b:if>
Đăng nhận xét