Logotipo de MeteoAsturias.com
Itinerario y migas de pan de MeteoAsturias.com METEOASTURIAS.COM | Portada | Predicciones |

¿Quieres incluir los mapas de MeteoAsturias en tu web o blog?

Tener en tu página o blog los mapas de los 4 días de previsión que ofrece MeteoAsturias es muy fácil. Te explicamos a continuación cómo:

Paso 0. ¿Qué te pedimos a cambio?

Únicamente que conserves el enlace a MeteoAsturias desde el texto "El tiempo en Asturias" y la dirección de origen del mapa sea la misma que incluimos en el código.

Lo que sí podrás cambiar serán los estilos oportunos (colores, tamaño texto, etc...)

Cualquier duda contáctanos en info arroba meteoasturias.com

Paso 1.

Copia y pega este código entre las etiquetas <HEAD> y </HEAD>

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />

<style type="text/css">

.titulo-eltiempo .enlace-texto-normal{
font-family: Open Sans;
color: #003300;
text-decoration: none;
}

.titulo-eltiempo{
font-size: 24px;
margin: 4px;
padding: 0px;
font-weight: bold;
}

.enlace-texto-normal:hover{
background-color: yellow;
}

div#mapa-portada{
position: relative;
float: none;
text-align: center;
width: 400px;
margin: 0px 0px 20px 0px;
padding: 10px 0px 0px 0px;
background-color: #DBE9DC;
overflow: hidden;
border:1px solid #999999;
}

div#mapa-portada ul{
position: relative;
float: none;
width: 100%;
margin: 0px 0px 0px 10px;
padding: 10px 0px 10px 0px;
list-style-type: none;
overflow: hidden;
}

div#mapa-portada ul li{
float: left;
margin-right: 3px;
width: 14%;
padding: 3px;
background-color: #509255;
font-family: Open sans;
font-size: 12px;
color: white;
text-decoration: none;
}

div#mapa-portada ul li a{
color: white;
text-decoration: none;
}

div#mapa-portada ul li a:hover{
color: #003300;
}

div#mapa-portada ul li:hover{
background-color: yellow;
}

</style>

Paso 2.

Copia y pega este código en la parte de tu página donde quieres que aparezcan los mapas (entre las etiquetas <BODY> y </BODY>)

<div id="mapa-portada">
<div id="zona-mapa">
<iframe id="framemapa" name="framemapa" title="mapa" src="http://meteoasturias.elcomercio.es/predicciones/en-tu-web/d1man.php" frameborder="0" allowtransparency="allowtransparency" marginwidth="0" marginheight="0" width="360px" height="180px" scrolling="no">Tu Navegador no soporta esta característica
</iframe>
</div>
<ul>
<li><a href="http://meteoasturias.elcomercio.es/predicciones/en-tu-web/d1man.php" onmouseover="document.framemapa.location=this.href" target="framemapa"><b>d+1</b><br />00 a 12h</a></li>
<li><a href="http://meteoasturias.elcomercio.es/predicciones/en-tu-web/d1tar.php" onmouseover="document.framemapa.location=this.href" target="framemapa"><b>d+1</b><br />12 a 24h</a></li>
<li><a href="http://meteoasturias.elcomercio.es/predicciones/en-tu-web/d2man.php" onmouseover="document.framemapa.location=this.href" target="framemapa"><b>d+2</b><br />00 a 12h</a></li>
<li><a href="http://meteoasturias.elcomercio.es/predicciones/en-tu-web/d2tar.php" onmouseover="document.framemapa.location=this.href" target="framemapa"><b>d+2</b><br />12 a 24h</a></li>
<li><a href="http://meteoasturias.elcomercio.es/predicciones/en-tu-web/d3.php" onmouseover="document.framemapa.location=this.href" target="framemapa"><b>d+3</b><br />00 a 24h</a></li>
<li><a href="http://meteoasturias.elcomercio.es/predicciones/en-tu-web/d4.php" onmouseover="document.framemapa.location=this.href" target="framemapa"><b>d+4</b><br />00 a 24h</a></li>
</ul>
<p class="titulo-eltiempo"><a href="http://meteoasturias.elcomercio.es" class="enlace-texto-normal">El tiempo en Asturias</a></p>
</div>

Paso 3.

Y este es el resultado: