Виджет погоды для Blogger
Простенький, но пока не локализованный виджет погоды для сайта на Blogger.
Если вы используете дефолтный шаблон, то проще всего делать через меню Шаблон - Настроить, там выбрать Дополнительно - Добавить CSS, и добавляем:Код:Если вы ставили другой шаблон через xml, то проще делать через Изменить HTML..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; }
Затем в режиме изменения добавляем перед тегом </head> , следующее:Код HTML:Лучше скачать этот файл и залить на свой хост или гугл.диск, чтобы потом использовать.<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/137869302/weather.js"></script>Как это сделать
Как использовать .js со своего гугл диска напишу в следующем посте.[свернуть]
Затем ищем тег </body> и прямо перед ним добавляем такое:
Код HTML:Этот виджет мне понравился тем, что его можно закрыть и он имеет очень ненавязчивый вид. Буду разбираться с локализацией )<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>
1 Комментарий