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

SMUK THINGS

¡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's, Facebook y Twitter.

Marta