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.
1. Đăng nhập vào tài khoản blogspot2. 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-weight:bold;
font-size:12px;}
.img-post {
float:left;
margin-right:5px;
border:1px solid #fff;
height:96px;
padding:1px;}
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-weight:bold;
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 = "no-float" ;
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://traidatmui-tips.googlecode.com/files/auto_sumpost.js' type='text/javascript'/>
var thumbnail_mode = "no-float" ;
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://traidatmui-tips.googlecode.com/files/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 == "item"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'>
<p><data:post.body/></p>
</div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<div class='readmore'><a expr:href='data:post.url'>Đọc tiếp...</a></div>
</b:if>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'>
<p><data:post.body/></p>
</div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</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 == "item"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'>
<p><data:post.body/></p>
</div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<div class='readmore'><a expr:href='data:post.url'>Đọc tiếp...</a></div>
</b:if>
</b:if>
<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>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<div class='readmore'><a expr:href='data:post.url'>Đọc tiếp...</a></div>
</b:if>
</b:if>
Nguồn / Soure :http://www.traidatmui.com/2010/11/tien-ich-tu-ong-tom-tat-bai-viet-co-anh.html
Không có nhận xét nào:
Đăng nhận xét