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 :
  1. Đăng nhập vào Blogger > Layout > Edit HTML (không cần Mở rộng Mẫu tiện ích).
  2. 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>
  3. 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'/>
  4. Save lại template.
  5. 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 !

2 Nhận xét on "Tạo tính năng Link-Thumbnail cho Blog"

Pika Rock on 31 July 2009 at 21:32 said...

good job :)>-

boyproDX on 1 August 2009 at 10:54 said...

Thanks :D

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

Cám ơn bạn đã đọc bài viết tại blog của boyproDX.
Nếu cảm thấy blog có nhiều bài hữu ích , các bạn hãy Bookmark(nhấn Ctrl_D) hoặc Đăng kí nhận tin qua RSS site mình để không bỏ qua các bài viết tiếp theo của mình. Chúc các bạn vui vẻ !

Logo Exchange (Tạm ngưng)

 

Chuyên trang blog về tin học | Copyright © 2009 | Best view at 1024x768 with Firefox 3