Auto Readmore nâng cao cho Blogger và tùy biến hiển thị ảnh mặc định

Auto readmore là chủ đề đã quá quen thuộc với Blogger. Mặc dù Google đã hỗ trợ tính năng này cho Blogger, nhưng nó chưa thực sự thỏa mãn người dùng vì 1 lẽ: nó chỉ cắt nội dung chứ chưa thể tùy biến giao diện. Bởi vậy chúng ta thường nhờ vả tới các script auto readmore.

Script auto readmore vốn ban đầu được AnhVo ở VietWebGuide.com phát triển, sau đó tôi có cải tiến 1 chút ít (tiếc là bây giờ blog của AnhVo đã không còn hoạt động). Ở bài viết này, tôi muốn trình bày với các bạn 1 vài tùy biến nâng cao của script auto readmore mà tôi áp dụng cho Hỗn tạp Blog, đồng thời cố gắng hướng dẫn để các bạn có thể tự tùy biến script cho mục đích của riêng mình.

Script vẫn giữ nguyên ý tưởng cốt lõi, chỉ bổ sung thêm các tùy chọn cho sự hiển thị thêm đa dạng.

Trong script này, tôi bổ sung 3 điểm nâng cao sau:

1. Thêm hình thumbnail mặc định khi bài viết không có hình ảnh
2. Tùy chọn không auto readmore cho 1 số bài đầu tiên
3. Tùy chọn auto readmore cho trang homepage và trang label

Dưới đây là code có thể áp dụng luôn cho blog của bạn:

<script type="text/javascript">
var summaryConf = {
    showImage: true,
    imgFloat: 'left',
    imgWidth: 120,
    imgHeight: 90,
    defaultThumb: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH0UUj2HrYF0HqixsTZLbRwotkpq-ZVj33f_ZrDv91rT5l6ONF4bl2rhrH1-TgpgfxZPIPxgEMMsF0w-J0Enw3gCoihitjuHn4miVYiDFWTxooNUPlMozda5lIovLXMC0cYRtxtzb5tyU/s1600/no-thumb.jpg',
    words: 65,
    wordsNoImg: 80,
    skip: 0,
    showHome: true,
    showLabel: true
};
</script>
<script type="text/javascript" src="http://rumfyblog.googlecode.com/files/summary.rm.test.js"></script>

Chèn đoạn code trên vào trước thẻ </head> là được. Các tham số tuỳ biến có ý nghĩa như sau:

showImage: bạn có muốn hiển thị thumbnail không? Nếu có để là true, nếu không để là false.

imgFloat: có 3 giá trị: 'left' - để thumbnail float về bên trái, 'right' - để thumbnail float về bên phải và 'no' - để thumbnail không có chế độ float. Lưu ý có dấu nháy bọc quanh giá trị nhé.

imgWidth và imgHeight: chỉ định kích thước của thumbnail.

defaultThumb: Link (đường dẫn) ảnh làm thumbnail mặc định trong trường hợp bài viết không có hình ảnh. Nếu bạn không muốn hiển thị ảnh thumbnail mặc định cho những bài viết không có ảnh thì bạn để giá trị của nó là none (defaultThumb: 'none')

words và wordsNoImg: số từ hiển thị trong trường hợp có ảnh thumbnail và không có ảnh.

skip: bỏ qua 1 số bài, không thực hiện auto readmore với chúng. Nếu khai báo số lượng là 0 thì coi như không bỏ qua bài nào (sẽ auto readmore với tất cả các bài).

showHome và showLabel: cho phép auto readmore ở trang chủ và trang label. Giá trị true là cho phép, false là không cho phép.

Sau đó, bạn tìm trong template của bạn đoạn (chú ý: thay tất cả những chỗ bạn tìm thấy):

<data:post.body/>

sửa thành:

<span expr:id='data:post.id'><data:post.body/></span>

<b:if cond='data:blog.pageType == "index"'>
    <script type='text/javascript'>summary("<data:post.id/>")</script>
<b:else/>
    <b:if cond='data:blog.pageType == "archive"'>
        <script type='text/javascript'>summary("<data:post.id/>")</script>
    </b:if>
</b:if>

Sau khi cài đặt, các bạn hãy thử nghiệm thay đổi giá trị của các tùy chọn trên cho phù hợp với blog của mình.