💻Tutoblog para ti #19: Insertar menú horizontal despegable y enlace en comentarios.

domingo, 14 de agosto de 2016

¡Holaa lectores! En el tutorial de hoy les enseñaré a instalar un menú despeglable vertical y cómo el domingo pasado no subí tutorial, como 'regalo' les enseñaré a insertar enlaces en los comentarios.
Espero que les guste el tutorial y les resulte de utilidad ❤️‍

 Paso 1:
Primero deben dirigirse a DiseñoAgregar gadget HTML/JavaScript. 
Allí pegan el siguiente código:

<div id='NavMenu'>
<div id='NavMenuleft'>
<ul id='nav'>
<li><a href='URL'>Pestaña1</a></li>
<li>
<li><a href='URL'>Pestaña2</a></li>
<li>
<a href='#'>Pestaña3</a>
<ul>
<li><a href='URL'>Subcategoría 1</a></li>
<li><a href='URL'>Subcategoría 2</a></li>
<li><a href='URL'>Subcategoría 3</a></li>
<li><a href='URL'>Subcategoría 4</a></li>
</ul>
</li>
<li>
<a href='#'>Pestaña4</a>
<ul>
<li><a href='URL'>Subcategoría 1</a></li>
<li><a href='URL'>Subcategoría 2</a></li>
<li><a href='URL'>Subcategoría 3</a></li>
<li><a href='URL'>Subcategoría 4</a></li>
<li><a href='URL'>Subcategoría 5</a></li>
</ul>
</li>
<li><a href='URL'>Pestaña 5</a></li>
</li>
<li><a href='URL'>Pestaña 6</a></li>
</ul>
</div>
</div>

DATO: deben posicionar el gadget debajo de la cabecera.

 Paso 2:
Sólo deben reemplazar la zona azul por la url a las que nos dirigirá al pinchar esa pestaña, y la zona que está en rosa lo cambiamos por el nombre que queremos que tenga la pestaña del menú. Una vez editado el código, hacen clic en Guardar.

 Paso 3:
Ahora queda darle forma al menú, para ello deben dirigirse a PlantillaPersonalizarAvanzadoAñadir CSS.
Allí deben pegar el siguiente código, al que ustedes modifican los colores y tamaños:

/* Menu desplegable
----------------------------------------------- */
.tabs-inner .section:first-child ul { margin-top: 0px;}
.tabs-inner .widget ul { background: #ffffff; text-align: center !important;}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: b7d6ce; /*Color del texto de las pestañas al pasar el ratón por encima*/
background-color: #b7d6ce; /*Color del fondo de las pestañas al pasar el ratón por encima*/
text-decoration: none;
}
.tabs .widget li, .tabs .widget li{ display: inline; float: none;}

#NavMenu {
position: relative;
margin: 0 auto;
padding: 0;
border-top: 0px solid #b7d6ce; /*Borde superior del menú, si no queremos borramos la línea*/
border-bottom: 0px solid #b7d6ce; /*Borde inferior del menú, si no queremos borramos la línea*/
background: #b7d6ce; /*Color de fondo del menú, si no queremos borramos la línea*/
}
#NavMenuleft {
width: 980px; /*Ancho del menú*/
float: none;
margin: 0 auto;
padding: 0;
}
#nav {margin: 0 auto; padding: 0; background:transparent;}

#nav ul {
float: none;
list-style: none;
margin: 0;
padding: 0;
overflow: visible;
}
.tabs-inner .widget li a {
display: inline-block;
padding: .6em 1em;
font: normal normal 18px 'Georgia', Trebuchet, Verdana, sans-serif; /* Tipo de letra */
color: #000000; /* Color de la letra */
border-left: 0px solid #b7d6ce; /* Borde izquierdo de la celda */
border-right: 0px solid #b7d6ce; /* Borde derecho de la celda */
}
#nav li a:hover, #nav li a:active {
color: #000000; /*Color del texto de las pestañas al pasar el ratón por encima*/
margin: 0;
padding: 10px 15px 10px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
font: normal normal 14px Cambria; /*Tamaño y tipografías de las subpestañas*/
background: #b7d6ce; /*Color del fondo de las subpestañas*/
width: 150px; /*Tamaño de éstas*/
color: #000000; /*Color del texto de las subpestañas*/
float: none;
margin: 0;
padding: 7px 10px;
}
#nav li li a:hover, #nav li li a:active {
background: #cccccc; /*Color del fondo de las subpestañas al pasar el ratón por encima*/
color: #000000; /*Color del texto de las subpestañas al pasar el ratón por encima*/
padding: 7px 10px;
}
#nav li {
float: none;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
#nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; }
#nav li ul a { width: 140px; }
#nav li ul ul { margin: -32px 0 0 171px; }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li:hover, #nav li.sfhover {position: static;}
.tabs-outer{overflow: visible;}
.tabs-inner { padding: 0px; } .section { margin: 0px; }


Les queda hacer clic en Aplicar al blog, y listo!

Ahora el otro tutorial...

Cuando dejamos un comentario, en lo personal, me parece un poco tedioso dejar el link de esta manera http://olorcitoalibro.blogspot.com.ar/ ya que a la persona a la que se lo dejan debe copiar y pegar el enlace para poder dirigirse a sus blogs...
Por suerte he encontrado una solución super sencilla y práctica para redireccionar a sus blogs aquellos a quienes comentan:

<a href="http://olorcitoalibro.blogspot.com/" > Olorcito a libro </a> 

Lo único que deben hacer es, reemplazar lo que está en rosa con la dirección de su blog y lo que está en azul con la palabra o frase que quieren que aparezca.

Por ejemplo, yo comento y al hacer clic sobre 'Olorcito a libro' me dirigiré a dicho blog:


------------------------------------------
Hola, me ha encantado la reseña!
------------------------------------------

Hasta aquí llegó el tutorial de hoy, espero que haya resultado de su utilidad.
Como ya me estoy quedando un poco corta con las ideas en relación con los tutoriales, les pido su ayuda. Comenten los tutoriales que les gustaría que publique, sus dudas respecto a los códigos de blogger o cualquier inquietud.
Si no quieren perderse nada, recuerden suscribirse y seguirme en mis redes sociales.

¡Un abrazo literario!

32 comentarios:

  1. Hola! Me encantó tu blog, creo que nunca me había pasado ahhaa pero me quedo por aquí. Yo tengo tiempo queriendo cambiar mi plantilla pero nunca encuentro una que me convenza. Gracias por el tuto :)

    ResponderEliminar
    Respuestas
    1. ¡Hola!
      Muchas gracias jaja
      Espero que encuentre una plantilla que te guste totalmente; gracias por pasarte y comentar ^-^
      Saludos!

      Eliminar
  2. ¡Hola!

    Muchas gracias por el tutorial ^^ Es justo tal y como yo tengo el menú desplegable y creo que es el código más sencillo que he encontrado hasta ahora, así que muy recomendable tu tutorial :)

    ¡Besos!

    ResponderEliminar
    Respuestas
    1. ¡Hola!
      Gracias a ti por pasarte y dejar un comentario :3
      Besitos guapa *-*

      Eliminar
  3. Hola Anto!!!!!! :D Sabes que me encanta esta sección tuya? XD es que es divertido ver tantos códigos y no marearte, lo sé, es extraño, es que yo al principio me volvía loca de no entender nada y puff de pronto no sé me entró curiosidad y empecé a leer un poquito sobre css y html5 y al menos ahora puedo decir que sé algo. Yo seguiré esperando el tuto que te sugerí (?) que es que lo quiero y no lo encuentro XD así que si lo hicieras te daría un abrazo gigante de oso :D Un besote bonita^^

    ResponderEliminar
    Respuestas
    1. ¡Hola Kara!
      Me alegro mucho que te guste esta sección *-*
      Trataré de conseguir y subir el tutorial que me solicitaste :D
      Un abrazo enooorme ^-^

      Eliminar
  4. ¡Anto, me ha encantado el tutorial! Ya había buscado lo del menu en otros lados y no me había quedado nada claro, pero contigo lo he entendido a la primera :D Muchas gracias por compartir estos tutoriales con nosotros <3
    ¡Un abrazo!

    ResponderEliminar
    Respuestas
    1. ¡Hola Pau!
      Me alegra que te haya gustado el tutorial :)
      Gracias a ti por pasarte y estar siempre presente en el blog ^-^
      ¡Besos!

      Eliminar
  5. Hola linda! me encanto el tutorial, encuentro que el menú desplegable es tan hermoso, pero me da miedo equivocarme y pegar los códigos mal, y si bien blog es super básico, me costó un montón que quedara de esa manera, por lo tanto no sé si arriesgarme.
    En cuanto al otro truco, sin duda lo usaré, es super útil!! *-*
    Cariños desde Once Upon a Book y muchas gracias por los consejos :D

    ResponderEliminar
    Respuestas
    1. ¡Hola Cath!
      Me alegra que te haya encantado el tutorial ^-^
      Veo que el truco te ha salido genial jaja
      Un beso grande y gracias por comentar :D

      Eliminar
  6. ¡Hola Anto!

    Me has salvado una vez más. Hace mucho buscaba este tutorial para poner enlaces en los comentarios

    Muchas gracias guapa!

    ResponderEliminar
    Respuestas
    1. ¡Hola Alice, me alegra haberte salvado ajaja!
      Gracias por pasarte y comentar :)
      Saludos ^-^

      Eliminar
  7. Hola :)
    Ais, Gracias por el tutorial, planeo cambiar el blog, así que quizá lo use!
    Un beso desde Andrómeda ☾

    ResponderEliminar
    Respuestas
    1. ¡Hola!
      Espero que el cambio en tu blog quede genial :D
      Un besito *-*

      Eliminar
  8. ¡DIVA MÁXIMA DE LOS TUTORIALES Y POR ELLO, MILES DE GRACIAS! ^-^

    ¡SE MUUY FELIIIIIIIIIIIIIIIIIIIIIZ 😊😊💕!

    ResponderEliminar
    Respuestas
    1. JAJAJA me alegra mucho resultarte de ayuda :3
      Un beso enooooorme ^^

      Eliminar
  9. Hola!
    Muchas gracias por el tuto, de verdad me han ayudado en muchas ocasiones. solo tengo una duda con algo que quiero hacer en mis entradas pero no se como hacerlo me podrás ayudar por fiiii????
    Saludos y un abrazo enorme

    ResponderEliminar
    Respuestas
    1. ¡Hola linda!
      Te ayudaré en lo que necesites, sólo debes enviarme un correo con tu consulta :D
      Un abrazo grande ^-^

      Eliminar
  10. Hola, bonita
    me gusto mucho la entrada, espero que sigas con ella porque son de gran ayuda para nosotros.
    Gracias por ayudarnos tanto
    besos

    ResponderEliminar
    Respuestas
    1. Holaa, me alegra mucho que te haya gustado el post :D
      Gracias a ustedes por estar siempre presentes en mi blog y hacer posible uno de mis sueños :')
      Besitos

      Eliminar
  11. Hola! :D

    Me gustan y ayudan muchísimo estas entradas, ya que yo básicamente soy un desastre con los códigos y con eso de cambiar algo en el HTML jajaja
    Lo del menú despleglable ya lo tenía hecho, menos mal xD Pero lo de dejar el link del blog en los comentarios no lo conocía y sí me gusta :P

    Gracias por la entrada :D

    Un besito!

    ResponderEliminar
    Respuestas
    1. ¡Hola!
      Me hace muy feliz que te guste y te ayuden estas entradas, eso me incentiva a seguir publicándolas :D
      Gracias por comentar ^-^
      Besos!

      Eliminar
  12. Como siempre cosas interesantes que nos pueden servir en la creación o actualización del blog.
    gracias
    cdc

    ResponderEliminar
    Respuestas
    1. Gracias a ti por pasarte y dejar tu huella comentando :D
      Saludos!

      Eliminar
  13. Hola Anto!

    Me encantó el tutorial, aunque el menú ese ya lo tengo, te quería hacer una pregunta, ¿sabes cómo se puede hacer para que se sitúe en la parte de arria de todo y según vayas bajando en el blog el menú baje también? Lo he visto en otros blogs pero no encuentro cómo hacerlo :(

    Saludos!

    ResponderEliminar
    Respuestas
    1. ¡Hola Hugo, me alegro que te haya gustado tanto el tutorial!
      Respecto a tu consulta, averiguaré y trataré de subir el tutorial éste domingo ^-^
      Saludos!

      Eliminar
  14. ¡Hola! Me encanta los tutoriales de este tipo porque sé que cuando arregle todo el blog e intente ponerlo bien voy a usar prácticamente todos jajaja :D Un besito <3

    ResponderEliminar
    Respuestas
    1. ¡Holaa, me alegra mucho que ya tengas en cuenta mis tutoriales jaja!
      Un besote ^-^

      Eliminar
  15. Andrea de __infinitebooks__
    Haber si me funciona jeje el de los menus desplegables me ha encantado me ha funcionado muy bien. He estado buscando como ponerlo por miles de sitios y ninguno funcionaba y gracias a ti lo he podido poner... Muchísimas gracias

    ResponderEliminar
    Respuestas
    1. ¡Hola Andrea, te ha funcionado a la perfección!
      Me alegra mucho que te haya quedado bien el menú :)
      Saludos y gracias por comentar ^-^

      Eliminar
  16. Hola, me encanta este tutoría pero desgraciadamente y por más que lo he intentado no me llega a funcionar, es decir, sale sin formato (las subcategorias dentro de las categorías etc...) no entiendo por qué...
    Espero que me puedas ayudar, soy una blogger desesperada XD.
    Un saludo

    ResponderEliminar
  17. Este comentario ha sido eliminado por el autor.

    ResponderEliminar

¡Hola lectores!
Si amas ♥ el olor a libro como yo, no puedes irte
sin antes dejar un comentario
¡Siempre los devuelvo!
Por favor evita hacer spoilers y que prevalezca el
respeto ante todo.
♥ Tu opinión es muy importante para mí♥

Santa Template by Mery's Notebook © 2014