blogcongnghe: Tạo tính năng Link-Thumbnail cho Blog

Chắc các bạn Blogger cũng đã từng biết qua Websnapr, công cụ giúp người đọc xem trước nội dung của liên kết. Tuy nhiên, do công cụ đó được Websnapr mặc định và không thể sửa đổi nên khiến một số bạn không ưng ý. Vì thế mà một blogger trên Internet - arc90 đã tự tùy chỉnh lại mã JS của công cụ với một số ưu điểm sau :

Chỉ hiển thị ảnh thumbnail.
Không có link quảng cáo.
Có thể sử dụng với từng link riêng biệt hoặc tất cả .
Tốc độ load nhanh.
Dung lượng file JS khá nhẹ (~5.4 KB).

Bạn có thể xem screenshot dưới đây để thấy kết quả :

Để tạo chức năng này cho Blog, bạn hãy thực hiện các bước dưới đây :

Đăng nhập vào Blogger > Layout > Edit HTML (không cần Mở rộng Mẫu tiện ích).
Tìm thẻ </head> và dán đoạn code dưới đây vào ngay bên trên :
<style type='text/css'>
    .arc90_linkpic {
        display: none;
        position: absolute;
        left: 0;
        top: 1.5em;
        width: 160px;
        height: 120px;
    }
    .arc90_linkpicIMG {
        padding: 0 4px 4px 0;
        background: transparent url(http://boyprodx.googlepages.com/linkpic_shadow.gif) no-repeat bottom right;
        width: 160px;
        height: 120px;
    }
</style>
Tiếp theo, dán đoạn code dưới đây ở phía trên thẻ </body>
<script src='http://boyprodx.googlepages.com/arc90_linkthumb.js' type='Text/JavaScript'/>
Save lại template.
Tới đây bạn có 2 lựa chọn :
- 1 là sử dụng Link-Thumbnail cho từng link riêng biệt với cú pháp :
<a class="linkthumb" href="Đường Link">Tên hiển thị</a>
- 2 là sử dụng Link-Thumbnail cho toàn bộ link bằng cách dán kèm đoạn code này vào ngay bên dưới file JS ở bước 3 :
<script type='text/javascript'>
arc90_linkThumbUseClassName = false;
</script>

Vậy là bạn đã tạo được chức năng Link-Thumbnail cho Blog của mình rồi đấy. Khuyến khích các bạn đang dùng công cụ của Websnapr cũng như các bạn chưa dùng nên sử dụng tính năng này, đảm bảo sẽ vừa ý hơn.
Hy vọng thủ thuật này sẽ giúp ích cho bạn. Thân !

Thứ Sáu, 31 tháng 7, 2009

Tạo tính năng Link-Thumbnail cho Blog