Cách tạo widget thời tiết cho website hoàn toàn miễn phí

Widget thời tiết là một “plugin” miễn phí được cung cấp bởi thoitiet.info – trang tin thời tiết uy tín tại Việt Nam. Khi cài đặt widget thời tiết vào trang web của mình, khách truy cập sẽ có thêm một công cụ để theo dõi tình hình khí hậu tại địa phương giúp gia tăng sự hài lòng, từ đó nâng cao tỷ lệ giữ chân người dùng ở trang web của bạn. Nếu bạn đang tìm kiếm cách tạo widget thời tiết cho website miễn phí và cài đặt nhanh chóng thì đây chính là bài viết dành cho bạn.

Những lợi ích khi dùng widget thời tiết lấy nguồn trực tiếp tại thoitiet.info

Trang web dự báo thời tiết thoitiet.info là một trong những kênh thông tin thời tiết được rất nhiều người tin tưởng và tìm kiếm. Kênh phục vụ miễn phí cho tất cả mọi đối tượng trong và ngoài nước, kể cả widget thời tiết cũng vậy. Widget thời tiết chúng tôi cung cấp có những ưu điểm:

  • Hoạt động ổn định, chính xác, 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 cho website và tuỳ biến

Widget thời tiết trên trang thoitiet.info cho phép người dùng tuỳ chỉnh 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.info/widget để bắt đầu tạo widget thời tiết

Bước 2: Tinh chỉnh các trường 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 tại widget của mình, bạn có thể nhập một tỉnh, thành phố hay quận huyện vào ô trống rồi chọn đúng tên địa điểm mình muốn.

địa điểm

  • 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 chọn 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 cung cấp lựa chọn dự báo là 3 ngày, 5 ngày hoặc 7 ngày.

số 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 tinh 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. Nếu bạn muốn sử dụng màu sắc mặc định theo thoitiet.info thì bỏ qua phần này nhé.

màu sắc

Khi bạn muốn thay đổi màu sắc của thành phần nào đó, hãy nhấn vào ô màu sắc tương ứng. Ngay lập tức, một bảng chọn màu sẽ hiện ra, bạn hãy chấm một màu ưng ý nhất. Cũng tại bảng chọn màu sắc, dòng phía dưới cùng để nhập mã màu, bạn có 3 lựa chọn để nhập mã màu tại đây, bao gồm RGB, HSL hoặc HEX. Nếu bạn rành về mã màu nào thì lựa chọn cho phù hợp với mình nhé. Còn nếu chưa hiểu gì về những thứ này thì không sao cả, chỉ cần bạn chấm chọn màu ở vùng chọn phía trên là đủ rồi.

Những thành phần khác bạn làm tương tự, sau khi chọn màu xong bạn nhớ bấm nút “Tạo Widget” để xem trước thành quả của mình ở màn hình preview bên phải.

Bước 3: Sau khi đã hài lòng với widget mình tạo ra, bạn 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à 500 pixel, nếu bạn cảm thấy to quá thì hãy kéo thanh trượt về bên trái để thu nhỏ widget lại nhé.

size widget

Bước 4: Sau khi đã hoàn tất bạn 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ã

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

Khi bạn tạo xong widget thời tiết tại trang web thoitiet.info của chúng tôi thì coi như đã hoàn thành một nửa. Việc còn lại là đem đoạn mã vừa rồi gắn vào website chính chủ của mình thôi. Công đoạn gắn mã vô cùng đơn giản nhưng bắt buộc bạn phải có quyền quản trị viên website mới có thể làm được. 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

cột menu giao diện chọn widget

Bước 3: Bạn xác định vị trí muốn gắn widget lên website của mình. 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 hay còn gọi là cột phải.

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.

kéo HTML tuỳ chỉnh vào trong side bar

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 cho widget của mình (ví dụ: Xem thời tiết hoặc thời tiết hôm nay & 3 ngày tới). Ở 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.info/widget vào.

dán đoạn mã widget vào

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

thành quả
Widget 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 vô cùng đơn giản phải không nào, chúc bạn thành công.