© 2011 Post by Vietgle Portal
Thông tin về thời tiết là một trong những widget hay được hiển thị nhất trên các website tin tức. Tuy vậy, có nhiều web master không biết cách làm widget này. Tôi thường thấy người ta “mượn tạm” các file javascript hoặc lọc nội dung trên các website nổi tiếng như VnExcodess, Dân trí, … rồi hiện chúng trên website của mình. Cáchlàm như vậy khiến website của mình phụ thuộc vào các trang đó, đồng thời cũng khó tùy biến.Bài viết này sẽ chia sẻ cho các bạncách lấy thông tin dự báo thời tiết và hiển thị chúng trên website 1 cách đơn giản. Thông tin thời tiết này được lấy từ Yahoo! nên có thểđảm bảo độ chính xác và tin cậy.Cách hiển thị thông tin thời tiết trên websiteĐể hiển thị thông tin thời tiết trên website, bạn chỉ cần chèn đoạn code sau vào trong thẻ head:<script type="text/javascript" src="http://rilwis.googlecode.com/svn/trunk/weather.min.js"></script> Sau đó, ở vị trí bạn muốn hiển thị thông tin thời tiết, bạn chỉ cần chèn đoạn code:<script type="text/javascript">showWeather('hanoi, vietnam');</script>Nhớ thay ‘hanoi, vietnam’ bằng vị trímà bạn muốn theo dõi thời tiết. Nó có dạng ‘city, country’ như mẫu trên.Nếu bạn muốn hiển thị thông tin thời tiết cho nhiều thành phố thì chỉcần gọi hàm showWeather()nhiều lần, như VD dưới đây, tôi sẽ hiển thị thông tin thời tiết của Hà Nội, Đà Nẵng và TP Hồ Chí Minh:Code tương ứng:<div id="weather"><h3>Thông tin thời tiết</h3><h4>Hà Nội</h4><script type="text/javascript">showWeather('hanoi, vietnam');</script><h4>Đà Nẵng</h4><script type="text/javascript">showWeather('danang, vietnam');</script><h4>TP Hồ Chí Minh</h4><script type="text/javascript">showWeather('hochiminh, vietnam');</script></div>Bạn có thể copy trực tiếp code trên và chèn vào website để sử dụng luôn! Đối với Blogger, hãy tạo 1 widget HTML mới và paste đoạn code trên vào. Đối với Wordcodess, vào phần quản lý widgets, drag 1 text widget vào sidebar nào đó và paste đoạn code trên vào phần nội dung widget.Để tùy biến cách hiển thị đẹp hơn, bạn nên bao bọc nó bằng 1 thẻ div(như trong VD trên) và dùng CSS để tùy chỉnh.Dành cho developer Đoạn javascript ở trên đã được minify, nếu các bạn muốn tham khảo code nguyên vẹn của nó, hãy xemmã nguồn tại Google Code. Ở đây, tôi sử dụngYahoo! Query Language (YQL)và API của Yahoo! Weather để lấy thông tin vềthời tiết.Về hướng dẫn sử dụng YQL, trang chủ của nó là địa chỉ tham khảo tốt nhất. Về việc sử dụng YQL cùng với Weather API, nên tham khảobài viết tại blog của YQL. Ngoài ra, có thể Google thêm để coi 1 số bài tutorial khác.Hy vọng script này hữu ích với các bạn.