Como colocar um Linkbar no Cabeçalho do Blogger

A existência de uma Linkbar (barra de links) no seu blog é muito importante, pois além de facilitar a navegação interna de seus leitores, indo até aos conteúdos que você classificou como sendo relevantes, permite também a indicação de outros blogs de sua preferência. Alguns blogs infelizmente não têm essa opção, mas com essa dica que irei passar para vocês, esse problema não existirá mais.

Neste post irei mostrar como adicionar uma Linkbar horizontal logo abaixo o cabeçalho do Blogger.

1 - É sempre bom lembrar que antes de qualquer alteração no seu blog, faça um backup do template atual.

2 - Agora vá em Lay out -> Editar Html.

Com a ajuda do Ctrl+F </b:skin> adicione o código CSS seguinte acima dela:

/* ----- LINKBAR ----- */
#linkbar {
margin: 6px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 100%;
position: relative;
background: #000;
border: 1px solid #000;
border-bottom: 0;
}

#linkbar ul {
margin: 0px 0px 0px 0px;
padding: 5px 5px 7px 5px;
text-align: left;
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: 3px 20px 3px 20px;
width:100%;
text-decoration:none;
font-family: arial, sans-serif;
font-weight: bold;
font-size: 12px;
color: #fff;
border-right: 1px solid #fff;
}

#linkbar a:hover {
color: #000;
background: #fff;
}

Novamente com a ajuda do Ctrl+F encontre o seguinte código:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Testing templates (Header)' type='Header'/>
</b:section>
</div>

E adicione o seguinte código após o código acima:

<div id='linkbar-wrapper'>
<b:section class='linkbar' id='linkbar' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Linkbar' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>

</div>
</b:includable>
</b:widget>
</b:section>
</div>

Visualize e se tudo estiver certo salve as alterações.
Fonte: http://bloggernaweb.blogspot.com/