Nhóm lưu trữ: HTML

HTML – Viết tắt của HyperText Markup Language, một nguôn ngữ lập trình phổ biến cho các trang web. Chuyên mục này sẽ giúp bạn tiếp cận dễ dàng và hiệu quả hơn với ngôn ngữ này.

hieu-ung-tuyet-roi-cho-trang-web

Hướng dẫn tạo hiệu ứng tuyết rơi cho website

Sau đây là hướng dẫn ngắn gọn giúp website của bạn mang một phong cách mùa đông, phù hợp với không khí mùa Noel. Cụ thể trong hướng dẫn này sẽ giúp bạn tạo hiệu ứng tuyết rơi nhẹ nhàng và đẹp mắt mà không cần tốn nhiều thời gian và công sức.

Đầu tiên là bạn cần download file jquery sau về và chèn vào website bạn:

http://zkiwi.com/libs/js/snow.js

Tiếp theo là bạn download các bông tuyết: img.rar

Bạn có thể xây dựng cấu trúc HTML tương tự như bên dưới:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Your Web</title>
<script src="http://zkiwi.com/libs/js/snow.js" type="text/javascript"></script>
<script type="text/javascript">
   createSnow('http://zkiwi.com/libs/imgs/snow/', 30);
</script>
</head>

<body>
Nội dung trang web của bạn
</body>
</html>

Trong đó có đoạn Javascript createSnow('http://zkiwi.com/libs/imgs/snow/', 30); thực thi hiệu ứng. Bạn nhớ thay đổi đường dẫn chứa hình các bông tuyết và số bông tuyết xuất hiện (ở đây là 30), lưu ý số bông tuyết bạn đừng để quá nhiều vì sẽ ảnh hưởng đến việc load trang. Ngoài ra bạn cũng có thể tự thiết kế các bông tuyết theo ý bạn muốn.

Bạn có thể tham khảo Demo hoặc download toàn bộ filde mã nguồn về xử dùng cho trang web bạn. Chúc bạn thành công.

tang-toc-web-bang-Gzip-Compression

Bật tính năng nén Gzip (Compression) cho Website

Để tăng tốc độ load trang web, có nhiều phương pháp dược dùng. Trong đó, phương pháp phổ biến và ưu tiên dùng là Gzip (Compression). Sau đây là hướng dẫn bật tính năng này cho website.

  1. Server Apache: Sử dụng file .htaccess, bạn có thể dùng 1 trong 2 cách sau:Sử dụng mod_deflate
    <IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/xml application/xhtml+xml application/rss+xml application/x-javascript application/javascript
    </IfModule>

    Sử dụng mod_gzip:

    <IfModule mod_gzip.c>
     mod_gzip_on Yes
     mod_gzip_dechunk Yes
     mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
     mod_gzip_item_include handler ^cgi-script$
     mod_gzip_item_include mime ^text/.*
     mod_gzip_item_include mime ^application/x-javascript.*
     mod_gzip_item_exclude mime ^image/.*
     mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
     </IfModule>

    Ngoài ra, nếu bạn không thể thay đổi nội dung file .htaccess thì bạn có thể sử dụng đoạn code PHP sau:

    <?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?>
  2. Server Nginx: Để bật chức năng Gzip trên server Nginx bạn cần thêm đoạn mã sau vào file config
     gzip on;
     gzip_comp_level 2;
     gzip_http_version 1.0;
     gzip_proxied any;
     gzip_min_length 1100;
     gzip_buffers 16 8k;
     gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
     gzip_disable "MSIE [1-6].(?!.*SV1)";
     gzip_vary on;
  3.  Server Windows: Bạn có thể tham khảo các bài viết dưới đây:

Để biết trang web của bạn đã bật Gzip hay chưa bạn có thể tham khảo thêm thông tin tại các bài viết Kiểm tra Gzip (Compression) của website. Chúc bạn thành công.

canh-giua-khung-hinh-cho-moi-trinh-duyet

Css canh giữa khung hình cho mọi trình duyệt

Việc canh giữa khung hình được áp dụng trên nhiều trang web, nhất là những trang bán hàng online cần show nhiều hình sản phẩm. Việc canh hình dù có kích thước lớn hay nhỏ đều nằm trong khung hình cố định và được canh giữa khung là một chuyện không dễ. Nhất là đối với người dùng ở Việt Nam còn sử dụng nhiều phiên bản trình duyệt đã lỗi thời. Tuy nhiên, mọi việc sẽ trở nên dễ dàng hơn nếu bạn biết chút ít về CSS và HTML. Bài viết sau đây sẽ hướng dẫn bạn thực hiện việc này.

Trong thiết kế giao diện, việc chia tỉ lệ hình ảnh và khung hình đồng thời cố định size khung hình thường thấy ở nhiều trang web. Tuy nhiên, phải làm sao đảm bảo việc size của hình được upload lên không phụ thuộc vào size khung ảnh. Cụ thể là cho dù bạn up hình có chiều rộng hay cao như thế nào(có thể vượt quá khung hình hoặc nhỏ hơn khung hình) nhưng nó vẫn nằm trong khung hình và phải nằm chính giữa khung hình.

Với yêu cầu như vậy ta có code HTML như sau:

<div class="img-wrap">
      <img src="canh-giua-hinh.jpg" />
  </div>

Và CSS:

.img-wrap {
    background:#fff;
    width:500px;
    height:400px;
    position:relative;
    display:block;
}
.img-wrap img{
    max-width:500px;
    max-height:400px;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
}

Như ví dụ trên, khung hình cố định rộng x cao = 500px x 400px, với CSS như trên thì hình nằm trong khung sẽ được canh giữa khung và không bao giờ vượt qua khỏi khung cho dù chiều cao hay rộng của hình lớn hơn chiều cao hoặc rộng của khung. Tuy nhiên, CSS trên làm việc tốt ở các trình duyệt web mới và trình duyệt IE8 trở lên. Để IE7 (hiện tại còn khá nhiều người sử dụng) hiển thị tốt thì ta cần thêm đoạn CSS sau cho thẻ img:

margin-left:expression((500-this.width)/2);
margin-top:expression((400-this.height)/2);

Như vậy CSS đầy đủ sẽ là  :

.img-wrap {
    background:#fff;
    width:500px;
    height:400px;
    position:relative;
    display:block;
    box-shadow:0 0 10px #ccc;
    border:1px solid #ccc;
    margin:0 auto;
}
.img-wrap img{
    max-width:500px;
    max-height:400px;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    margin-left:expression((500-this.width)/2);
    margin-top:expression((400-this.height)/2);
}

Bạn có thể tham khảo demo trong bài để dễ dàng thực hiện hơn. Chúc bạn thành công.

 

 

opensearch-cho-website

Thêm chức năng OpenSearch cho Website

Trước hết, chức năng OpenSearch là một chức năng mở rộng cho công cụ tìm kiếm trên các trình duyệt web. Thường bạn có thể thấy các trình duyệt có thêm công cụ tìm kiếm kèm theo. Khi click vào thanh xổ, bạn sẽ thấy một loạt các lựa chọn cho việc tìm kiếm, ví dụ như Yahoo, Google, Bing,… Bạn có thể chọn một trong số các nhà cung cấp này, khi gõ từ khóa và click search, kết quả tìm kiếm sẽ hiện ra và tất nhiên là kết quả tìm kiếm này sẽ hiện trên trang web dịch vụ tìm kiếm bạn đã chọn trước đó. Vậy, làm sao có thể đưa công cụ tìm kiếm trên trang web của bạn vào thanh tìm kiếm của người dùng?

tao-chuc-nang-opensearch-xml-cho-website

Có thể nói là rất đơn giản,  bạn có thể thực hiện theo các bước sau đây:

  1. Tạo một file .xml, đặt tên gì cũng được. Ở bài viết này xin đặt là opensearch.xml, và file này có nội dung như sau:
    <?xml version="1.0" encoding="UTF-8"?> 
    <OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"> 
       <ShortName>zKIWI</ShortName> 
       <Description>Tìm kiếm nội dung trên zKIWI</Description> 
       <Tags>zKIWI | Tips - Tricks - Hacks - Tutorials</Tags> 
       <Url type="text/html" template="http://www.zkiwi.com/search?q={searchTerms}"/> 
    </OpenSearchDescription>

    Bạn nhớ thay đổi thông tin trong file cho đúng với trang web của bạn:

    • Thẻ <ShortName> bạn để tên ngắn gọn của công cụ Search
    • Thẻ <Description> miêu tả công cụ tìm kiếm
    • Thẻ <Tags> là tên trang web của bạn
    • Thẻ Url là đường dẫn đến trang tìm kiếm của web bạn ví, bạn cần thay đổi đoạn http://www.zkiwi.com/search thành trang địa chỉ trang tìm kiếm của website bạn.
  2. Bước tiếp theo là làm sao cho công cụ  này hoạt động. Bạn chỉ việc upload file opensearch.xml vừa tạo ở trên vào thư mục của web và thêm đoạn code bên dưới vào thẻ Head của file HTML hay xHTML của bạn:
    <link rel="search" href="http://zkiwi.com/opensearch.xml" type="application/opensearchdescription+xml" title="zkiwi.com" />

Vậy là xong, thử nghiệm thành quả bằng cách refresh lại trang web của bạn và click vào box search trên trình duyệt để chọn công cụ tìm kiếm, công cụ tìm kiếm trên web bạn sẽ hiện ra và nhấn add vào. Sau đó chọn nó và thử tìm kiếm thứ gì đó.

Hướng dẫn trên hướng dẫn bạn thực hiện cho việc tìm kiếm nội dung trên web bạn bằng cách sử dụng ngay công cụ tìm kiếm của chính web bạn. Nhưng lời khuyên sau đây sẽ mang lại lợi ích tốt cho việc SEO nội dung trên web bạn thông qua công cụ tìm kiếm Google. Bằng cách tạo công cụ tìm kiếm nội dung trên trang bạn nhưng lại sử dụng web tìm kiếm của Google để lấy ra kết quả. Bạn làm như sau:

Trong thẻ Url của file opensearch.xml trên, bạn thay đổi nó như sau:
Từ:
<Url type="text/html" template="http://www.zkiwi.com/search?q={searchTerms}"/>

Thành :

<Url type="text/html" template="http://www.google.com/search?q=site:zkiwi.com {searchTerms}"/>

Đừng quên đổi domain zkiwi.com thành domain của bạn. Như vậy chức năng này sẽ tìm kiếm nội dung của web bạn bằng công cụ tìm kiếm Google và từ khóa mà người sử dùng gõ vào. Như vậy lợi ích cho SEO tìm kiếm nội dung trên trang bạn là quá rõ ràng.

Đến đây bạn đã có thể tạo chức năng OpenSearch cho web mình. Chúc bạn thành công.

 

drop-down-menu-css

Làm menu xổ xuống(drop-down menu) bằng css và html

Menu là một thành phần không thể thiếu của website. Việc xây dựng một hệ thống menu hợp lý và dễ sử dụng không hề đơn giản, nhất là những website có hệ thống đa cấp và phức tạp. Menu xổ xuống(drop-down menu) là sự lựa chọn hàng đầu cho những website này. Sau đây là phần hướng dẫn tạo một menu đa cấp chỉ dùng css và html, tinh chỉnh gọn nhẹ và dễ sử dụng.

drop-down-menu

Để có được một hệ thống menu đa cấp như trên, bạn có thể thực hiện theo các bước như sau:

  1.  Tạo một hệ thống menu HTML:
    Thường thì trong lập trình, hệ thống menu html sẽ tự sinh ra, sau đây là đoạn html mô phỏng cho một menu đa cấp

    <div>
          <ul>
            <li>
                <a href="#">Menu 1</a>
                <ul>
                    <li><a href="#">Menu 1 - Lv2</a>
                        <ul>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Menu 1 - Lv2</a>
                        <ul>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Menu 1 - Lv2</a></li>
                    <li><a href="#">Menu 1 - Lv2</a></li>
                    <li><a href="#">Menu 1 - Lv2</a></li>
                </ul>
            </li>
       </ul>
    </div>
  2. CSS cho menu:
    <style type="text/css">
    .menu
    {
        width:70%; 
        height:30px; 
        line-height:30px;
        margin:0 auto;
    }
    .menu li
    {
        position:relative;
        display:inline-block;
        width:100%;
    }
    .menu li ul
    {
        position:absolute; 
        display:none;
    }
    .menu li:hover > ul
    {
        display:block;
    }
    .menu a
    {
        display:block; 
        color:#fff;
        background:#606c88;
    }
    .menu ul ul,
    .menu li:hover > a,
    .menu a:hover
    {
        opacity:.8;
    }
    /*Level 1*/
    .menu > ul > li
    {
        float:left;
        width:24%;
    }
    .menu > ul > li > a
    {
        width:94%;
        padding-left:3%; 
        padding-right:3%; 
        text-transform:uppercase; 
        font-weight:bold;
    }
    /*Level 2*/
    .menu > ul > li > ul
    {
        position:absolute; 
        top:100%; 
        left:0; 
        width:100%; 
    }
    .menu > ul > li > ul > li
    {
        width:100%;
    }
    .menu > ul > li > ul > li > a
    {
        width:94%;
        padding-left:3%;
        padding-right:3%;
    }
    /* Level +++ */
    .menu ul ul ul
    {
        width:100%;
        left:100%;
        top:0;
        background:#a1b1d4;
    }
    .menu ul ul ul li
    {
        width:100%;
    }
    .menu ul ul ul li a
    {
        width:94%;
        padding-left:3%;
        padding-right:3%;
    }
    
    </style>

    Code CSS sử dụng % làm đơn vị, vì vậy menu sẽ tự co giãn theo chiều rộng của website. Bạn có thể quy định cụ thể chiều rộng bằng cách  set chiều rộng cụ thể cho menu.

Bạn có thể sử dụng file demo để làm mẫu cho việc xây dựng menu cho website của mình. Bạn có thể sử dụng jQuery để tạo hiệu ứng cho menu trở nên mượt hơn, bài viết này hướng dẫn bạn sử dụng Css để tạo menu, vì vậy phần hướng dẫn sử dụng jQuery tạo hiệu ứng cho menu xin vui lòng xem hướng dẫn ở một bài viết khác.

 

them-thuoc-tinh-rel-nofollow

Hướng dẫn thêm thuộc tính rel=nofollow cho liên kết trong website

Vì một số lý do, chúng ta cần thêm thuộc tính rel với giá trị nofollow vào liên kết ngoài trên website. Lý do tại sao thì bạn có thể tham khảo thông tin tại bài viết này: Rel=nofollow và rel=dofollow trong thẻ liên kết

Thông thường, bạn có thể làm theo 2 cách:

  1. Thêm thẻ meta cho trang web, với cách này, tất cả những liên kết có trên trang sẽ được hiểu là nofollow. Bạn chỉ việc chèn đoạn code dưới đây vào trong thẻ head của file HTML
    <meta name="robots" content="nofollow" />
  2. Cách thứ 2 là chèn thủ công thuộc tính rel=”nofollow” vào mỗi link mà bạn muốn bot search xác định là nofollow, như đoạn code bên dưới:
    <a href="signup.php" rel="nofollow">sign up</a>

Ngoài ra, bạn có thể sử dụng jQuery để thực hiện một cách tự động việc chèn thuộc tính rel vào liên kết:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js' type='text/javascript'></script>
<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery('a[href*="http://"]:not([href*="http://www.yourdomain.com"])').attr('rel', 'nofollow');
    });
</script>

Đoạn code trên sẽ thực hiện việc lọc những liên kết nào không phải của web bạn và chèn thuộc tính rel=”nofollow” vào liên kết đó. Như vậy, những liên kết thuộc trang web như menu, các liên kết bài viết… sẽ không bị nhận là nofollow. Điều này sẽ tốt hơn là tất cả các liên kết đều là nofollow.

Lưu ý: bạn nhớ thay đổi “yourdomain.com” bằng domain của bạn, nếu web bạn đã có sẵn thư viên jquery thì xóa dòng thư viện jquery đi.

Việc thêm thuộc tính rel=”nofollow” vào liên kết tối ưu nhất vẫn là xác định chính xác từng đối tượng thẻ liên kết để  thêm vào. Có nhiều chỉ mục trên trang web của bạn cần được Google tìm và lập chỉ mục thì không nên thêm thuộc tính này vào, nhưng có những liên kết không cần Google tìm kiếm và lập chỉ mục thì nên thêm thuộc tính này vào, ví dụ như các liên kết đến các trang đăng nhâp, hay đăng ký…

Tùy thuộc vào mỗi trường hợp, bạn có thể lựa chọn cách thức phù hợp với trang web của bạn. Chúc bạn thành công.

rel-nofollow

Rel=nofollow và rel=dofollow trong thẻ liên kết

Khi nói đến SEO link cho web, mọi người sẽ dành sự quan tâm đặc biệt đến thuộc tính rel của thẻ liên kết, vậy nó có tác dụng và ý nghĩa gì trong việc xây dựng một website cũng như cấu trúc SEO? Bài viết này sẽ tìm hiểu về thuộc tính rel với 2 giá trị là “nofollow” và “dofollow“.

Có thể bạn đã biết, các website được tìm thấy dựa trên những thuật toán tìm kiếm mà các nhà lập trình hàng đầu của Google, Yahoo, Bing.v.v.. tạo ra và được gọi nôm na là spider. Cụ thể chúng ta sẽ nói đến Google Search, một công cụ tìm kiếm phổ biến và chiếm hầu hết thị phần tại Việt Nam. Khi website bạn được publish lên Internet, những chú nhện thông minh này sẽ tìm đến và thu thập thông tin và đưa về máy chủ xử lý. Với những thông tin đã tìm được, bao gồm nội dung, hình ảnh, liên kết trên trang,… thì Google sẽ tiến hành xếp hạng website của bạn, xếp hạng từ khóa, nội dung trong công cụ tìm kiếm… Những thông tin trên trang web đặc biệt quan trọng trong việc đánh giá và xếp hạng một website, đặc biệt là thứ mà chúng ta quan tâm trong bài viết này – Thẻ liên kết và thuộc tính rel với giá trị “nofollow” và “dofollow”.

Có một khái niệm về SEO mà hầu hết những người biết và tìm hiểu về SEO đều biết và áp dụng là xây dựng Backlink cho trang web. Việc này chỉ đơn giản là đến các trang web và tìm cách chèn một liên kết dẫn đến trang web của mình. Nói thì đơn giản, nhưng việc “gửi” những liên kết như vậy lên các website đòi hỏi sự hiểu biết và chọn lọc nhất định. Nói tách biệt về khía cạnh mà chúng ta quan tâm trong bài viết này là việc các liên kết mà chúng ta “gửi” lên các trang web bị chèn thêm thuộc tính rel=”nofollow”, nhất là đối với những trang web lớn, có uy tín. Vậy tại sao họ làm điều này?

Lý tại sao nằm trong câu trả lời về tác dụng của thuộc tính này. Google đưa ra lý giải khi sử dụng thuộc tính rel với giá trị nofollow, bạn muốn thêm thuộc tính này vào thẻ liên kết khi:

  1.  Không muốn bị chia sẻ PageRank của website: điều này có thể lý giải như việc một anh chàng bảnh bao, giàu có kết bạn với một anh chàng nghèo rách mồng tơi và dơ bẩn. Khi website của bạn có một thứ hạng nhất định, việc trên web có chứa những liên kết không được đánh giá cao thì website của bạn sẽ bị hạ điểm.
  2. Website của bạn chứa quá nhiều liên kết không đáng tin cậy: đối với trường hợp này không còn ví như việc giàu nghèo và sạch hay bẩn nữa mà sẽ đúng hơn với trường hợp bạn kết bạn với người không rõ danh tính, có nguy cơ là tội phạm. Website của bạn có nguy cơ bị ảnh hưởng nếu những liên kết trên trang có thể dẫn đến những địa chỉ web bị cấm hay chứa virus, mã độc gay hại…
  3. Tránh nguy cơ bị spam trên web của bạn: Khi những trang web spam đặt liên kết trên trang web của bạn đồng nghĩa với việc một chiếc mỏ neo đã được gắn lên trang web của bạn, việc này sẽ hỗ trợ cho những trang web đó xác định rõ mục tiêu.

Nói tóm lại, việc thêm thuộc tính rel với giá trị nofollow vào liên kết ngoài trên trang web của bạn sẽ giúp Googlebot xác định rõ đâu là liên kết không nên theo và bỏ qua. Việc này sẽ giúp website của bạn tránh được những trường hợp nêu trên, ảnh hưởng không tốt đến SEO của web. Như vậy, việc link của bạn được đặt trên một website nào đó có chứa thuộc tính rel=”nofollow” thì nó không có giá trị là một backlink.

Còn giá trị “dofollow” của thuộc tính rel thì thật sự chưa có một định nghĩa nào cụ thể và đáng tin cậy về nó. Việc hướng các bot search không theo các liên kết chỉ là thêm thuộc tính rel và giá trị “nofollow” vào liên kết, điều này có nghĩa là khi không có thuộc tính rel với giá trị là “nofollow” thì thẻ liên kết được bot search hiểu là backlink. Ở một phạm trù nào đó thì giá trị “dofollow” là vô lý và thừa thải. Bạn có thể tham khảo thêm danh sách các giá trị của thuộc tính rel tại đây : W3Schools

Đến đây, bạn có thể xác định được là sẽ làm gì đối với những liên kết ngoài có trên trang web của mình và có hướng đi tốt hơn trong việc tạo backlink cho web.

 

back-to-top

Hướng dẫn tạo nút lên đầu trang(back to top) cho trang web

Có nhiều website có nội dung quá nhiều trên một trang, khiến việc di chuyển trở lên đầu trang khi đã xem hết nội dung trở nên khó khăn hơn. Để khắc phục điều này ta chỉ cần tạo ra một nút di chuyển, khi người truy cập đã xem hết nội dung và muốn di chuyển lên đầu trang thì chỉ việc click vào nút đó thay vì phải sử dụng Scroll di chuyển chậm chạm. Sau đây là hướng dẫn giúp bạn tạo ra chức năng này trên web, và bạn chỉ tốn chưa đầy 5′ cho việc này.

Có 2 cách để tạo ra chức năng này:

Cách 1: cách này khá đơn giản và dễ thực hiện, bạn chỉ việc thêm một thẻ liên kết với thuộc tính HREF mang giá trị “#” vào vị trí chân trang trên trang web của bạn là được. Ví dụ bạn chèn đoạn mã HTML dưới đây:

<a href="#" title="Lên đầu trang">Lên đầu trang</a>

Cách này ưu điểm là nhanh và dễ làm, không sử dụng JavaScript. Nhưng nhược điểm là khi click để lên đầu trang thì người dùng bị “bay” lên đầu trang thay vì di chuyển lên, đôi khi khiến người xem cảm thấy đột ngột và khó chịu đồng thời nút này chỉ nằm ở cuối trang dẫn đến việc người dùng xem đến giữa trang hay bất kể vị trí nào khác ngoài chân trang thì đều không có nút này để di chuyển, ngoài ra cách này cũng tạo cảm giác thô cứng, thiếu mượt mà.

Cách 2: Cách này sẽ khắc phục được những nhược điểm của cách 1, nhưng bạn sẽ tốn thêm chút thời gian cho cách này. Bạn có thể làm theo các bước sau:

  1. Chèn đoạn mã HTML sau vào vị trí mà bạn muốn hiển thị nút “Lên đầu trang”:
    <div id="goTop">
    <img src="duong-dan-hinh/back-to-top.gif" alt="zkiwi demo" />
    </div>
  2. Style cho nút với đoạn css sau:
    <style type="text/css">
    #goTop {
    bottom: 200px;
    cursor: pointer;
    display: none;
    height: 35px;
    position: fixed;
    right: 155px;
    width: 44px;
    z-index: 1000;
    }
    </style>
  3. Thêm đoạn JavaScript sau:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
    $(window).scroll(function () {
    if ($(this).scrollTop() > 100) $('#goTop').fadeIn();
    else $('#goTop').fadeOut();
    });
    $('#goTop').click(function () {
    $('body,html').animate({scrollTop: 0}, 'slow');
    });
    });
    </script>

    Nhớ bỏ dòng thư viện jQuery 1.7.2 nếu web bạn đã có thư viện jQuery.
    Đoạn code trên sẽ thực hiện việc xác định thời điểm xuất hiện nút “Go to top” khi bạn Scroll chuột hay di chuyển nội dung web xuống dưới. Tùy trường hợp bạn có thể tùy chỉnh thêm bớt vị trí mà nút sẽ xuất hiện khi cách đầu trang bao nhiêu bằng cách thay số 100 trong dòng code if ($(this).scrollTop() > 100) $('#goTop').fadeIn(); đơn vị ở đây là pixel(px). Bạn cũng có thể thay tốc độ di chuyển từ vị trí click lên top trang bằng cách thay đổi thuộc tính “slow” bằng số, ví dụ như 1000 = 1 giây tại dòng code $('body,html').animate({scrollTop: 0}, 'slow');

  4. Done. Bạn có thể xem demo hoặc download file về tham khảo. Chúc bạn thành công.
dong-ho-cho-web

Hướng dẫn tạo đồng hồ cho website bằng JavaScript

Bài viết này sẽ hướng dẫn bạn tạo một chiếc đồng hồ số với đầy đủ ngày giờ và sẽ có “kim” giây chạy theo thời gian thực của máy tính. Chỉ mất 5 phút để tạo ra ứng dụng này.

Để tạo ra ứng dụng này bạn không cần phải biết nhiều về JavaScript, bạn có thể làm theo các bước sau đây:

  1. Chèn đoạn JavaScript này vào web của bạn:
    
    function time() {
        var today = new Date();
        var weekday=new Array(7);
        weekday[0]="Sunday";
        weekday[1]="Monday";
        weekday[2]="Tuesday";
        weekday[3]="Wednesday";
        weekday[4]="Thursday";
        weekday[5]="Friday";
        weekday[6]="Saturday";
        var day = weekday[today.getDay()]; 
        var dd = today.getDate();
        var mm = today.getMonth()+1; //January is 0!
        var yyyy = today.getFullYear();
        var h=today.getHours();
        var m=today.getMinutes();
        var s=today.getSeconds();
        m=checkTime(m);
        s=checkTime(s);
        nowTime = h+":"+m+":"+s;
        if(dd<10){dd='0'+dd} if(mm<10){mm='0'+mm} today = day+', '+ dd+'/'+mm+'/'+yyyy;
    
        tmp='<span>'+today+' | '+nowTime+'</span>';
    
        document.getElementById("clock").innerHTML=tmp;
    
        clocktime=setTimeout("time()","1000","JavaScript");
        function checkTime(i)
        {
        if (i<10)
          {
          i="0" + i;
          }
        return i;
        }
    }
    

    Ở đoạn code trên, tùy vào ý muốn, bạn có thể thay đổi vị trí hiển thị ngày hoặc thời gian bằng cách đảo vị trí các biến có trong chuỗi lấy kết quả.

  2. Bước tiếp theo bạn tìm đến thẻ body của file HTML và thêm như sau:
    <body onload="time()">
  3. Bước này bạn thêm một thẻ HTML với id là “clock” ở vị trí mà bạn muốn hiển thị, với ví dụ này sử dụng thẻ div:
    <div id="clock"></div>
  4. Done – vậy là bạn đã có 1 ứng dụng đồng hồ cho website của mình. Bạn có thể tham khảo demo hoặc download về làm theo mẫu. Chúc bạn thành công.