Friday, July 31, 2009

Phương Pháp Mới Tạo Đoạn Trích Dẫn Đẹp Cho Các Bài Viết Trên Blogger.com Bằng j-Query

(danghienIT) - Có khá nhiều cách và thủ thuật khác nhau để tạo một đoạn tóm tắt cho đào tạo vàcác bài viết trên blog của bạn tại blogger.com nhưng tôi thấy khá là phức tạp bởi với những blogger không được không có kiến thức gì về CNTT thì việc làm theo là hết sức vất vả.

Tôi đã từng thử nhiều cách như hướng dẫn tại các blog khác nhau như quả thật không hề dễ và đôi khi còn làm cho blog của mình bị lỗi và không thể sửa chữa được :-) Cho dù có dùng thủ thuật gì thì các bạn để phải làm bằng tay cho từng bài viết khi muốn tại một đoạn tóm tắt cho bài viết đó giống như trên WordPress (”Read More”). Đôi khi tôi làm như thế nhưng vẫn hiện ra cả bài và đến khi phải viết trên môi trường html thì mới giải quyết được. Quả thật là nan giải!!!

Hôm nay xin giới thiệu cho các bạn một phương pháp mới mà Blogger Buster đã nêu trên blog của cô ấy với công cụ: the jQuery Expander Plugin được viết bởi Karl Swedberg.

Công cụ này sẽ mang lại những tính năng sau cho blogger sử dụng Blogger.com làm môi trường viết blog cho mình:

  • Chỉ cần 2 bước đơn giản là thêm vào được!

  • Độ dài (và các lựa chọn khác) của đoạn trích dẫn/tóm tắt hoàn toàn có thể hiệu chỉnh trong mẫu blog (không cần chỉnh sửa các file JavaScript!)

  • Chúng ta có thể mở rộng đoạn trích dẫn/tóm tắt trên cùng trang đó hoặc thêm một link “Đọc cả bài/Đọc tiếp” ở cuối mỗi bài tùy thích.

  • Các thẻ HTML và các từ hoàn chỉnh sẽ được giữ đúng trật tự (không giống như nhiều mẫu của WordPress)

  • Không càn thêm bất kỳ thẻ bổ sung nào hay chỉnh sửa các bài viết: công cụ này hoạt động ngay tức thì sau khi cài đặt!

  • Có thể hiệu chỉnh độ dài của các trích đoạn trong các mẫu dành cho báo trí.


Hướng dẫn cài đặt


Việc cài đặt phụ thuộc nhiều cách mà bạn muốn đoạn trích dẫn/tóm tắt của các bài việt hiển thị như thế nào. Do đó mà sẽ có 2 cách cài đặt để bạn chọn lựa.


Dù bạn chọn cách nào đi chăng nữa, thì kết quả sẽ rất hấp dẫn và chắc chắn hơn hẳn các phương pháp thủ công mà các bạn từng làm trước đây :-)


Hướng dẫn chi tiết: Mở rộng các đoạn trích dẫn/tóm tắt

Phương pháp này là đơn giản nhất giúp các bạn sử dụng blog của blogger.com có khả năng thêm tính năng tự động chèn một đoạn trích dẫn/tóm tắt cho mỗi bài viết trên blog của mình!

Trước hết, đăng nhập vào blogger.com, chọn Layout>Edit HTML trong Blogger Dashboard và đánh dấu vào mục “expand widget templates“.

Sau đó, bạn tìm tới thẻ </head> trong mẫu blog của mình và chèn đoạn code dưới đây ngay trước thẻ </head> này:

Tiếp đó, bạn tìm tới phần có đoạn code như sau (đoạn code này có thể khác nếu bạn dùng các mẫu blog dạng XML. Để dễ dàng tìm được trong mẫu, bạn chỉ cần nhấn tổ hợp phím Ctrl+F và nhập code dưới vào box và nhấn Enter (Chỉ áp dụng khi bạn dùng FireFox thôi nhé):


<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery-1.2.3.pack.js' type='text/javascript'/> <script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.expander.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

$(’.excerpt’).expander({
slicePoint: 280, // default is 100
expandText: ‘[...]‘, // default is ‘read more…’
});

});
</script>

Tiếp đó tìm đoạn code sau:

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Nếu bạn sử dụng các mẫu blog phức tạp thì đoạn code này có thể bị thay đổi hoặc điều chỉnh, trong trường hợp không tìm được cả đoạn code trên bạn chỉ cần tìm đoạn code sau:

<data:post.body/>

Hoặc tương tự như sau:

<div class=’post-body’>
<p><data:post.body/></p>
<div style=’clear: both;’/> <!– clear for photos floats –>
</div>

Bạn thay đoạn code tìm được bằng đoạn code đưới đây:

<b:if cond='data:blog.pageType != "item"'>
<div class='excerpt post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:else/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>

Bây giờ bạn sẽ xem thử bằng phím Preview ngay bên cạnh phím Save Template.

Khi bạn nhấn chuột vào chỗ [...] thì cả bài viết sẽ được trải rộng ra mà không càn mở trang mới.

Đang cập nhật, xin chờ nhé 19


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

Xem DEMO tại http://www.vietad.co.cc


Phương Pháp Mới Tạo Đoạn Trích Dẫn Đẹp Cho Các Bài Viết Trên Blogger.com Bằng j-QuerySocialTwist Tell-a-Friend


Đang tải xin vui lòng chờ...

0 comments:

Post a Comment

[▼/▲] Chèn biểu tượng vui danghienIT
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

/

Chuyên mục

Tool box

Liên kết

Trao đổi Liên kết
Loading Logos...
Bookmark and Share
 

Copyright 2009 All Rights Reserved iupro theme by Dang Quang Hien