Widget Weather para Website e Blogue

Coloque um óptimo widget no seu site ou blogue que mostra o tempo a localização e o ip do visitante.

Sem ter que fazer configurações de localização nem de outro tipo, poderá ter este widget no seu blogue ou site em poucos minutos.


Funcionalidade: Widget Weather
Plataforma: Sites: Blogger, WebSite, Etc.
Dificuldade de Implementação: Baixa

Exemplo de Implementação: Nesta página do lado direito


Implementação:

No Blogger

Passo 1 - Abrir o painel principal do Blogger.
Passo 2 - Entrar na zona do HTML do Blogger; Modelo > Editar HTML.
Passo 3 - Procurar pela Tag; </body>
Passo 4 - Antes desta colar o código abaixo (caixa);
Passo 5 - Guardar o modelo e verificar se está tudo bem, caso exista algum problema verificar se foi efectuado todos os passos correctamente, caso seja necessário repetir todos os passos.

Para copiar o código clicar no ícone abaixo

<link href="https://dl.dropboxusercontent.com/u/3883727/MyCodeBox/content/widgets/css/weather.css" rel="stylesheet"></link>
<script src="https://dl.dropboxusercontent.com/u/3883727/MyCodeBox/content/widgets/js/weather.js" type="text/javascript"></script>
<script type="text/javascript">
      //<![CDATA[
      $.MyWeather({
        position: "right",
        showpopup: true,
        temperature: "c",
        closeicon: true,
        showicon: true,
        showtemperature: true,
        showlocation: true,
        showip: true,
        size: 80,
        iconcolor: "#ffffff",
        fontcolor: "#ffffff",
      }, 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>

Num WebSite

Passo 1 - Editar o Html do website
Passo 2 - Procurar pela Tag </body>
Passo 3 - Antes desta colar o código abaixo (caixa A);
Passo 4 - Procurar pela tag </head>
Passo 5 - Antes desta colar o código abaixo (caixa B);
Passo 4 - Salvar o documento.
Passo 5 - Verificar se está tudo bem, caso exista algum problema verifique se efectuou tudo bem, ou repita os passos.

Para copiar o código clicar no ícone abaixo

<script type="text/javascript">
      $.MyWeather({
        position: "right",
        showpopup: true,
        temperature: "c",
        closeicon: true,
        showicon: true,
        showtemperature: true,
        showlocation: true,
        showip: true,
        size: 80,
        iconcolor: "#ffffff",
        fontcolor: "#ffffff",
      }, 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>

Para copiar o código clicar no ícone abaixo

<link href="https://dl.dropboxusercontent.com/u/3883727/MyCodeBox/content/widgets/css/weather.css" rel="stylesheet"></link>
<script src="https://dl.dropboxusercontent.com/u/3883727/MyCodeBox/content/widgets/js/weather.js" type="text/javascript"></script>

Alterações possíveis:

No código que colar no seu blogue ou website poderá optar por alterar alguma das funções, conforme mostro a seguir.

- position: "left" ou "right"
- temperature: "c" ou "f" - (c para celsius, e f para fahrenheit)
- closeicon: true ou false
- showicon: true ou false
- showtemperature: true ou false
- showlocation: true ou false
- showip: true ou false
- size: 80, (o tamanho que desejar)
- iconcolor: "#ffffff" (a cor que desejar) - Ver códigos de cor html Aqui
- fontcolor: "#ffffff" (a cor que desejar)


Também pode alterar a cor do fundo, para isso copie o código abaixo, altere a cor e cole no CSS do seu blogue ou site;

Para copiar o código clicar no ícone abaixo

.MyWeatherDiv {
background-color: #00ADF4 !important;
}

Após estes passos, passará a ter na sua página, um bonito widget, que irá dar algumas informações valiosas aos seus visitantes.