miércoles, 19 de marzo de 2014

Imagen con Pestañas {Menú}

Este tutorial lo publiqué hace un tiempo en mysourcecode.net. Debido a que quería hacer una entrada con un poco más de recursos, he decidido aportar este lindo menú que aparece al pasar el cursor por encima de la imagen. Debo aclarar que este code es exclusivamente de mi autoridad, osease, que lo he creado yo, sin el uso de ninguna base code; por lo tanto, si deseas compartir el tutorial, solo te pido que coloques una redirección a mi blog como único crédito. Lo otro es que, si ves a alguien mas apropiándose de dicho código, o modificando algo, me avises de forma casi instantánea, para tomar cartas en el asunto~

El resultado (antes de empezar todo 8D) es este:


Como a mi me gusta explicar paso a paso como este código se va formando, lo haré de forma lenta y precisa; así aprenden ustedes también un poco de HTML.

1.- Primeramente, hacemos un nuevo gadget HTML, donde crearemos el "contenedor" que incluirá a la imagen y los links...

Donde dice "link imagen", debe ir el link de tu imagen deseada.

2.- Ahora, dentro de este div agregaremos otro donde irán las pestañas:


3.- Debe ir quedando mas o menos así:


El código de un enlace es este:


Puedes agregar tantos enlaces como quieras, siempre y cuando la imagen sea lo suficientemente grande como para que alcancen. En el CSS esta el valor que se edita para permitir mas links...

4.- Muy bien, ahora pegaremos el CSS correspondiente. Este va en Plantilla -> Edición HTML -> y antes de "]]></b:skin>". Para encontrar mas fácil el código, apreten CTRL + F dentro de la cajita del html.

Todo lo que está entre estos signos "/*X*/" es editable y sirve para adaptar la anchura de la imagen con el texto, el alto, el margen, etc; por lo tanto recuerda no tocar lo demás si es que no sabes para que sirve.

2 comentarios :

  1. me encanto gracias por compartirlo :)

    ResponderEliminar
  2. Estoy enamorada de tu cabecera~!
    uhh gracias por la tutorial,se ve super genial*//*

    saludos~

    ResponderEliminar