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

De esta manera podemos personalizar nuestro menú de páginas ¡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 #9B9A9A;     float: left;     list-style: none outside none;     padding-left: 5px;     padding-right: 5px;     width: auto; } #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 ul li a:hover { position: relative; left: 1px; top: 1px; }

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.