Thứ Năm, 7 tháng 3, 2013

Cách rút gọn bài viết trên trang chính của Blog

Hướng dẫn rút gọn bài viết trên trang chính của blog

Trên blogspot có một chức năng để tóm tắt hay rút gọn bài viết đó là code < --more-- > nhưng nó sẽ không có hình ảnh giống như khi các trang tạp chí, tóm tắt có kèm theo ảnh, hay giống như của huongdanblog, các bạn có thể xem ảnh minh họa bên dưới. Sau khi chèn code rút gọn cho bài viết chính trên blog thì các bạn không cần phải chền thêm code more nữa, và hình ảnh sẽ được tự động đưa lên cùng nội dung tóm tắt.



Buớc 1: Đăng nhập vào tài khoản blogspot

Buớc 2: Vào thiết kế (Design) chọn chỉnh sửa HTML (Edit HTML)

Buớc 3: Chọn mở rộng tiện ích

Buớc 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;}


Buớc 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 = &quot;no-float&quot; ;

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

Buớc 6: Bây giờ bạn tìm đến đoạn code như bên dưới

<data:post.body/>


Buớc 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'>Read more...</a></div>

</b:if>


Buớc 8: Cuối cùng save template lại.

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


Nguồn: http://hockinhdoanhonline.vn/
Người đăng: vào lúc
Nhãn:

2 nhận xét:

Đăng ký: Đăng Nhận xét (Atom)