Theo yêu cầu của bạn Ngân (blogtruyen.com)

[FD's BlOg] - Theo yêu cầu, thứ nhất ta sẽ di chuyển form comment lên trước phần comment block (tức là đưa form comment lên trên cùng thay vì nằm ở dưới cùng), thứ 2 là sắp xếp comment block theo thứ tự ngược lại. Trong bài viết này mình sẽ thực hiện yêu cầu thứ nhất, yêu cầu thứ 2 sẽ thực hiện sau khi có thể.

Thực ra yêu cầu chuyển form comment lên trên cũng đơn giản, ở đây chỉ đơn thuần là ta thay đổi bố cục cho blog. Còn yêu cầu thứ 2 xem ra mới khó.

Các bạn xem hình minh họa:

Trước khi thực hiện:

Sau khi thực hiện:

☼ Bây giờ ta bắt đầu:
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Nhấp chọn mở rộng mẫu tiện ích
4. Tìm đoạn code bên dưới (hoặc tương tự) - đoạn code này chính là đoạn code để hiển thị form comment:

<p class='comment-footer'>

<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>

</p>

5. Di chuyển tất cả code (in đậm) bên trong thẻ <p class='comment-footer'> ... </p> (mà ta tìm được ở bước 4) vào ngay sau đoạn code bên dưới:

<b:includable id='comments' var='post'>

<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

6. Save template.

- Chú ý: các code của các tempalte khác nhau sẽ khác nhau, nhưng nếu các bạn dùng template từ bộ template mà blogger cung cấp thì các code tương tự nhau. Nếu dùng các mẫu template khác thì code có lẽ sẽ khác đôi chút.

☼ Thủ thuật : hiển thị comment mới nhất ở trên cùng sẽ cập nhật sau nếu mình có thể.

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

Read more…

[FD's BlOg] - Lang thang trên mạng 1 hồi, mình tìm được tiện ích này. Tiện ích này sẽ tự tạo bài viết kiểu thu gọn ở các trang. Một dạng giống như kiểu thêm tiện ích "Read more...". Nhưng ở đây dùng javascript để tự động thu gọn bài viết với ảnh thumbnail.

Hình ảnh minh họa:

trước khi thêm tiện ích vào blog

sau khi thêm tiện ích vào blog

- Như đã nói ở trên, đây là thủ thuật mình tìm được trên mạng, và sau khi test mình tìm thấy 1 lỗi nhỏ từ thủ thuật này. Đó là khi ta nhấp vào xem bài viết thì không thể xem được toàn bộ bài viết, mà vẫn chỉ là dạng summary post giống như ngoài trang chủ.

Hình minh họa:

Đây là 1 sơ xuất nhỏ, nên mình có chỉnh sửa lại (xem hình minh họa bên dưới)


- Lưu ý: nếu blog của bạn đã có thêm tiện ích "Readmore" thì hãy gỡ bỏ nó đi trước khi thực hiện thủ thuật này cho blog của bạn.

☼ Sau đây là các bước thực hiện:
1. Đăng nhập blog
2. Vào bố cục
3. Vào chỉnh sửa code HTML
4. Chọn mở rộng mẫu tiện ích
5. Chèn đoạn code javascript bên dưới vào sau thẻ đóng </head>

<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
summary_noimg = 230;
summary_img = 200;
img_thumb_height = 80;
img_thumb_width = 80;
</script>

<script src='http://data.fandung.com/js/autoreadmorethumb.js' type='text/javascript'/>

- Bạn có thể thay đổi các thông số thiết lập nếu bạn muốn.

6. Xuống dưới tìm đoạn code sau:

<data:post.body/>

7. Và thay thế nó bằng đoạn 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>

</b:if>

8. Save template.

Tác giả của thủ thuật Anhvo (Vietwebguide.com)

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

Read more…