Fazer ou ter uma linkbar muitas vezes é sinônimo de desespero, muitos código e CSS, ainda mais pros iniciantes. Há um tipo de linkbar, que é mais ou menos assim:
“<li><a href=’’>Nome link</a></li>”
Para iniciantes o ‘manuseio’ dela é complicado, pois deve ir na aba editar HTML, e procurar pelo código, por isso há um outro tipo de linkbar, que pode ser alterada na aba ‘Layout’:
Para isso insira o seguinte código antes de ]]</b:skin>
/* ----- LINKBAR ------------------------------------------------------------- */
#linkbar-wrapper {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 978px;
position: relative;
background: $linkbarbgColor;
border: 1px solid $linkbarmainBorderColor;
}
#linkbar .widget {
margin: 0px 0px 0px 0px;
padding: 4px 0px 7px 0px;
text-align: left;
}
#linkbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type:none;
}
#linkbar li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#linkbar h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: none;
visibility: hidden;
}
#linkbar a {
clear: both;
margin: 0px -4px 0px 0px;
padding: 7px 10px 7px 10px;
width:100%;
text-decoration:none;
font: $linkbarTextFont;
color: $linkbarTextColor;
text-transform: uppercase;
border-right: 1px solid $linkbarBorderColor;
border-left: 0px solid $linkbarBorderColor;
}
#linkbar a:hover {
color: $linkbarHoverTextColor;
background: $linkbarHoverBgColor;
}
A seguir procure por /* Variable definitions que fica bem no ínicio do código, e ABAIXO dele cole
<Variable name="linkbarbgColor" description="Linkbar Background Color"
type="color" default="#C94093" value="#333333">
<Variable name="linkbarmainBorderColor" description="Linkbar Main Border Color"
type="color" default="#C94093" value="#b3b3b3">
<Variable name="linkbarBorderColor" description="Linkbar Border Color"
type="color" default="#9D1961" value="#333333">
<Variable name="linkbarTextColor" description="Linkbar Texto Cor"
type="color" default="#ffffff" value="#b3b3b3">
<Variable name="linkbarHoverBgColor" description="Linkbar Hover Background Color"
type="color" default="#ffffff" value="#333333">
<Variable name="linkbarHoverTextColor" description="Linkbar Hover Text Color"
type="color" default="#9D1961" value="#ffffff">
Isto irá criar variáveis, para você mudar as cores no painel ‘fontes e cores’.
Procure por (Ctrl + F)
(Cabeçalho)
Agora decida se você quer colocar a linkbar acima ou abaixo do cabeçalho (header) do blog, se decidir acima, coloque o código antes, e abaixo depois de:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blogando Bem (Cabeçalho)' type='Header'/>
</b:section>
</div>
Código:
<div id='linkbar-wrapper'>
<b:section class='linkbar' id='linkbar' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Linkbar' type='LinkList'/>
</b:section>
</div>
<div style='clear: both;'/>
Até o próximo tutorial!