2013-01-04

Tự động tạo trích dẫn bài viết cho Blogger (Không JS)

Mặc định trên soạn thảo văn bản Blogspot đã có sẵn dấu ngắt để tạo trích dẫn bài viết (readmore), tuy nhiên việc sử dụng dấu ngắt khá là thủ công và lượng ký tự trích dẫn cũng không đều gây mất thẩm mỹ.
Trên mạng đã có nhiều bài viết hướng dẫn tự động tạo readmore với Javascript, tuy nhiên mình thấy việc sử dụng Javascript sẽ làm ảnh hưởng rất lớn đến sự thân thiện của Blog với các công cụ tìm kiếm.
Trong bài viết này mình xin giới thiệu các bạn thủ thuật tự động tạo trích dẫn bài viết cho Blogspot trên trang chủ cũng như khi xem theo Labels, Archive mà không hề sử dụng Javascript. Đây là thủ thuật rất hay của bạn Duy Phạm.
Auto readmore Blogspot
Bước 1: Tùy chỉnh ảnh hiển thị trong trích dẫn. Có 2 kiểu:
1. Hiển thị hình ảnh bên trái:
Chèn đoạn mã CSS dưới đây vào ngay trên ]]></b:skin>:
.post-thumbnail{float:left;margin-right:20px}
2. Hiển thị hình ảnh bên phải:
Chèn đoạn mã CSS dưới đây vào ngay trên ]]></b:skin>:
.post-thumbnail{float:right;margin-left:20px}
Bước 2: Thêm đoạn mã Auto readmore cho Blog. Có 4 dạng để bạn chọn:
1. Auto readmore với hình ảnh:
Thay thế <data:post.body/> bằng đoạn mã dưới đây:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
2. Auto readmore với hình ảnh như trên, ngoài ra chức năng này sẽ tự động lấy hình ảnh mặc định làm hình ảnh trích dẫn:
Thay thế <data:post.body/> bằng đoạn mã dưới đây:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
<b:else/>
<img class='post-thumbnail' alt='no image' src='http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
3. Auto readmore với hình ảnh nhưng không readmore với bài viết mới nhất:
Thay thế <data:post.body/> bằng đoạn mã dưới đây:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.isFirstPost == &quot;true&quot;'>
<data:post.body/>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
4. Auto readmore với hình ảnh, tự động lấy hình ảnh mặc định làm hình ảnh trích dẫn và không tạo readmore cho bài viết mới nhất:
Thay thế <data:post.body/> bằng đoạn mã dưới đây:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.isFirstPost == &quot;true&quot;'>
<data:post.body/>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
<b:else/>
<img class='post-thumbnail' alt='no image' src='http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
<b:else/>
<img class='post-thumbnail' alt='no image' src='http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
Bước 3: Bấm Lưu mẫu để hoàn thành.
Vài lưu ý:
- Chức năng này sẽ lấy hình ảnh và 140 ký tự đầu tiên trong bài viết để làm trích dẫn.
- Hình ảnh trong bài viết phải được upload trực tiếp trên khung soạn thảo Blogspot, hoặc lấy link ảnh từ Picasa thì mới hiển thị hình ảnh trong trích dẫn. Ngoài ra, mình thấy khi chèn video Youtube vào bài viết từ mã nhúng thì chức năng này sẽ chọn hình ảnh có trong video để làm hình ảnh trích dẫn.
- Nếu bạn muốn khi click vào hình trích dẫn thì sẽ đến bài viết thì đổi đoạn mã:
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
Thành:
<a expr:href='data:post.url' expr:title='data:post.title'><img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/></a>
Chúc các bạn thành công!

Previous Post
Next Post

Mình là Nhân, là 1 người yêu thích mã nguồn phpBB3. Những bài viết của mình thường xoay quanh chủ đề này.

Hãy comments để chúng ta cùng xây dựng bài viết.

Share
NỘI DUNG PHÙ HỢP