Cómo personalizar el menú de páginas de tu blog - Colaboración de SMUK THINGS


En el tutorial de hoy descubriremos cómo personalizar el menú de páginas de nuestros blogs gracias a Noelia de SMUK THINGS. Es la primera colaboración que acoge 2nd Funniest Thing y estoy encantada de poder presentárosla con un "DIY 4 your blog" así de practiquísimo.

Antes de dejaros con ella, me gustaría que supiérais que Noelia no és solo una máquina del HTML, también es una retratista emocionante con obras con tantísima personalidad como estas. En su blog comparte recursos para diseñadores, recomendaciones de ilustradores alucinantes, tutoriales de blogger y photoshop... ¡Con lo bien que nos viene esto!

Vía http://blog.smukthings.com/






Y no me enrollo más, aquí van los DIY's que SMUK THINGS ha preparado para que sigamos poniendo guapos a nuestros hijitos blogs.




DIY #1: AÑADIR BARRAS ESPACIADORAS EN EL MENÚ DE PÁGINAS 

De esta manera podemos personalizar nuestro menú de páginas y que se vea más organizado ¡Vamos allá!







PASOS

01. Ve a PLANTILLA » PERSONALIZAR » AVANZADO » AÑADIR CSS


02. Copia y pega el siguiente código:

#PageList1 li { border-right: 1px solid #000; padding: 0px 10px; }
#PageList1 li:last-child { border-right:none; }

03. Pero si además quieres darle efecto al pasar el ratón por encima añade:
#PageList1 li a:hover { position: relative; top: 2px; left: 2px; }

04. Si quieres que el menú de páginas quede centrado copia también el siguiente código y deja lo que está escrito en rojo tal y como está o cámbialo por right si quieres que quede alineado a la derecha o left si quieres que quede alineado a la izquierda.
.PageList {
text-align: center !important;
}
.PageList li {
display:inline !important; 
float:none !important;
}

05. Clicamos en APLICAR AL BLOG ¡Y listo!




DIY #2: LINKS DEL MENÚ DE PÁGINAS QUE SE ABREN EN UNA VENTANA NUEVA (ESTUPENDO VAMOS)

¿Por qué? y ¿Para qué?  Pues porque en el menú de páginas cuando queremos añadir un link que nos lleve a otra web, como por ejemplo a la SHOP la opción es: ir a PÁGINAS » PÁGINA NUEVA » DIRECCIÓN WEB, hasta ahí todo bien, pero nuestro amigo Blogger no nos deja la opción de que ese link se abra en una ventana nueva (muy mal) y se pierden visitas, porque la gente se va de tu blog y ya no vuelve. Así que la solución es ésta:

PASOS


01. Ve a PLANTILLA » EDITAR HTML



02. Pulsa CTRL+F y escribe PageList1. Ve desplegando para ver el código completo que se verá más o menos así:

<b:widget id='PageList1' locked='false' title='Páginas' type='PageList'>
                      <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <b:if cond='data:mobile'>
      <select expr:id='data:widget.instanceId + &quot;_select&quot;'>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <option expr:value='data:link.href' selected='selected'><data:link.title/></option>
          <b:else/>
            <option expr:value='data:link.href'><data:link.title/></option>
          </b:if>
        </b:loop>
      </select>
      <span class='pagelist-arrow'>&amp;#9660;</span>

    <b:else/>
      <ul>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
          <b:else/>
            <li><a expr:href='data:link.href'><data:link.title/></a></li>
          </b:if>
        </b:loop>  *| Pulsa intro aquí y sigue el siguiente paso 
      </ul>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
                    </b:widget>

03. Tras hacer intro después de </b:loop> copia y pega el siguiente código para añadir la página que quieres que se abra en una ventana nueva:
<li><a href='URL de la dirección web' target="_blank">Pon aquí el nombre de la página</a></li>

04. Y por último clicamos en GUARDAR PLANTILLA para guardar los cambios.


Aquí os dejo un ejemplo para que veáis como quedaría:



P.D. La página aparecerá justo la última en el menú. Si queréis cambiar el orden lo mejor es ocultar las páginas desde el GADGET DE PÁGINAS que hay en DISEÑO, dejando únicamente la página principal e ir añadiendo las páginas manualmente como en el paso anterior.

Noelia

¡Gracias Noelia! Venga, ahora a toquetear tod@s el blog para mejorarlo un poco más. Con un poco de atención y unos cuantos "copiar-pegar" se puede hacer de todo ;)

Besos!! Estaré al otro lado de mi galería de DIY'sFacebook y Twitter.
Marta


SUSCRÍBETE

28 comentarios :

  1. Muy interesante !!! tomaré nota ! gracias por la info.


    Besos

    http://www.thetrendysurfer.com/

    ResponderEliminar
  2. Genial la entrada, super fácil y efectiva!!! :)

    Pequeña Lolailo

    ResponderEliminar
  3. Me paso ya a verlo!!

    así me gusta compartiendo conocimiento y buenos blogs!
    un besiñoo

    ResponderEliminar
  4. Ostres! Una altra cosa més a la to do list! Molt bo el tutorial! Mil gràcies!!!
    Ptets maca!

    ResponderEliminar
  5. He conocido tu blog y me ha parecido muy interesante y ameno por ello te he elegido para los PREMIOS LIEBSTER, Un saludo
    http://eldesvandemiranda.blogspot.com.es/

    ResponderEliminar
  6. Madre mía qué post más currado, voy a ponerme las barritas a ver si lo consigo!!
    Un beso graaande :)

    WE❤DIY:
    → DIYEARTE - DIY

    ResponderEliminar
  7. Qué torpe soy... algo debo hacer mal porque no me sale -.-

    ResponderEliminar
  8. Ya está! Qué ilusión y qué pesada soy!

    ResponderEliminar
    Respuestas
    1. Qué bien!! Me alegro un montón, os queda de coña en el blog :)

      Eliminar
  9. Mi tesoro!!! Jajaja, empiezo un nuevo proyecto y quiero una imagen realmente estupenda, muchas gracias por compartir y que much@s de nosotr@s podamos mostrar una imagen más profesional.
    Por cierto, ¿ya te he dado las gracias?
    Un abrazo Adelaida garcia.

    ResponderEliminar
  10. Muchas gracias!!!
    Lo he hecho. Aunque me costó un poco. Soy un poco torpe y no tenía puestas ni etiquetas. Las hice, pero luego tarde en encontrar lo de añadir un gadget de las etiquetas....
    Bueno, el caso es que esta hecho. Y me encanta.
    MUCHAS GRACIAS.
    Besinos

    ResponderEliminar
  11. Un gustazo que salga todo a la primera!! fantástico!!

    ResponderEliminar
  12. Hola!!!! Acabo de descubrir tu blog y estoy encantada, he hecho ya varios cambios en toda la mañana con tus tutoriales que estaba buscanso hace tiempo y que fueran relativamente fáciles!
    Ahora acabo de intentar añadir este codigo pero le doy a aplicar al blog y no se cambia nada... lo he intentado varias veces pero no puedo, puede ser algo de la plantilla? lo podria hacer desde alli? si me puedes ayudar genial!!! mientras seguiré investigando... MUCHAS GRACIAS!

    P/D: Voy a seguir cambiando cosas... jajajajjaja

    ResponderEliminar
    Respuestas
    1. Hola!!! Soy la "autora" del post jejeje, envíame un mail a hola@smukthings.com y miramos a ver como lo arreglamos para que te funcione! ¡Un besote!

      Eliminar
  13. OMG OMG OMG!!! Justo lo que quería!!!!!

    Voy a aplicarlo también!!!!!! =D

    Besossssss

    ResponderEliminar
    Respuestas
    1. Ups....no me sale..... :( Pongo todo lo que decís y no sé porque no me sale..... :(

      Eliminar
    2. Hola Cristina! Qué es lo que te pasa exactamente?

      Eliminar
  14. Hola, no se si me podeis ayudar, quería saber si el menú se puede desplazar a la derecha, dejando el logo a la izquierda en la misma linea. Me explico? Muchisimas gracias por el post. :)

    ResponderEliminar
  15. Hola que tal gracias tenia tiempo buscando algo como esto GRACIAS

    ResponderEliminar
  16. ¡Holaa! Bueno encontré por ahí tu blog de casualidad y me he parado a leerlo y la verdad es que te lo estás trabajando muy bien. Soy nueva por aquí y espero poco a poco ir enterandome de todo, acabo de dejarlo con el amor de mi vida, y me han recomendado que escriba...y eso es lo que estoy pretendiendo trasmitir...mi día a día para superarlo. Aquí me tienes http://diariodeunadesenamorada.blogspot.com.es/ ¡GRACIAS!!!!

    ResponderEliminar
  17. tengo problemas para encontrar la coincidencia de los codigos, los mios no son iguales...me podeis echar una mano? Gracias!!

    ResponderEliminar
  18. Necesito tu ayuda, algo no funciona bien en mi plantilla.
    Por que tengo las paginas centradas, pero no puedo aumentar el tamaño de las letras, por mas que voy a menu y cambio... creo que es alguna parte del html .
    Porfavor escribeme a coral.o.g@hotmail.es

    ResponderEliminar
  19. Genial!!! Pero no me funciono, supongo que sera por el tiempo que tiene la entrada

    ResponderEliminar
  20. ME ENCANTOOOO!!!!
    No sabes cuanto batalle para hacer esto, hasta que te encontré, un par de minutos y mi menú quedo justo como lo quería. Incluso le cambie el color a las barras buscando el código de color en la web. También le puse el efecto al pasar el ratón que fue un mega plus.

    P.D. Ya me hice tu seguidora en Twitter!

    Mil gracias, no sabes cuanto me ayudo.
    El mejor y más fácil tutorial!

    ResponderEliminar
  21. hola!! pues la verdad es que es una pasada este tuto, pero lo aplico y se me queda igual el menu, alguien podría echarme una mano?

    ResponderEliminar
  22. hola!! pues la verdad es que es una pasada este tuto, pero lo aplico y se me queda igual el menu, alguien podría echarme una mano?

    ResponderEliminar
  23. Primero que nada, gracias por tomarte tu tiempo en enseñarnos y guiarnos. Te quería hacer una consulta sería posible que las páginas estáticas al abrirse tuvieran un efecto desvanecimiento. Desde ya gracias. Saludos desde Uruguay.

    ResponderEliminar