Despois de moito tempo decidinme a introducir novas modificacións no meu blog e como é costume, cada cambio que fago cóntovolo. Agora decidín colocar unha barra de navegación cun menú para que sirva de guia a os usuarios do blog ou para dirixilos ós sitios que o autor do blog, neste caso eu, máis lle interese.
1.- Empezamos creando duas novas “variables” que utilizaremos máis adiante para dar cor ó texto dos menús e ó fondo, así dende a pestaña “Fontes e cores” poderemos modificar a súa cor. Colocanse debaixo das demáis “variables”:
<Variable name=”colormenu” description=”Menu Color”
type=”color” default=”#FFFFFF” value=”#ffffff”>
<Variable name=”colorbgmenu” description=”Menu bg Color”
type=”color” default=”#FFFFFF” value=”#B10245″>
2.- Diseñamos a barra adaptándoa á configuración do noso blog e ó lugar en que queremos situala (todo o ancho do blog (body) ou so na parte principal do blog (main); eu optarei por esta segunda opción). Estes parámetros podemos colocalos en calquera lugar do código HTLM entre <head> y < :/head>, así que eu poreino despois de “description”:
/*– (Menú) –*/
#nav {
clear:both;
margin:1px auto 1px auto;
width: 966px;
height:30px;
background: url(http://xosse.dorrio.googlepages.com/fnd_marc_prev2.GIF) repeat-x;
overflow:hidden;
}
#nav_l {
float:left;
width:966px;
margin:0px; padding:0px;
overflow:hidden;
height:30px;
}
.menu {
float:left;
margin:5px 1px;
padding:3px;
width: 400px;
}
.menu li {
display: inline;
list-style: none;
margin:0;
padding:0;
}
.menu ul, .menu ol {
display: inline;
list-style: none;
margin:0;
padding:0 10px 0 0;
}
.menu a, .menu a:visited {
color: $colormenu;
font-weight: bold;
margin:0;
padding: 3px 10px 3px 10px;
text-decoration: none;
}
.menu a:hover {
background: $colorbgmenu;
text-decoration: none;
font-weight: bold;
border:1px solid #fff;
}
#subscribe {
float: right;
width:192px;
height:32px;
margin:4px 4px 3px 4px;
}
.rss {
float:left;
margin:7px 5px 5px 0px;
width:500px;
}
.rss ul {
margin: 0; padding: 0 2px;
}
.rss li {
background: url(http://bp2.blogger.com/_Zuzii37VUO4/R2iVYyjZEeI/AAAAAAAACew/
TXSgAsWEBLA/s1600/rss.gif) no-repeat 0 3px;
margin: 0 2px 0 0;
padding: 3px 0 3px 20px;
list-style: none;
font-size: 12px;
color:$colormenu;
display: inline;
font-weight: bold;
}
.rss li a {
font-size: 12px;
color:~$colormenu;
}
En negrilla van algúns dos parámetros que podedes modificar o voso gusto (todos son modificables pero estes prsentan menos problemas)
3.- So nos queda introducir o seguinte código no blog e farémolo nalgún lugar entre <body> y </body>. Se queremos que ocupe todo o corpo poremolo ó inicio; para que ocupe so a parte principal farémolo en ‘main’. Como a miña barra irá debaixo do título, expando a “plantilla de artiluxios” e pego o código seguinte debaixo do widget ‘title’:
<!– menu –>
<div id=’nav’>
<div id=’nav_l’>
<div class=’menu’><ul>
<b><li class=’Inicio’><a alt=’Inicio‘ expr:href=’data:blog.homepageUrl’>Inicio</a></li>
<li class=’page_item page-item-2′><a href=‘dirección http://…‘ title=‘Nome da dirección‘>título da ligazón</a></li>
<li class=’page_item page-item-2′><a href=’dirección http://…‘ title=’título da dirección‘>Nome da ligazón</a></li>
<li class=’page_item page-item-2′><a href=’dirección http://…‘ title=’título da dirección‘>nome da ligazón</a></li></b>
</ul></div>
<!– menu –>
<div class=’rss’><ul>
<li><a expr:href=’data:blog.homepageUrl + “feeds/posts/default”‘>Post</a> (RSS)</li>
<li><a expr:href=’data:blog.homepageUrl + “feeds/comments/default”‘>Comentarios</a> (RSS)</li>
</ul>
</div>
</div><!– nav_l –>
</div>