Hoy en Ciudad Blogger un widget del estado del tiempo para tu blog de Blogger pues creo que resultaria interesante para los visitantes. El widget del Weather forecast que muestra datos sobre el tiempo basado en el lugar o localizacion del visitante.En este post te mostrare como instalarlo en blog de blogger .
Chequea Articulo Añadir Efecto Luz en Blockquotes
Demostracion de este widget lo podras ver aqui.
Pasos para Instalar Widget de Pronostico Del Tiempo:
Paso 1:Entra en tu cuenta de blogger. Luego ve a Plantilla >> Editar HTML >> y busca por la siguiente etiqueta</ skin>, justo arriba de esta pega el siguiente codigo de CSS coding (puedes personalizar el codigo si asi lo deseas , pero estoy seguro que como esta es justo lo que necesitas). .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;
}
Paso2:Lo segundo que haremos es añadir el archivo de Javascript ( JavaScript file) que funciona de maravilla. Ahora dentro de la Plantilla de blogger busca por la etiqueta </head> y justo antes de la misma pega el siguiente Codigo de JS .
Chequea Articulo Como Añadir Pajarito Flash a tu blogger
(Te recomiendo que hospedes o alojes el script por ti mismo ya sea en Google Drive o en cualquier otro servicio debido a que nuestro script podria irse debido a la cantidad de bandwidth llena el hospedador del archivo).
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/137869302/weather.js"></script>
Paso 3:Por ultimo, añade el siguiente archivo de estilo en javascript arriba o antes de la etiqueta </body> . Puedes cambiar la posicion de este gadget emplazando posicion: "right" (derecha) a left (Izquierda) o center (centro). Hay otras opciones para personalizarlo, cuales son utiles para machearlas con la configuracion de tu pagina o website.
<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>;
Espero que este tutorial te haya ayudado en aprender como mostrar un widget de estado del Tiempo (weather forecast) en tu blog de Blogger .
