Marcadores do Blogger em forma de menu horizontal

 DEMO

Depois de 5 anos blogando, de blogar quase diariamente, procurando e fazendo tutoriais, chega uma hora que vai ficando difícil saber o que já foi postado ou não. Outra coisa é que hoje em dia, diferente da época que comecei, o Blogger  te da a opção de costumizar o blog em quase tudo, mas há muitas outras dicas que ainda precisamos fazer manualmente e para quem tem poucos marcadores e gosta de diferenças em seu blog, esta,  de deixar os marcadores como menu horizontal, é uma boa dica. Fica fácil a visualização e facilita para os leitores. Se te atende, eis aí os códigos para a tutorial.


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>  

Substitua então pelo código abaixo:

/*Menu marcadores---------------------------------------------------------------------------------*/
.menu-marcadores h2 {
    display: none;
}
.menu-marcadores a {
border: none;
    color: #333333;
}
.menu-marcadores {
    background: #808080;
 
border:1px solid #DBC8AD;
-moz-border-radius:6px;
-webkit-border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
    margin: 0 auto;
    padding:  0px;
    text-shadow: 0 1px 0 #E1D4C1;
    text-transform: none;
    width: 960px;
}
.menu-marcadores li {
    border-right: 1px solid #666;
    color: #333333;
    float: left;
    font: bold 12px Arial;
    margin: 0 2px 5px 0;
    padding: 18px 14px;
    text-transform: uppercase;
}
.menu-marcadores ul {
    float: left;
    list-style: none outside none;
    margin-bottom: 0;
    margin-left: 10px;
    padding: 0;
    width: 920px;
}
 
]]></b:skin>

Agora procure por:

<div class='header-outer'>

E acima dele cole o código abaixo

<div class='menu-marcadores'> <b:section class='menu-marcadores' id='menu-marcadores' preferred='yes' showaddelement='no'>
<b:widget id='Label1' locked='true' title='Labels' type='Label'/>
</b:section></div>
<div class='clear'>&#160;</div>