Mẫu 1 · Cổ điển
Hiện tại + danh sách ngày, dạng dọc
8 mẫu widget thời tiết có sẵn
Bấm "Dùng mẫu này" để mở mẫu trong trình tạo phía trên rồi tuỳ chỉnh tiếp.
Mẫu 2 · Thẻ nổi bật
Khối nhiệt độ lớn nền màu + các ngày tới
Mẫu 3 · Thanh ngang
Một hàng ngang, hợp chân trang / banner
Mẫu 4 · Nhỏ gọn
Chỉ thời tiết hiện tại, rất nhẹ
Mẫu 5 · Theo giờ
Hiện tại + 8 giờ tới
Mẫu 6 · Bảng nhiệt độ
Các ngày với thanh nhiệt độ thấp – cao
Mẫu 7 · Lưới ô ngày
Mỗi ngày một ô, xếp lưới
Mẫu 8 · Nền tối
Thẻ tối sang trọng, hợp web nền đậm
Hướng dẫn tạo và chèn widget thời tiết vào website
Chỉ cần sao chép và dán, không cần biết lập trình. Widget tự cập nhật dữ liệu thời tiết, bạn không phải làm gì thêm.
- 1Chọn địa điểm
Gõ tên tỉnh/thành, quận huyện hoặc xã phường vào ô "Chọn địa điểm" rồi bấm vào kết quả phù hợp.
- 2Chọn mẫu
Chọn 1 trong 8 mẫu. Mẫu dọc (1, 2, 6, 8) hợp cột bên (sidebar); mẫu 3 hợp chân trang; mẫu 4 hợp chỗ hẹp.
- 3Chọn số ngày & màu
Chọn 3, 5 hoặc 7 ngày. Bấm một bảng màu có sẵn hoặc tự chọn từng màu cho khớp website.
- 4Sao chép mã nhúng
Khung xem trước cập nhật ngay khi bạn thay đổi. Hài lòng thì bấm Sao chép mã.
- 5Dán vào website
Dán mã vào nơi muốn hiển thị (xem hướng dẫn theo nền tảng bên dưới), lưu lại và tải lại trang.
Chèn vào cột bên (sidebar) hoặc chân trang
- Vào Giao diện → Tiện ích (Widgets) trong trang quản trị WordPress.
- Thêm khối HTML tuỳ chỉnh (Custom HTML) vào vị trí mong muốn, ví dụ "Sidebar".
- Dán mã nhúng vào khối, bấm Cập nhật.
Chèn vào trong bài viết / trang
- Mở bài viết, bấm dấu + và chọn khối HTML tuỳ chỉnh.
- Dán mã nhúng, bấm Xem trước để kiểm tra rồi Cập nhật.
- Với trình soạn thảo cổ điển: chuyển sang tab Văn bản (Text) trước khi dán.
- Vào trang quản lý Blogger, chọn Bố cục.
- Tại vị trí muốn hiển thị, bấm Thêm tiện ích → chọn HTML/JavaScript.
- Dán mã nhúng vào ô nội dung, đặt tiêu đề (có thể để trống) và bấm Lưu.
- Muốn chèn trong bài: mở bài viết, chuyển sang Chế độ xem HTML rồi dán mã.
- Mở file HTML của trang (ví dụ
index.html). - Dán mã nhúng vào đúng chỗ muốn hiển thị trong thẻ
<body>, ví dụ trong thẻ<div class="sidebar">. - Lưu file, tải lên máy chủ và tải lại trang.
<div class="sidebar">
<!-- Dán mã nhúng widget thời tiết vào đây -->
</div>- Trong trình dựng trang (Wix, Ladipage, Haravan, Sapo, Google Sites…), thêm phần tử Nhúng mã / HTML / Embed.
- Dán mã nhúng vào phần tử đó.
- Kéo khung phần tử cho bằng chiều cao trong mã (thuộc tính
height) để widget không bị cắt.
Câu hỏi thường gặp
Widget có miễn phí không?
Hoàn toàn miễn phí, không cần đăng ký tài khoản. Bạn chỉ cần giữ nguyên đường dẫn ghi nguồn ở chân widget.
Dữ liệu trong widget có tự cập nhật không?
Có. Mỗi lần trang của bạn được mở, widget tự lấy dữ liệu thời tiết mới nhất, bạn không cần dán lại mã.
Widget có hiển thị tốt trên điện thoại?
Có. Widget co giãn theo độ rộng khung chứa. Nếu bạn bật "Tự co giãn (100%)", widget sẽ rộng bằng cột chứa nó.
Widget bị cắt mất phần dưới, phải làm sao?
Tăng giá trị height trong mã nhúng (ví dụ từ 330 lên 380). Một số giao diện thêm khoảng đệm quanh iframe nên cần cao hơn một chút.
Muốn đổi địa điểm hoặc màu sắc sau khi đã chèn?
Tạo lại widget ở trang này với lựa chọn mới, sao chép mã mới và thay cho mã cũ trên website.
Widget có làm chậm website không?
Rất ít. Widget là một iframe nhẹ, chỉ tải khi người xem cuộn tới (thuộc tính loading="lazy") và không chạy mã trên trang của bạn.