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='&quot;loading&quot; + 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(&#39;imagenintro&#39;).style.display=&quot;none&quot;;
document.getElementById(&#39;botonintro&#39;).style.display=&quot;none&quot;;
document.getElementById(&#39;fondointro&#39;).style.display=&quot;none&quot;;}
</script>
<script type='text/javascript'>
function botonopulsado() {
document.getElementById(&#39;botonintro&#39;).style.top=&quot;55.2%&quot;;
document.getElementById(&#39;botonintro&#39;).style.left=&quot;45.1%&quot;;
}
</script>
<script type='text/javascript'>
function botonpulsado() {
document.getElementById(&#39;botonintro&#39;).style.top=&quot;55%&quot;;
document.getElementById(&#39;botonintro&#39;).style.left=&quot;45%&quot;;
}
</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
Proxima entrada efecto de ask 

8 comentarios :

  1. Ja gracias *-* creo que lo usare para mi nuevo diseño n.n besos!!

    ResponderEliminar
  2. esta exelente!! siempre quise ponerlo en mi blog XDDDDD

    ResponderEliminar
  3. Super lindo :D gracias por compartirlo

    ResponderEliminar
  4. Me encanta el tutorial!!! siempre lo quise poner en mi blog pero no daba con ello ¬¬ muchisimas gracias!!!

    ResponderEliminar
  5. Que buen tuto*^*
    Por cierto >< Lo que preguntaste en mi blog, mi hermana utilizo maquillaje en crema, lo puedes comprar en tiendas como Party Fiestas, especializadas en fiestas y celebraciones o en tiendas de hogar y regalos nwn

    ResponderEliminar

Hola :3 Bienvenidos a Lunany-kawaii
Debera seguir las siguientes reglas:
-No insultos
-No spam
-Ni peleas
gracias ♥