A exibição do widget de previsão do tempo em seu blog do Blogger pode ser uma coisa interessante para seus visitantes. Recentemente, um de nossos leitores nos enviou um e-mail perguntando se havia uma maneira fácil de exibir a previsão do tempo atual em seu blog. Nossos desenvolvedores fizeram algum trabalho de pesquisa e finalmente conseguiram preparar um widget de previsão do tempo robusto e funcional que exibe detalhes do tempo com base na localização do seu visitante. Neste artigo, mostraremos como exibir a previsão do tempo em seu blogger blog.
Antes que alguém use este widget, estaremos dando algumas razões importantes pelas quais você deve usá-lo também, principalmente discutindo sobre sua função. Vamos supor que um visitante de Londres, Inglaterra, chegou ao seu site. Agora, este widget buscaria os dados da empresa meteorológica local e forneceria seus detalhes precisos. Agora se o dia estiver ensolarado, chuvoso, nublado e etc.
A demonstração do widget pode ser vista aqui .
A solução:
A primeira coisa que você precisa fazer é entrar no painel do seu blogger. Agora vá para Template >> Edit HTML >> e procure pela skin tag, logo acima cole o seguinte trecho de codificação CSS (você pode customizar o código se quiser, mas temos certeza que o padrão seria o certo para todo o mundo).
.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;}
A segunda coisa é adicionar o arquivo JavaScript que faz o trabalho de forma brilhante. Dentro do seu template do blogger, procure pela tag </head> e logo acima cole o seguinte JS Coding. (Recomendamos que você hospede o script por conta própria no Google Drive ou em qualquer outro serviço, pois nosso script pode ficar inativo se nossa cota de largura de banda ficar cheia).
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/137869302/weather.js"></script>
Por último, adicione este arquivo javascript de estilo logo acima da tag </body>. Você pode alterar a posição do gadget substituindo position: "right" para esquerda ou centro. Existem muitas outras opções para sua personalização, que podem ser úteis para corresponder à configuração do seu site.
$("#picTemp").attr("src", c) }); </script>
Esperamos que este tutorial possa ter ajudado você a aprender como exibir a previsão do tempo no site do seu Blogger. Experimente e deixe-nos saber quais são seus pensamentos sobre o nosso mais recente desenvolvimento, comentando suas opiniões abaixo.
Tags:
INTERNET
