sábado, 1 de junio de 2013

[Tutoriales] Imagen con menú oculto


¡¡Hello!! Hoy voy ha traeros un tuto muy kawaii que me puse nuevo en el blog y me encantó pero antes quiero dar las gracias a una nueva seguidora, Chaaby Captor de verdad muchísimas gracias por seguir este blog ¡¡Estoy tan feliz!!


 

Bueno el tuto de hoy es de un menú nuevo que he puesto en el blog que es este:


AVISO: el tutorial no me pertenece es del blog Lunany kawaii.

Si queréis seguir el tuto dar a CONTINUAR LEYENDO.



Primero hay que ir a Plantilla/Editar Html/ presionar Ctrl+F y ponen  ]]></b:skin>  

Al encontrarlo pegar el siguiente codigo antes de  ]]></b:skin>



#escondi:hover #menu{
opacity:1;
}
#menu{
opacity: 0;
position:absolute;
-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;transition: all 1s ease-in-out;
margin-top:-70px;
}
#menu a{
display: block;
padding-right:5px;
margin-left:15px;
padding:2px;
width:80px;text-align:right;font-family:'04b03';font-size:8px;text-transform: uppercase;color:#ff699e;background: white; border-right:5px #FD5B91 solid; margin-bottom:1px;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;-ms-transition:all .3s linear;}
#menu a:hover{border-right:0px #CCC solid;padding-right:6px;}
@font-face {font-family: '04b03';url(http://static.tumblr.com/rozpbz7/j0dm2jpkp/04b_03__.ttf) format('woff');}
  
  

Para Personalizar cambiar de color :

#FD5B91:color del bordesito. 

#ff699e:Color de la letra.





Después ponen guardar y se van a Diseño/Añadir gadget/HtmlJavascript y ponen el siguiente código:




<div id="escondi">
<img src="URL DE LA IMAGEN" />
<div id="menu">
<a href="Url de la pagina">home</a>
<a href="
Url de la pagina">sobre mi</a>
<a href="
Url de la pagina">tutoriales</a>
<a href="
Url de la pagina">creditos</a>
</div></div>


Bueno eso es todo, lo guardan y listo. Aquí mi google+, comunidad Anime y nuestro correo por si queréis preguntarnos algo o alguna cosa:



Correo electrónico del blog:



4 comentarios:

  1. gracias por el tuto , es muy util!

    ResponderEliminar
  2. ¡Gracias! xDDDDDDDDd (muchas de's \*-*/)
    Tengo una pregunta...preguntosa....
    ¿Cómo haces para poner esa cajita de texto en tus entradas? (No sé cómo se llama realmente, pero me refiero al marco que está alrededor de los códigos que pusiste)

    ResponderEliminar
    Respuestas
    1. de nada ^u^/ y creo que se a que te refieres, lo saqué de este tutorial: http://thecircus-x.blogspot.com.es/2013/01/edita-el-post-title-titulo-del-post.html

      Eliminar