Hướng dẫn tạo widget thời tiết trên website cực đơn giản từ trang thoitiet.edu.vn

Trang web của bạn sẽ phong phú hơn khi có thêm một widget thời tiết được cập nhật tự động. Bài viết sau đây sẽ hướng dẫn từng bước cách tạo widget thời tiết và gắn vào trang web của bạn hoàn toàn miễn phí.

Những ưu điểm của widget dự báo thời tiết từ trang thoitiet.edu.vn

• Widget hoạt động ổn định, độ chính xác cao, cập nhật tự động tình hình thời tiết ở khu vực đã chọn
• Không ảnh hưởng đến tốc độ load trang
• Không chứa mã độc
• Cài đặt vô cùng đơn giản

Hướng dẫn tạo widget thời tiết và tuỳ biến theo ý thích của mình

Hiện nay trên một số trang web dự báo thời tiết uy tín có cho phép người dùng tuỳ chỉnh widget thời tiết theo phong cách riêng của mình. Bạn có thể tuỳ biến lại màu sắc, đường viền, kích thước chữ, địa điểm dự báo,… Sau khi có cho mình một widget ưng ý, bạn có thể copy đoạn mã đến gắn vào các website trên nền Wordpress hay nền tảng khác đều được.

Để tạo một widget thời tiết đẹp, bạn hãy làm theo các bước sau đây:

Bước 1: Truy cập vào địa chỉ: https://thoitiet.edu.vn/widget để tạo widget thời tiết miễn phí

Bước 2: Tuỳ chỉnh các thông số cần thiết theo sở thích của mình (như màu sắc, địa điểm, kích thước chữ, màu viền,…)

Trong đó:

• Địa điểm: là nơi bạn muốn dự báo thời tiết, bạn có thể nhập một tỉnh, thành phố hay quận huyện vào ô trống.

Hãy nhập và chọn địa điểm bạn muốn dự báo thời tiết ở danh sách xổ xuống 

• Số ngày: là khoảng thời gian dự báo bạn muốn hiển thị trên widget, ví dụ bạn nhập là 3 ngày thì widget sẽ dự báo thời tiết trong 3 ngày tiếp theo. Hiện tại widget thời tiết chúng tôi đang hỗ trợ dự báo tối thiểu là 1 ngày và tối đa là 5 ngày.

Khoảng thời gian dự báo là tối thiểu 1 ngày, tối đa 5 ngày 

• Màu sắc (màu tiêu đề, màu nền tiêu đề, màu văn bản, màu viền và màu đường kẻ): Những trường này dùng để bạn tuỳ chỉnh màu sắc cho các thành phần hiển thị của widget. Bạn hãy tuỳ chỉnh sao cho đúng với phong thuỷ, màu chủ đạo của trang web hoặc đơn giản là dùng một màu mình thích để áp dụng cho widget. Lưu ý, bạn phải điền mã màu vào các trường này.

Sau khi nhập mã màu thì nhấn nút Tạo để cập nhật widget ở màn hình preview bên phải

Nếu bạn đang phân vân màu sắc hoặc không biết lấy mã màu ở đâu thì chúng tôi gợi ý cho bạn trang web này: https://imagecolorpicker.com/vi

Hãy chọn cho mình một màu sắc phù hợp sau đó copy mã màu gồm dấu “#” và một chuỗi ký tự chữ hoặc số phía sau, sau đó dán vào mỗi trường của widget. Ngay bên phải là màn hình preview để bạn xem thử widget của mình có vừa ý hay chưa, hãy thoải mái sáng tạo nhé. Lưu ý, sau khi nhập mã màu vào trường, màn hình preview widget sẽ không tự động cập nhật, vì thế hãy nhấn nút “Tạo” để kiểm tra màu đã vừa ý với bạn chưa nhé.

Thoitiet.edu.vn gợi ý một số mã màu phổ biến cho bạn:

• Màu đỏ: #ff0000
• Màu đen: #000000
• Màu vàng: #f3ff00
• Màu cam: #ff7f00
• Màu lục: #1eff00
• Màu xanh lam: #001bff
• Màu tím: #7b00ff
• Màu hồng: #ff00de
• Màu trắng: #ffffff

Bước 3: Sau khi hoàn tất các thông số, bạn hãy kiểm tra các trường một lần nữa rồi nhấn nút “Tạo” để hoàn tất.

Bước 4: Tiến hành chọn kích thước to, nhỏ của widget thời tiết sao cho vừa mắt để phù hợp với vị trí chèn trong website. Bạn điều chỉnh bằng cách kéo thanh trượt kích thước để chọn cỡ vừa ý. Mặc định widget sẽ có kích thước là 200 pixel, nếu bạn cảm thấy không cần điều chỉnh nữa thì có thể bỏ qua bước này.

Mặc định widget thời tiết là 200 pixel

Bước 5: Copy đoạn mã nằm phía dưới màn hình preview widget để chuẩn bị gắn vào website riêng của mình.

Copy đoạn mã này để chuẩn bị gắn widget lên website của mình

Cách gắn widget thời tiết đã tạo lên website wordpress

Sau khi đã tạo widget dự báo thời tiết ở phần trên, việc bây giờ cần làm là gắn đoạn mã vào trong website của mình. Để làm được điều này thì bạn phải có cho mình một trang web và có quyền quản trị viên. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn gắn vào website nền tảng Wordpress, những nền tảng web khác bạn có thể thực hiện tương tự, chỉ khác một số chỗ nhưng cách làm thì khá giống nhau.

Bước 1: Bạn tiến hành đăng nhập vào tài khoản quản trị trang web của mình

Bước 2: Tại cột menu bên trái, bạn chọn mục Giao diện -> Widget

Bạn phải có quyền quản trị mới có thể thực hiện được việc này

Bước 3: Hãy xác định vị trí bạn muốn gắn widget lên website của mình. Trong một trang web sẽ có 4 vị trí cơ bản là Footer Sidebar, Header Sidebar, Right Sidebar, Left Sidebar. Tuỳ vào trang web bạn bố trí nội dung như thế nào để linh hoạt chọn vị trí cho phù hợp. Thông thường thì widget thời tiết nên gắn vào sidebar nào còn trống (chưa chèn nhiều nội dung), phù hợp nhất là vị trí Left Sidebar hoặc Right Sidebar để thuận mắt người dùng.

Ở bài hướng dẫn này, chúng tôi sẽ chọn vị trí Right Sidebar

Tiếp theo bạn bấm nút mũi tên xổ xuống của thanh Right Sidebar để show ra những thuộc tính phía trong.

Vì widget được lập trình bởi một đoạn mã (code) nên sẽ cần một thuộc tính HTML để chứa đoạn mã này. Chúng ta sẽ cần một “HTML Tuỳ Chỉnh”, nếu trong thanh Right Sidebar chưa có thì bạn hãy nhìn sang bên trái, ở khu vực Widget sẵn có sẽ thấy tất cả những thuộc tính mà Wordpress cung cấp sẵn. Tìm kiếm “HTML Tuỳ Chỉnh” rồi nhấn giữ và kéo nó vào trong thanh Right Sidebar.

Thuộc tính HTML Tuỳ Chỉnh dùng để chứa đoạn code giúp widget thời tiết hoạt động

Bước 4: Tại thuộc tính “HTML Tuỳ Chỉnh”, bạn nhấn nút xổ xuống để thiết lập. Tại mục tiêu đề, bạn đặt tên trùng với khu vực mà bạn muốn dự báo thời tiết ở widget (ví dụ: thời tiết Đà Nẵng). Ở phần nội dung, bạn hãy dán (paste) đoạn mã code widget thời tiết đã copy trên trang thoitiet.edu.vn/widget vào.

Nếu không rành về ngôn ngữ lập trình thì bạn không nên chỉnh sửa đoạn mã này để tránh widget gặp lỗi

Bước 5: Nhấn lưu thay đổi để hoàn tất thiết lập.

Widget thời tiết hoạt động ổn định và chính xác

Vậy là bạn đã hoàn thành các quy trình để tạo và gắn widget dự báo thời tiết lên trang web của mình rồi. Hãy nhấn nút Home để xem thử thành quả của mình. Cách tạo widget thời tiết trên website vô cùng đơn giản phải không nào, chúc bạn thành công.