Menú y descripción en una imagen

 

Hola, hola mis amores, como han estado?!
Espero en Dios que bien, yo por aca trayendoles un nuevo tutorial en el dia de hoy, 
el mismo es muy sencillo. Se trata de colocar un menú y una descripción sobre la imagen de tu preferencia.

Aunque se escucha muy sencillo este tutorial, creeme que quedara hermoso a la hora de destacar algún texto en tu blog o alguna entrada del mismo, así como también si quieres agregar un menú con descripción en el sidebar de tu blog. Espero te guste el estilo que hoy te comparto, el mismos acreditamos a annyzkawaii. Comencemos:


Primer efecto - Pasa el cursor sobre la imagen



Copia el siguiente codigo y pegalo donde gustes que se muestre
la imagen con el texto y el menú. Arriba una imagen como
ejemplo de lo que tendrás cuando agregues el código.
Puedes verlo en vivo también haciendo clic aquí.

<center><style type="text/css">
.img-side{
background: #f4e9e7;
color: #000;
width: 240px;
height: 160px;
margin-top:-165px;
opacity: 0;
-webkit-transition:all .5s ease-in-out; }
.img-side:hover{
opacity:.7
}
</style>
<img src="URL DE LA IMAGEN" width="240" />
<br />
<div class="img-side">
<br />
<center><span class="Apple-style-span" style="font-family: verdana, arial; font-size: medium; "><span id="nav" style="font-size: 13px; font-family: serif; background-color: #FFFFFF;padding: 3px;border-radius:5px;border: #eab8af 1px dashed;-webkit-transition:1s;"><a href="ENLACE UNO" style="color:#000000; text-decoration: none; -webkit-transition-duration: 0.5s; ">CATEGORÍA UNO</a></span><span id="nav" style="font-size: 13px; font-family: serif; background-color: #FFFFFF;padding: 3px;border-radius:5px;border: #F8E0F7 1px dashed;-webkit-transition:1s;"><a href="ENLACE DOS" style="color:#000000; text-decoration: none; -webkit-transition-duration: 0.5s; ">CATEGORÍA DOS</a></span><span id="nav" style="font-size: 13px; font-family: serif; background-color: #FFFFFF;padding: 3px;border-radius:5px;border: #F8E0F7 1px dashed;-webkit-transition:1s;"><a href="ENLACE TRES" style="color:#000000; text-decoration: none; -webkit-transition-duration: 0.5s; ">CATEGORÍA TRES</a></span><span id="nav" style="font-size: 13px; font-family: serif; background-color: #FFFFFF;padding: 3px;border-radius:5px;border: #F8E0F7 1px dashed;-webkit-transition:1s;"><a href="ENLACE CUATRO" style="color:#000000; text-decoration: none; -webkit-transition-duration: 0.5s; ">CATEGORÍA CUATRO</a></span><br /><font face="arial" size=2 color=#000000>AGREGA AQUÍ TU TEXTO.. AGREGA AQUÍ TU TEXTO.. AGREGA AQUÍ TU TEXTO.. AGREGA AQUÍ TU TEXTO.. </font></span></center></div></center>

Tutos Koko Kawaii

Cuando vayas a colocar este código en una entrada de tu blog, debes colocarlo justo antes de darle publicar a tu post, y sobre todo, debes hacerlo desde la pestaña HTML y no desde la pestaña de redactar. Debes también hacer las modificaciones ahi mismo, en html, y luego que termines le das publicar, esto para evitar errores y fallas.


Ahora pasemos a desglosamos el código



  • Lo resaltado en color amarillo: Aquí podremos modificar según sea nuestra necesidad conforme la imagen que utilicemos. Lo modificado en este tramo es background que es el color de fondo transparente que se muestra una vez ponemos el cursor encima de la imagen, también en color estamos modificando el color de texto, luego vemos el tamaño tanto el ancho como el alto del background, también podemos modificar el margen en cuanto a la altura de dicho fondo de color.  Por último, al lado de la url de la imagen hay algo seleccionado en amarillo, eso es para modificar el tamaño de la imagen, esto en cuanto al ancho de la misma, la altura se define automaticamente segun el ancho que escojas y pongas allí.
  • Lo resaltado en color rosado: Es la url de la imagen que se mostrará.
  • Lo resaltado en color azul: Es el codigo del menu. Ahí debes modificar todo lo que está en negrita, es decir, en categoría poner el nombre que quieres que se muestre como pestaña de menú y en la url pones el enlace con el que quieras enlazar dicha categoría. Solo ten en cuenta que son 4 categorías con sus respectivos enlaces. Ejemplo: Enlace Uno - Categoría Uno, etc... Te hago esa aclaración y te pongo ese ejemplo para que no vayas a poner un enlace que no corresponda a la categoría enlazada. OK...  Por último, si no quieres utilizar el menú junto a la descripción, entonces, solo elimina todo ese código azul, que es el código que corresponde al menú.
  • Lo resaltado en color lila (el último color): Aquí puedes modificar el color de la fuente del texto y tambien podras agregar el texto de tu preferencia.
  • Recuerda: No debes agregar títulos muy largos al menu ni una descripción muy extensa.


Bueno mis amores hasta aquí este tutorial. Recuerden si tienen dudas por favor dejarlas en los comentarios de esta entrada y a la mayor brevedad te estaremos ayudando. No dejes preguntas de dudas en el blog de prueba, pues en el mismo no estaremos dando soporte. Ojo con eso, ok.. Bendiciones hasta que sobreabunde!!




Confía En Cristo • Tu Jardín De Fe
Vanessa Martinez © 2012-2019

No hay comentarios.:

Bendicenos con un comentario


๑ ALGUNOS PUNTOS A TENER EN CUENTA ANTES DE COMENTAR๑
♣ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~♣

❥ Un corazón agradecido siempre sabe decir gracias..
❥ Y la forma más fácil de decirlo es a través de tus comentarios..
❥ Al hacerlo se cordial, respetuoso y de bendición a los demás..
❥ Deja la URL de tu blog para que podamos visitarte..
❥ Sin embargo, los enlaces inapropiados serán bloqueados
❥ Para poder agregar un enlace activo en los comentarios VER COMO AQUÍ
❥ Para insertar una imagen solo utiliza [img]URL de la imagen[/img]
❥ Para insertar un vídeo solo utiliza [video]URL del video[/video]
❥ Para cambiar color de texto utiliza [color="red"]Aquí tu texto[/color]
❥ Para crear marquesina utiliza [ma]Aquí tu texto[/ma]
❥ Este blog cuenta con varios autores y un administrador
❥ Publicaciones de nuestra autoría llevarán nuestro nombre al final
❥ Con la fuerza de un oso y la ternura de un gato así es #miositopada
❥ NO COPIA, es creativo.. y si toma algo siempre da los créditos :)
❥ POR TANTO, DILE NO AL SPAM, BECAUSE HERE, SPAM BLOCKED
❥ Los comentarios en este blog pasan por un sistema de moderación
❥ Por tanto, NO se aprobarán los comentarios:
• con textos árabes
• con propagandas (spam)
• con mensajes sin sentido al tema publicado
• con promoción a la violencia o discriminación
• con enlaces a páginas inapropiadas o con violencia
• con ofensas a personas, razas, animales, publicaciones o marcas
❤ ¿Algún problema con eso? ... Somos Team RD ... #algunproblema
❤ El respeto ajeno es la paz.. Pero confrontar lo malo y el pecado es una necesidad :)
❤ Simplemente, si te gusta lo que hacemos, entonces revela tu corazón sin temor
❤ Comparte + Síguenos + Comenta = A dar por gracia lo que recibes
❤ Observa + Procesa + Inspírate + Crea = OPIC•NOW | #opicnow
❤ © NO COPY ® BE•ORIGINAL

ʕ•ᴥ•ʔ COMUNICADO IMPORTANTE ʕ•ᴥ•ʔ
Las publicaciones de terceros compartida en este blog serán acreditadas como corresponde, a no ser, que estén sin créditos donde la conseguimos y desconozca los mismos. Por favor, avísanos con respeto mediante un comentario si algo en este blog necesita créditos ♥
•°Vanessa Martinez © 2012-2019°•

✿ Y RECUERDA, TUS COMENTARIOS ALIMENTAN MI BLOG Y SON CARICIAS DE DIOS A MI ALMA ✿
Cuando comentas con amor y respeto ♥ Nos estamos leyendo mis linduras, mis corazones de fe♥

Gracias por tu visita
¡Hola Corazón de Fe... Anímate a Comentar!
Pues me gustaría saber tu opinión sobre este tema. Dejanos saber si el mismo ha sido de utilidad o de bendición para ti, asi como tambien, que otros temas te gustaria que tratemos.
SOLO RECUERDA: No se permiten mensajes ofensivos o que falten al respeto, tampoco spam.. Puedes compartir la URL de tu blog siempre y cuando opines sobre la entrada que estas comentando y que tu enlace no sea spam ni inadecuado. Dichos comentarios serán marcado como spam y eliminados. Si un niño de 10 años no puede leer o ver lo que compartes entonces no es bienvenido aquí.
¡Si me sigues.. te sigo devuelta!
Excepto aquellos blogs con contenido inadecuado.

♥ A la mayor brevedad respondemos los comentarios

Copyright © 2012-2018 CONFÍA EN CRISTO || Theme Base ๑ GGEORGELYS || Deco-Style and Effects ๑ KOKO KAWAII