ūüíĽ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