13 tháng 7, 2014

[TUT+] Hướng dẫn tạo, chỉnh sửa templates blogspot ( phần 9 ) - footter

[TUT+] Hướng dẫn tạo, chỉnh sửa templates blogspot ( phần 9 ) - footter

     Footer là phần cuối cùng của một trang web, và một điều đáng buồn là có rất ít độc giả ghé thăm trang web mà kéo tới cuối trang tức tới thanh footer, và hiển nhiên các đường link ở vị trí này cũng vậy nhưng mặc cho điều đáng buồn đó, footer vẫn có một vị trí quan trọng không thể thiếu của một trang web. Vậy bạn nên đặt cái gì vào footer?

1.Công cụ Navigation

[TUT+] Hướng dẫn tạo, chỉnh sửa templates blogspot ( phần 9 ) - footter

     Nghe có vẻ điên rồ. Theo truyền thống, mọi người thường đặt navigation ở đầu. Việc đặt navigation ở footer ngược lại với thường lệ. Tuy nhiên, nếu làm đúng cách, navigation ở footer sẽ giúp dễ dàng sử dụng theo một cách hoàn toàn mới, bạn vẫn đăt navigation ở header nhưng cũng rất tuyệt nếu có một nav nữa ở footer, điều quan trọng là đừng để nội dung của chúng giống nhau, hãy sáng tạo! Ví dụ trên sử dụng một footer lớn. Bạn có thể đặt phía trên thanh cuốn. Thậm chí bạn có chuyển thêm phần menu giúp xem đầy đủ nội dung của trang web.

2.Thêm nút “Back to Top”

     Một tính năng mà tôi thật sự thích đặt ở footer là nút giúp bạn trở lại đầu trang. Với những trang có nội dung dài, bạn khá mất thời gian cho việc di duyển hoặc dùng thanh cuốn. Bạn có thể khắc phục điều này bằng mộtJavaScript button để thiết lập vị trí di chuyển. Các bạn bỏ code vào bất cứ HTML/JavaScript nào đấy:


<style type='text/css'>
#bttop{border:1px solid #4adcff;background:#24bde2;text-align:center;padding:5px;position:fixed;bottom:35px;right:10px;cursor:pointer;display:none;color:#fff;font-size:11px;font-weight:900;}
#bttop:hover{border:1px solid #ffa789;background:#ff6734;}
</style>
<div id='bttop'>BACK TO TOP</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$('#bttop').fadeIn();}else{$('#bttop').fadeOut();}});$('#bttop').click(function(){$('body,html').animate({scrollTop:0},800);});});</script>


3. Tạo sự tương phản

[TUT+] Hướng dẫn tạo, chỉnh sửa templates blogspot ( phần 9 ) - footter

     Nếu bạn muốn một footer mạnh mẽ, không nên phức tạp hóa . Dùng một đường kẻ đơn giản hoặc đồ họa để phân biệt phần nội dung chính và phần footer nhưng cho phần footer một màu tối hơn. Ví dụ thực tế trên sử dụng cả hai kỹ thuật này. Nền footer tối hơn tạo sự tương phản độc đáo và phần nội dung chính có nền trắng làm nổi bật các chi tiết đồ họa. Hơn nữa bạn có thể thêm một số chức năng cho phần Footer.

5. Tổng hợp nội dung

[TUT+] Hướng dẫn tạo, chỉnh sửa templates blogspot ( phần 9 ) - footter

     Tổng hợp nội dung cơ bản ở phần footer. Có rất nhiều nội dung có liên quan và được lưu trữ trên blog của bạn, và người xem có thể xem mà không bị rối khi xem ở trang chính. Một footer lớn sẽ thuận tiện cho việc tổng hợp nội dung.

     Phần lưu ý ở các ví dụ trên cũng là nơi tuyệt vời để đặt danh sách các nguồn tham khảo miễn phí. Việc cung cấp danh sách các nguồn tham khảo miễn phí sẽ làm tăng giá trị trang web của bạn đối với người truy cập.

6. Đính kèm thông tin

[TUT+] Hướng dẫn tạo, chỉnh sửa templates blogspot ( phần 9 ) - footter

     Bạn không nghĩ ra điều gì cho Footer. Hãy viết một thông tin ngắn, dí dỏm trên trang web có thể làm nó trở nên vui nhộn và cá tính hơn hay địa chỉ liên hệ, số điện thoại liên hệ, các trang mạng xã hội mà người dùng có thể tìm thấy sự giúp đỡ từ bạn. Rõ ràng thông tin liên lạc cũng rất cần thiết.

7. Không gì là không thể, hãy sáng tạo!

[TUT+] Hướng dẫn tạo, chỉnh sửa templates blogspot ( phần 9 ) - footter

[TUT+] Hướng dẫn tạo, chỉnh sửa templates blogspot ( phần 9 ) - footter

[TUT+] Hướng dẫn tạo, chỉnh sửa templates blogspot ( phần 9 ) - footter
[TUT+] Hướng dẫn tạo, chỉnh sửa templates blogspot ( phần 9 ) - footter


     Chúc các bạn có một blog đẹp!!!

Subscribe

Điền địa chỉ email của bạn, và nhấn Subscribe để nhận những bài viết mới nhất qua email.

Enter your email address:

Không có nhận xét nào :

Đăng nhận xét

x