( 24ahz.com) - Chắc các bạn thấy ở nhiều trang Web, blog có hiện icon "Top of Page", "Back to Top", "Về Đầu Trang"... khi click vào đó thì nhanh chóng quay trở lại đầu trang không phải dùng đến thanh trượt.
Các mã được sử dụng để tạo "Back to top" là biểu tượng liên kết được xây dựng bởi cấu trúc sau:
Cài đặt tạo link "Về Đầu trang".
Hãy copy đoạn mã HTML/JavaScript dưới:
Sau đó paste chúng vào giữa đoạn thẻ
Sau khi paste, bạn có thể Preview xem nó có hoạt động hay không. Sau đó hãy Save changes nếu không có trục trăc gì.
Hiệu chỉnh biểu tượng
Nếu bạn mong muốn thay đổi icon 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 mà bạn ưa thích.
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 ý của bạn:
Bài này được dịhc từ blog Amanda, các bạn có thể áp dụng đối với blog của mình và cho mình biết ý kiến của bạn nhé.
Bạn có thể vào http://blogvietshow.blogspot.com để xem ví dụ áp dụng.
Các bạn không phải lo ngại gì về vấn đề làm thay đổi cấu trúc hay lo ngại việc xuất hiện của Icon này sẽ che mất một phần bài viết bởi đây là một icon có kích thước nhỏ, được liên kêt với "mục tiêu" phía trên bằng cách sử dụng symbol "#
Để thực hiện điều này trước tiên bạn cần tạo cho mình một biểu tượng - icon "Back to top" bằng các phần mềm chuyên dụng rồi upload lên PhotoBucket, Flickr hoặc host nào đó trên mạng, hoặc có thể tìm kiếm rồi copy. Chọn cách nào cũng được, không bắt buộc cầu kỳ trong vấn đề này.
Ví dụ một số icon:
Để thực hiện điều này trước tiên bạn cần tạo cho mình một biểu tượng - icon "Back to top" bằng các phần mềm chuyên dụng rồi upload lên PhotoBucket, Flickr hoặc host nào đó trên mạng, hoặc có thể tìm kiếm rồi copy. Chọn cách nào cũng được, không bắt buộc cầu kỳ trong vấn đề này.
Ví dụ một số icon:
 |  |  |  |
<a href="#"> <-- Link mục tiêu phía đầutrang<img src="url-of-image" <-- URL của iconalt="alternative text" <-- Alt text để tiếp cậntitle="Back to Top" <-- Đoạn text tittlestyle="display: scroll; <-- Mã để cho phép cuộn iconposition: fixed; <-- Cố định vj trí iconbottom: 5px; <-- icon hiển thị khoảng cách 5px tính từ dướiright: 5px;" /></a> <-- Hiển thị khoảng cách 5px bên phải. |
Cài đặt tạo link "Về Đầu trang".
Hãy 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://đường dẫn của icon bạn sử dụng"/></a> |
Sau đó paste chúng vào giữa đoạn thẻ
<body> và </body>. Dùng tiện ích (Ctrl+F) để tìm đ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. Sau đó hãy Save changes nếu không có trục trăc gì.
Hiệu chỉnh biểu tượng
Nếu bạn mong muốn thay đổi icon 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 mà bạn ưa thích.
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 ý của bạn:
Bạn cũng có thể vị trí iconbiểu tượng cho phù hợp với thiết kế của bạn. Ví dụ, nếu bạn muốn biểu tượng trên để được tuôn ra với phía dưới góc phải (không có không gian), thay đổi mã ở trên. Để ấn định vị trí biểu tượng đi từ bên phải hay bên dưới, chỉ cần tăng pixel để phản ánh giá trị này.
position: fixed; bottom: 0px; right: 0px;
Bài này được dịhc từ blog Amanda, các bạn có thể áp dụng đối với blog của mình và cho mình biết ý kiến của bạn nhé.
Bạn có thể vào http://blogvietshow.blogspot.com để xem ví dụ áp dụng.
Nếu bạn gặp khó khăn về ngoại ngữ hãy coppy tên try cập ( link ) của trang hoặc đoạn văn bản cần dịch dán vào trang Google dich . Xin cảm ơn các bạn đã ủng hộ chúng tôi !
0 nhận xét:
Đăng nhận xét