Để tiện cho việc người khác lướt blog(web) của mình, các bạn có thể tạo các nút nhảy lên đầu trang, nhảy xuống cuối trang , hoặc nhảy vào giữa trang. Bài viết này mình sẽ hướng dẫn các bạn thực hiển nó. Để cho sinh động, ta nên tạo nút bằng hình ảnh.
Đầu tiên bạn phải có 3 tấm hình (nhỏ thôi, tầm 30x30 px), dùng để tạo 3 button : lên, xuống, và giữa.
Các bước thực hiện: (ở đây mình giới thiệu cho blogspot)
1. Đăng nhập vào blog
2. Vào chỉnh sửa Code HTML
3. Chèn đọan code CSS bên dưới vào trước đọan code ]]></b:skin>
#top-buttom_image {
position:fixed;
_position:absolute;
bottom:5px;
right:5px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}
- bottom:5px; , right:5px; : 2 đoạn code này để xác định vị trí hiển thị của các button trên màn hình.
4. Chèn đọan code sau vào trước thẻ đóng </body>
<script type='text/javascript'>
var maxWidth = (document.body.clientWidth);
var maxHeight = (document.body.clientHeight);
</script>
<div id='top-buttom_image'>
<a href='javascript:top.window.scrollTo(0,0)' title='Lên đầu trang'><img alt='Lên đầu trang' border='2' src='{Link ảnh1}'/></a><br/>
<a href='javascript:window.scrollTo(maxWidth,maxHeight/2)' title='Vào giữa trang'><img alt='Vào giữa trang' border='2' src='{link ảnh2}'/></a><br/>
<a href='javascript:window.scrollTo(maxWidth,maxHeight)' title='Xuống cuối trang'><img alt='Xuống cuối trang' border='2' src='{link ảnh3}'/></a>
</div>
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 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:
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:
<a href="#"> <-- Link mục tiêu phía đầutrang
<img src="url-of-image" <-- URL của icon
alt="alternative text" <-- Alt text để tiếp cận
title="Back to Top" <-- Đoạn text tittle
style="display: scroll; <-- Mã để cho phép cuộn icon
position: fixed; <-- Cố định vj trí icon
bottom: 5px; <-- icon hiển thị khoảng cách 5px tính từ dưới
right: 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:
position: fixed;
bottom: 0px;
right: 0px;
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.
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é.
Trước tiên, bạn cần download
jQuery và
autoScroll plugin. Sau đó thêm vào trong thẻ <head> của trang web:
02 | <script type="text/javascript" src="js/jquery-1.4.2.js"></script> |
04 | <script type="text/javascript" src="js/autoScroll.js"></script> |
05 | <script type="text/javascript"> |
06 | $(document).ready(function(){ |
Mã CSS
02 | background: #666 url(arrow_up.png) center center no-repeat; |
08 | -moz-border-radius: 5px; |
09 | -webkit-border-radius: 5px; |
10 | -o-border-radius: 5px; |
Plugin không yêu cầu gì về mã HTML. Bạn có thể tùy biến bằng cách chỉnh sửa lại background (trong đoạn mã CSS) theo ý của mình.
CODE VỀ ĐẦU TRANG THEO Ý THÍCH
Có lẽ ai cũng biết về đầu trang khi soạn thảo văn bản hay tìm kiếm thông tin trên web hay blog, bằng tổ hợp phím ctrl + Home.Nhưng code về đầu trang là một hình thức làm đẹp trang web hay blog của mình.
Có hai loại code về đầu trang cơ bản:
-Loại chữ
-Loại hình
1-Loại chữ:
-Chữ : Về đầu trang
Code như sau:
Về đầu trang
(Chữ in đậm là:địa chỉ trang web/Blog)
-Chữ : Go on top
Code như sau:
2-Loại hình:
-Hình mũi tên lên / xuống (đặt giũa trang Blog) (Theo thầy Nguyễn Đình Hành)
-Code như sau:
-Hình tròn màu xanh: (Theo thầy Nguyễn Đình Hành)
-Code như sau:
VỀ ĐẦU TRANG
-Hình ngôi nhà : (Theo thầy Nguyễn Đình Hành)
-Code như sau:
CLICK VÀO HÌNH
Như vậy từ những đoạn mã code LOẠI CHỮ, LOẠI HÌNH ở trên , ta có thể tạo cho Web (Blog) của mình một code về đầu trang như ý.
VÍ DỤ:
- Hình Chó con
Ở đây có 2 code ráp lại :
1) code 1: -Chữ : Về đầu trang
Về đầu trang
(Chữ in đậm là:địa chỉ trang web/Blog)
2) Code 2: Hình chó con :
Về đầu trang
Phân tích: http://dl3.glitter-graphics.net/pub/927/927093rf1pk0fzph.gif
Phần này là link ảnh, sau khi ta úp ảnh lên mạng.Bạn chọn một ảnh yêu thích, rồi up lên mạng để lấy link .
width=100 height=100 (Chỉnh kích thước chiều cao, rộng theo ý thích)
Dựa vào cấu trúc doạn code trên , bạn có thể tạo cho mình code về đầu trang như ý.
Một số code về đầu trang tôi tự làm:
Hình tượng đài Quang Trung
Click vào hình
Hình hoa hồng nhấp nháy
Click vào hình
Ly trà
Click vào hình
Cuốn sách lật trang
Click vào hình
Hình Google
Click vào hình
Hình con
Comments[ 0 ]
Đăng nhận xét