Hướng Dẫn Cách Tạo “Top of Page” Link cho Blogger

(danghienIT) - Vừa lang thang trên mạng thấy các trang blog sử dụng dịch vụ blogspot sử dụng một biểu tượng “Top of Page” có hình dạng khác nhau giúp người đọc dễ dàng và nhanh chóng quay trở lại đầu trang mà không cần phải mất thời gian kéo thanh trượt như thường lệ.

Tìm quanh quẩn cũng tìm ra một bài hướng dẫn của Amanda trên Blogger Buster, xin phép chia sẻ cùng các bạn cùng tham khảo. Hy vọng các bạn cũng có mong muốn triển khai tính năng này trên blog của mình.

Hướng dẫn cài đặt”Top of Page” Link

Để sư dụng tính năng này, trước hết các bạn hãy tạo một biểu tượng mà bạn thích và upload lên một host nào đó như PhotoBucket, Flickr hay chính host của bạn và copy đoạn mã HTML/JavaScript dưới:

<a style=”display:scroll;position:fixed;bottom:5px;right:5px;” href=”#” title=”Back to Top”><img src=”http://blogviet.info/ads/up.gif“/></a>

Bạn hay thay đường link dẫn tới hình ảnh của mình bằng cách thay đường dẫn sau:

http://blogviet.info/ads/up.gif bằng chính đường link của mình. Sau khi thay đường link, hãy copy toàn bộ đoạn code đó và paste chúng vào giữa đoạn thẻ <body> và </body>. Để chắc chắn, hãy đưa trỏ chuột đến cuôi trang HTML bạn sẽ thấy đoạn thẻ </body> và paste ngay trước thẻ này.

Sau khi paste, bạn có thể Preview xem nó có hoạt động hay không. Nếu ok thì hãy Save changes là xong.

Hiệu chỉnh biểu tượng

Nếu bạn mong muốn thay đổi biểu tượng ở trên hay bằng một biểu tượng mới, chỉ cần thay đường dẫn màu đỏ bằng đường dẫn tới biểu tượng mới là ok.

Bạn cũng có thể hiệu chỉnh vị trí cho phù hợp với template của mình bằng cách hiệu chỉnh các chỉ số sau tùy theo sỏ thích của bạn:

position: fixed;

bottom: 0px;

right: 0px;

Nếu bạn muốn biểu tượng của mình cách xa biên cuối và biên phải thì chỉ cần tăng độ pixel từ không trở lên là được.

Chúc các bạn thành công!

Friday, July 31, 2009