Thêm widget thông tin thời tiết, tỷ giá ngoại tệ cho blog

Wednesday, May 1, 2013

Với các trang web/blog chuyên về thông tin, tạp chí hay về kinh tế thì những widget về thông tin thời tiết hay giá vàng, giá ngoại tệ sẽ làm cho trang web trở nên chuyên nghiệp hơn và có ích cho độc giả.

Có rất nhiều trang web đã cung cấp những đoạn code mã về thời tiết hay tỷ giá vàng nhưng mình thấy còn rất nhiều hạn chế. Hầu hết là những đoạn javascript sẵn và lấy nguồn từ 1 website nào đó trung gian.

Trong bài viết này Share99 sẽ cung cấp tới các bạn một widget tỉ giá ngoại tệ và thông tin thời tiết để chèn vào web/blog

Ưu điểm :

Có giao diện hoàn toàn mới, chuyên nghiệp hơn
Có thể tùy chỉnh được để phù hợp cho giao diện web hay blog của các bạn .

Demo :

Các bước thực hiện - Hướng dẫn trên Blogspot

1. Đăng nhập Blogger/ blogspot

2. Vào bố cục.

3. Vào vị trí muốn chèn widget thời tiết, ngoại tệ, chọn Thêm tiện ích

4. Chọn thêm HTML/ Javascript

Chèn đoạn code sau đây vào ô HTML/ Javascript :

<div style="width:300px">
<style type="text/css">
#weather-share99{
color :#000;
cursor: pointer;
background:#7fccff;
background: -moz-linear-gradient(top, #4fbfdc 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4fbfdc),color-top(100%,#f4f4f4));
background: -webkit-linear-gradient(top,#4fbfdc 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #4fbfdc 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #4fbfdc 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #4fbfdc 0%,#f4f4f4 100%);
}
#weather-share99 a{ text-decoration:none; color: #000};
</style>
<div id="weather-share99" class="weather-share99">

<tr><td colspan="2">
         <br /><img title="weather" border="0" src="https://ssl.gstatic.com/onebox/weather/35/partly_cloudy.png" style="vertical-align:middle" width="25px" alt="Thời tiết" /><b><a href="http://wwww.share99.net">Thời tiết</a></b>
          </td>
         </tr>
<div id="weather-share99" class="weather-share99">
<div id="thoitiet" style="padding: 9px 0 5px 20px; text-align:left">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://vietconsinfo.googlecode.com/svn/weather.js"></script>
<div><select class="thoitiet" id="cboListCity" name="cboListCity" style="width:105px;"><option selected value="hochiminh" />Tp HCM</select><div class="inner"><img border="0" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJP_rQp9Tol25Fr-oFQ_6xI3FLuhogztJZRqMhWdUFsw3SyrlE8efWu6uaQNk-wNdIs4sEaT228-JANym2kbxh0LYqaBj2W4ns_oHZCcrq4_YrEE2lVDuJZ1nur5fYDOIFxvGpGbb0NU59/s1600/loading.gif'/></div></div>
<script>/*<![CDATA[*/$("select").change(function(){var b="";$("select option:selected").each(function(){b+=" "+$(this).val()+" "});var a=b.split(" ");showWeather(""+a[1]+",vietnam")});/*]]>*/</script></div></div>

<div class="box">
<td colspan="2">
<img title="tỷ giá " border="0" src="http://nhavietnam.com.vn/hinhanh/money.png" style="vertical-align:middle" width="25px" alt="Giá vàng" /><b><a href="http://wwww.share99.net">Giá vàng 9999</a></b></td>
<div id="weather-share99" class="weather-share99">
<script type="text/javascript" language="JavaScript" src="http://vnexpress.net/Service/Gold_Content.js"></script>
<script type="text/javascript" language="JavaScript" src="http://bachkhoamedia.googlecode.com/files/tygia.js"></script>
</div>
</div>
<div class="box">
<td colspan="2"><img src="http://nhavietnam.com.vn/hinhanh/circle-chart.png" style="vertical-align:middle" border="0" title="Gia Vang" alt="Tỷ giá" /><b><a href="http://wwww.share99.net">Tỷ giá ngoại tệ</a></b>          </td>
<div id="weather-share99" class="weather-share99">
<script type="text/javascript" language="JavaScript" src="http://vnexpress.net/Service/Forex_Content.js"></script>
<script type="text/javascript" language="JavaScript" src="http://bachkhoamedia.googlecode.com/files/money.js"></script>
</div>
</div></div>
</div>

Chỉnh sửa các thông số ở CSS #weather-share99 cho phù hợp với trang của bạn.
Nên download các file js mà Share99 tô đỏ về và up lên host của bạn để đề phòng file js của Share99 cung cấp bị die

5.Lưu lại và kiểm tra thành quả !