21/12/15

[Tutoriales]Menu Slider Hover!


Holaamadre mia si que estuve ausente, pero ya avise que iba a estar ausente por los estudios que me chupan la energia vitalimagepero no hice esta entrada para nada la hice para ir retomando las entradas que tengo pendientelo primero es este tutorial que me han pedido hace poco y lo tenia pendiente
<<Menu Slider Hover>>


  • Diseño
  • Añadir Gadget Javascrip
  • Pegar el siguiente código

<style>
ul#menuGO li{margin: 0px!important;padding: 0px!important;}
ul#menuGO {list-style: none;margin-top: 0px!important;margin-bottom: 20px!important;padding: 0px; width: 230px; overflow: auto;}
ul#menuGO li a{
display: block;
width: 200px; /* ANCHO DE LINKS */
background: #c8c8c8; /* FONDO DE LINKS */
color: #000000; /* COLOR DE LINKS */
border-left: 0px solid #eee; /* BORDE DE LINKS */
margin-bottom: 3px;
font: 9px verdana;
padding: 7px;
padding-left: 5px;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
text-decoration: none;
}
/* LINKS HOVERS */
ul#menuGO li a:hover{
background: #98b1d7; /* FONDO DE LINKS */
box-shadow: inset 0 0 16px #6b8bba, 0 0 0px #6b8bba;
border-left: 15px solid #6b8bba; /* BORDE DE LINKS */
color: #000000; /* COLOR DE LINKS */
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
text-decoration: none;
letter-spacing: 0px;
</style>
Os recomiendo colocar este gadget debajo de la entrada para no ocupar espacio ya que es un elemento que no se ve

  • Nueva Entrada o Gadget
  • Opcion HTML/Javascrip

<table style="font-family: calibri; font-size: 13px;">
<tbody>
<tr>
<td style="padding-right: 20px;" valign="top"><h3>
</h3>
<ul id="menuGO">
<li><a href="LINK" target="_blank">TITULO #1</a></li>
<li><a href="LINK" target="_blank">TITULO #2</a></li>
<li><a href="LINK" target="_blank">TITULO #3</a></li>
<li><a href="LINK" target="_blank">TITULO #4</a></li>
<li><a href="LINK" target="_blank">TITULO #5</a></li>
<li><a href="LINK" target="_blank">TITULO #6</a></li>
</ul>
<br /></td>
<td valign="top"><h3>
</h3>
<ul id="menuGO">
<li><a href="LINK" target="_blank">TITULO #7</a></li>
<li><a href="LINK" target="_blank">TITULO #8</a></li>
<li><a href="LINK" target="_blank">TITULO #9</a></li>
<li><a href="LINK" target="_blank">TITULO #10</a></li>
<li><a href="LINK" target="_blank">TITULO #11</a></li>
<li><a href="LINK" target="_blank">TITULO #12</a></li>
</ul>
<br /></td>
</tr>
</tbody>
</table>
 ✔Podeis poner esta parte tanto en las entradas para hacer una clasificación o en un gadget para hacer un menu para el blog
✘No pongas este código en el mismo gadget en el que pusisteis el anterior por que seria un lio muy grande 
Este fue el tutorial de hoy espero que os haya gustado mañana os traeré unos recursos y para compensar que estuve mucho tiempo en publicar traeré una plantilla para descargar, espero que os haya gustado un gran abrazo bye bye

6 comentarios:

  1. (´• ω •`)ノ Holaaaa!!!!

    Si estuviste ausente muchisimo tiempo tanto asi que pense que ya era un hiatus definitivo, lo que es yo hace poco sali de vagaciones asi que estoy retomando nuevamente mi blog XD gracias por recordar que existe saludos!

    ResponderEliminar
  2. Hola, esta super el tutorial busca un menu asi gracias!!

    ResponderEliminar
  3. Hola. Yep, si estuviste ausente, jé.
    Me encantó el menú está hermoso. Gracias por compatirlo.
    Saludos.

    ResponderEliminar
  4. Esta lindo este tutorial y que bueno es verte aqui°!!!!
    saludos

    ResponderEliminar

Holaa!! muy buenos días-tardes-noches espero que te haya gustado la entrada & si me dejas una huellita estaría muy agradecida.
Si tienes alguna duda no te olvides de mandarme un mail a mi correo o bien hacerlo por medio de la sección de dudas
candelaaisiska@gmai.com