Widget de menu horizontal no novo Blogger

 

DEMO 

O primeiro lugar em que vi essa dica foi mo Templates Novo Blogger da Ariane. A nossa festejadablogueira sempre nos brindava com hacks maravilhosos e sempre deixava a blogosfera em polvorosa com dicas exclusivas. Hey Ariane, volte filha, todos nos agradeceremos, venha nos ajudar a desvendar estes novos códigos do Blogger. ;-)

O que fiz foi refazer o código vinculando aos códigos do menu de páginas.  Mas atenção, este hack é para quem usa o template Simple ou algum dos novos templates do Blogger.





Vá até o "Modelo de seu blog", clique em "Editar HTML"

  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Agora procure por: ]]></b:skin>  

Acima dele, cole o código abaixo:

/*Menu horizontal-------------------------------------------------------------------------------*/

#links ul {
display: inline;
float: left;
width:100%;
clear:both;
 background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
  _background-image: none;
  border-bottom: $(tabs.border.width) solid $(tabs.border.color);
}

#links li {
float:left;
  display: inline-block;
  padding: .6em 1em;
  font: $(tabs.font);
  color: $(tabs.text.color);
  border-$startSide: $(tabs.border.width) solid $(content.background.color);
  border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}


#links selected a, #links  a:hover {
  color: $(tabs.selected.text.color);
  padding: .6em 1em;
  background-color: $(tabs.selected.background.color);
  text-decoration: none;
}

 Procure agora por:

  <div class='header-cap-top cap-top'>

Abaixo dele cole o próximo código

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='links' id='links' showaddelement='yes'>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'/>
</b:section>
</div>

Salve.



Agora para usar o menu, vá até o layout de seu blog