Как показать прогноз погоды на блоге – Виджет Blogger

Всем привет, в этой статье я представлю простой способ показать прогноз текущей погоды на своем блоге. Разработчики MBL сделали не простую работу, и, наконец, смогли подготовить надежный и хорошо функционирующей виджет «прогноз погоды» для блогов на Blogger, который отображает информацию о погоде на основании местоположения ваших посетителей. Итак, в этой статье я покажу вам, как установить виджет прогноза погоды на BlogSpot блог.

Как показать прогноз погоды на блоге – Виджет Blogger

Прежде чем кто-либо начнет пользоваться этим виджетом, давайте я дам вам существенную причину, по которой вы должны использовать данный виджет, основная ее функциональность. Итак, давайте предположим, посетитель из Казани, Республика Татарстан зашел на ваш сайт. Виджет в этот момент начинает собирать данные с местной метеорологической компании и показывает вашему посетителю детально точную погоду, то есть, день солнечный, дождливый, снег, облачно и т.д. Демо виджета можно посмотреть здесь.

Установка виджета «прогноз погоды» на Blogger

Первое, что вам нужно сделать, это войти в свою приборную панель блога на BlogSpot. После этого перейдите в Шаблон >> Изменить HTML >> и найдите тег skin (если не знаете как найти код в новом редакторе шаблона BlogSpot, читаем эту статью), чуть выше него вставьте следующий кусок CSS кода (если вам будет надо, вы можете настроить код, но я уверен, что по умолчанию будет прост для всех).

.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;
}

Второе, чтобы нужно сделать, добавить файл JavaScript, который делает работу этого гаджета весьма блестящей. В редакторе шаблона Blogger найдите тег </head> и прямо над ним вставьте следующий JS код. (Я рекомендую вам выложить код на своем хостинге Google Drive  или на любом другом, потому как он может нагружать блог).

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

Наконец, добавьте стиль файла JavaScript чуть выше тега </body>. Вы можете изменить положение гаджета путем замены позиций: right (вправо) left (влево) или 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>

Я надеюсь, что это руководство, помогло вам добавить виджет прогноза погоды на свой блог/сайте на Blogger.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>