Vamos a Plantilla/Editar HTML
Después buscamos lo siguiente Presionamos Ctrl+F :<body>Si no la encuentras busca entonces este:
<body expr:class='"loading" + data:blog.mobileClass'>Justo debajo añade lo siguiente:
<b:if cond='data:blog.url == data:blog.homepageUrl'>10%Posicion de la imagen si aumentas el numero bajara la imagen de intro mas abajito,en caso contrario que lo disminuyas ,subira mas ariba la imagen.
<div id="fondointro"><div id="imagenintro"><img src="URL DE LA IMAGEN DE INTRO" style="position:fixed; top:10%; left:40%;"/></div>
<a href="javascript:void(0)" onclick="entrarblog()" style="text-decoration:none"><div id="botonintro" onmouseout="botonpulsado()" onmouseover="botonopulsado()"><span id="textoboton"><img src='URL DEL BOTON DE INTRO'/></span></div></a></div></b:if>
<script type='text/javascript'>
function entrarblog() {
document.getElementById('imagenintro').style.display="none";
document.getElementById('botonintro').style.display="none";
document.getElementById('fondointro').style.display="none";}
</script>
<script type='text/javascript'>
function botonopulsado() {
document.getElementById('botonintro').style.top="55.2%";
document.getElementById('botonintro').style.left="45.1%";
}
</script>
<script type='text/javascript'>
function botonpulsado() {
document.getElementById('botonintro').style.top="55%";
document.getElementById('botonintro').style.left="45%";
}
</script>
40%Posicion de la imagen si disminuyes se ira mas a la izquierda, y si aumentas el numero se ira mas a la derecha
Ahora añadimos los estilos, justo antes de ]]></b:skin>(Lo buscamos mas rápido presionando Ctrl+F)
#fondointro {Y listo
z-index:12000;
height:100%;
width:100%;
position: fixed;
top:0px;
left:0px;
background:url(Url del fondo);/* fondo del intro */
}
#botonintro {
z-index:1200;
height:40px; /* Altura del botón */
width:90px; /* Ancho del botón */
top:55%;
left:45%;
position: fixed;
}
#textoboton {
position:absolute;
top:10px;
left:20px;
}
No hay comentarios: