Hiển thị widget thời tiết cho Blogger

Xin chào các bạn, hôm nay chúng ta sẽ đến với thủ thuật Blogger nhé
Nhiều bạn khá là thích thú với việc thêm nếm những widget hay ho để giúp cho blog của mình thêm phần sinh động và thú vị. Tất nhiên, có rất nhiều widget làm tốt điều này, hôm nay mình sẽ giới thiệu cho các bạn widget thời tiết cho Blogger. Một widget cực hay hiển thị các số liệu liên quan đến thời tiết hôm nay như: Trời đang nắng hay mưa, nhiệt độ ra sao,v.v…
Một số lưu ý với widget thời tiết này:

-Widget được giới thiệu bởi nhóm MBL
-Widget chạy rất mượt, tự động update thời tiết theo múi giờ và khu vực mà blog bạn setup
-Widget sẽ rất phù hợp cho các blog tin tức, thời tiết,v.v…

Ok, giờ là lúc chúng ta tiến đến bước quan trọng nhất

Cách thêm widget thời tiết cho Blogger

Đầu tiên, bạn hãy đăng nhập vào Blogger của bạn. Sau đó tìm đến phần: Template >> Edit HTML. Giờ thì tìm đến phần chứa css của Blogger. Đó là nằm trong thẻ <b:skin >
Các bạn chỉ cần copy và paste đoạn css sau vào trong đó:

.MyWeatherDiv .centerContainer {
width: 300px;
text-align: left;
margin-bottom: 200px;
}
.green {
color: #a6e22d;
}
.teal {
color: #66d9ef;
}
.purp {
color: #ae81ff;
}
.pink {
color: #f92772;
}
.yellow {
color: #e6db74;
}
.white {
color: #f8f8f2;
}
.grey {
color: #616161;
}
.f12 {
font-size: 12px;
}
.MyWeatherDiv img {
height: 64px;
width: 64px;
}
.weatherInfoRight {
z-index: 999;
position: fixed;
top: 10px;
right: 10px;
}
.weatherInfoLeft {
z-index: 999;
position: fixed;
top: 10px;
left: 10px;
}
.weatherInfoBottomRight {
z-index: 999;
position: fixed;
bottom: 10px;
right: 10px;
}
.weatherInfoBottomLeft {
z-index: 999;
position: fixed;
bottom: 10px;
left: 10px;
}
.MyWeatherDiv {
display: none;
background-color: #272822;
padding: 5px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.MyWeatherInfo {
text-align: center;
font-family: ‘Segoe UI’,Tahoma,Helvetica,Sans-Serif;
color: white;
font-size: 14px;
}
#divMyImage {
display: none;
}
.MyWeatherClose {
font-family: ‘Segoe UI’,Tahoma,Helvetica,Sans-Serif;
cursor: pointer;
position: absolute;
right: 10px;
color: white;
font-size: 20px;
}
.MWTemperature {
display: block;
}
.MWPlace {
display: block;
}
.MWIP {
display: block;
}
#clear-day {
display: none;
}
#clear-night {
display: none;
}
#partly-cloudy-day {
display: none;
}
#partly-cloudy-night {
display: none;
}
#cloudy {
display: none;
}
#rain {
display: none;
}
#sleet {
display: none;
}
#snow {
display: none;
}
#wind {
display: none;
}
#fog {
display: none;
}

Bước tiếp theo, khá quan trọng. Các bạn hãy tìm đến thẻ </head> và copy – paste đoạn mã JS dưới đây lên trước thẻ đó. (Mình khuyên bạn nên download file js đó về rồi upload lên Google Drive của bạn. Sau đó lấy link từ trên Drive về)

<script type=”text/javascript” src=”https://dl.dropboxusercontent.com/u/137869302/weather.js”></script>

Bước cuối cùng, các bạn thêm đoạn mã sau vào trước thẻ </body>. Bạn hoàn toàn có thể chỉnh vị trí hiển thị widget trong thẻ position: left hay right hay center.

<script type=”text/javascript”>
$.MyWeather({
position: “right”,
showpopup: true,
temperature: “c”,
closeicon: true,
showicon: true,
showtemperature: true,
showlocation: true,
showip: true,
size: 80,
iconcolor: “white”,
fontcolor: “white”,
}, function (e, f, g, a, d, b, c) {
$(“#txtCity”).html(e);
$(“#txtCountry”).html(f);
$(“#txtIP”).html(g);
$(“#txtLatitude”).html(a);
$(“#txtLongitude”).html(d);
$(“#txtTemperature”).html(b);
$(“#picTemp”).attr(“src”, c)
});
</script>

Vậy là đã hoàn tất công việc rồi. Giờ hãy xem thành quả của các bạn đi nào. Chúc các bạn thành công!

Bài viết được đăng tải trên Blog Thái Mèo.

Mọi sự sao chép vui lòng liên hệ hoặc ghi rõ nguồn để tôn trọng tác giả!

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..