Marcadores em forma de menu horizontal

Pra quem tem blog com poucos marcadores, ou quer destacar os marcadores mais importantes do blog, essa é uma dica bem legal. Colocar seus marcadores em forma de menu horizontal. Aí estão os códigos, para dois modelo diferentes. A primeira coisa a fazer é deletar o widget de marcadores de seu blog. Vamos, delete-o.

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

  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

Procure por:

<div id='content-wrapper'>

Se não encontrar, procure por:

<div class='tabs-outer'>


Abaixo do código cole este trecho:

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

Salve !

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


E acima dele cole o código do modelo escolhido.

Modelo 1

/*Menu marcadores------------------------------------------------------------*/
.marcadores-menu  {
     height: 38px;
    background: #ccc;
    border:1px solid #808080;
    margin: 0 auto;
    padding:0px;
    text-shadow: 0 1px 0 #fff;
    text-transform: none;
    width: 100%;
-moz-border-radius:6px;
-webkit-border-radius:6px;
box-shadow: 5px 5px 5px #808080;
}

.marcadores-menu h2 {
    display: none;
}

.marcadores-menu  a {
    color: #000;
}
.marcadores-menu  li {
    border-right: 1px solid #666;
    color: #000;
    float: left;
    font: bold 11px Arial;
    margin: 0 2px 0px 0;
    padding: 10px 4px;  
}
.marcadores-menu  li  a:hover{
color: #fff;  text-shadow: 0 1px 0 #000;
}

.marcadores-menu  ul {
    float: left;
    list-style: none outside none;
    margin-bottom: 0;
    margin-left: 10px;
    padding: 0;
}

Modelo 2

/*Menu marcadores------------------------------------------------------------*/
.marcadores-menu {  height: 30px; background: transparent;  margin: 10px 8px;}
.marcadores-menu h2 { display: none; }
.marcadores-menu    li a{  font: $(tabs.font);color: #fff;}
.marcadores-menu ul { display: inline-block;  margin-top: $(tabs.margin.top);
  margin-left: -$(tabs.margin.side);
  margin-right: -$(tabs.margin.side);}
.marcadores-menu  li {
background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw7YotpIWRG_W-zGzMVQC8OZkzGXIJY159K4eoSTNhRuesgYJxUC3yDkvEXZIZdAfFbuM5GQfLeD4gGx5BAw_IhigF2r-xPLMpa5ekHCptIsZOsjvJUqEl9O523AcrzYC2d5CSy57l5kY/s1600/tag.png) no-repeat 3px; margin: 2px 2px;
   display: inline-block;
   padding: 8px 20px;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  box-shadow: 5px 5px 5px #808080;
}
.marcadores-menu  li.selected a,  .marcadores-menu  li a:hover { color: #000; }
.marcadores-menu  li  a:visited{ color: #cc0000;margin: 2px 2px; display: inline;}

Depois abra o widget e desmarque os números e escolha os marcadores