Lunany-kawaii: Tutorial:Intro de mensaje de Bienvenida ♥

Hola

otro pedido de tutorial que me pidieron en el ask

, lo habran visto mucho ,ya conocido gracias a Annyz , verdad?

pero ese intro que les mostró Annyz aparecía mucho en todas las entradas ,aora yo les traigo un intro que solo sale cuando entras al home del blog

Asi queda

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'>
<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>

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
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 {
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;
}

Y listo,dan vista previa por favor , y si ven que les salio bien ,le dan guardar,pero primero le dan en entrar aver si entra

Tuve problemas con este codigo ,se supone que tenia un efecto deslizante pero no me funcionaba

entonces le quite nomas, y tampoco me aparecía el fondo del intro

pero luego yo le aumente un código mas en el primer código que puse.
Los codigos son de aqui

Si lo miran ,verán la diferencia de los codigos ,por que borre algunos

, añadí y cambie también

Bueno aver si a ustedes les funcionan ese efecto deslizante de ese tutorial ,claro sigiendo los pasos de ese tutorial ,por que este no lo tiene

Tambien se demora un pokito en aparecer el intro

pero solo un pokito

¡ jijiji

No se olviden de dar créditos ,ojo los códigos no me pertenecen asi que si pueden pueden dar créditos a este blog y a MI por que los edite nada mas ,para que funcionara bien

Cualquier problema con este tutorial puedes preguntar,para ayudarte