Chuyển đến nội dung chính

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!

Bài đăng phổ biến từ blog này

Những Status hay và tâm trạng nhất về Tình yêu đơn phương

Tổng hợp những status hay và tâm trạng nhất khi người con trai hay người con gái đang yêu đơn phương.
Yêu đơn phương là một loại tình yêu say đắm hoàn mỹ nhất trên đời này, bởi vì tuyệt đối cũng không bao giờ bị thất tình. Nhưng chỉ có người chân chính từng trải mới biết được: Loại tình yêu không thể nói lên lời này, đó mới là loại tình yêu yếu ớt nhất trên thế giới.

Hình ảnh động đẹp về Hoa Hồng, rực rỡ sắc màu

Dưới đây là tổng hợp ảnh động đẹp về Hoa Hồng với nhiều màu sắc và kiểu dáng khác nhau do chính A4Y sưu tầm và chia sẽ lại.
Hoa Hồng là loài hoa không thể thiếu trong ngày lễ tình nhân 14/2 sắp tới phải không nào?...

Ảnh vui comment facebook khen status hay, người đẹp

Vài tấm ảnh vui, hài hước dùng để nhận xét (bình luận, comment trên facebook) với ý nghĩa khen status viết hay, ảnh đẹp thật là ngưỡng mộ.

Ảnh đẹp mùa Đông với Status hay, tâm trạng và ý nghĩa nhất

Tuyển tập những hình ảnh đẹp nhất về mùa Đông với những dòng Status đầy tâm trạng và ý nghĩa khi những cơn gió mang hơi lạnh của mùa Đông đến.
Ấm áp không phải khi bạn nói "Ấm quá", mà là khi có người thầm thì vào tai bạn "Có lạnh không?". Ấm áp chưa hẳn là khi bạn ôm ai đó thật chặc, mà khi ai đó khoác lên vai bạn thật khẽ. Ấm áp là khi mùa Thu qua, cái lạnh ùa về và có ai đó thầm thì vào tai bạn: "Chúc em một mùa Đông ấm áp".

Hình ảnh đẹp về con đò và bến sông xưa

Tuyển chọn những hình ảnh đẹp về con đò trên bến sông xưa ở Việt Nam. Những hình ảnh này gợi trong ta nỗi nhớ về quê hương, làng quê xưa.

Một số câu niệm Phật và ý nghĩa

Chúng ta khi niệm Phật ít ai thật sự hiểu hết ý nghĩa của lời niệm. Niệm Phật là để ta tưởng nhớ đến Phật, đến công đức mà Ngài vì chúng sanh cứu độ. Khi ta hiểu hết ý nghĩa, tâm ta tự sinh từ bi, tâm ta tự ngộ và ta tự đem sự an lạc, hạnh phúc đến cho tâm ta.

Tùy chỉnh kích thước khổ giấy trong Word 2003

Bạn có thể để khổ giấy văn bản của bạn là một khổ giấy nhất định mỗi khi mở chương trình lên. Thông thường văn bản thường được đặt là khổ giấy A4, đôi khi bạn cần phải thay đổi khổ giấy cho một loại văn bản đòi hỏi có khổ giấy khác.

Hình ảnh đẹp chào đón tháng 12, Hello December!

A4Y xin gửi đến các bạn những hình ảnh đẹp về chủ đề chào mừng tháng 12 đang đến.
Đó là những hình ảnh về tháng mười hai với slogan "Hello December" thật đẹp và ý nghĩa! Xin chúc tất cả chúng ta sẽ gặp nhiều may mắn và thuận lợi trong tháng 12 này nhé!..

Hình ảnh người con trai buồn đầy tâm trạng

Tuyển chọn những hình ảnh đẹp thể hiện tâm trạng buồn về người con trai khi bước vào đường yêu hay khó khăn trong cuộc sống bộn bề.
Xin tặng bộ ảnh này cho các bạn là đàn ông, con trai đang buồn. Chúc các bạn sẽ mau chóng vượt qua nỗi buồn này..