5 de jan de 2013

Marcadores do Blogger em forma de menu horizontal






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>

2 comentários:

  1. OI Elke, seu trabalho é demais !
    Passando pra te deixar um grande abraço.
    obrigada pela visita!!!
    Tem brincadeira premiada lá no blog, participa!

    Tenha uma linda semana !
    Beijocas.
    Lilian – Blog:♥Duas Moças Prendadas!
    casascoisaseoutros.blogspot.com.br/

    ResponderExcluir
  2. Fiz funcionou mas não ficou bonitinho igual ao seu.O que eu faço para resolver isso?

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube