Linkbar editável – simples e fácil

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!