Modelos de marcadores em forma de menu horizontal

Continuando o post anterior, outros estilos para os marcadores em forma de menu horizontal pra quem tem blog com poucos marcadores, ou quer destacar os marcadores mais importantes do blog.

Já sabe ?  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

/*Label------------------------------------------------------------------------------------------------*/
#Label1 {margin: 20px 5px;}
#Label1 h2 {display:none;}
#Label1 li {margin: 0 0 0 0px;display: inline;}

#Label1 li a:link {
font-size: 16px;
text-shadow: 1px 1px 1px #000;
background: #FDE8B5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw4TN-I4VU1KpNCymyW8MTuOvQvghnxe_TloHxECqXPKU0Jx1H0SE9xZ1JV4sXAjaCfBHvBJR85m0kZruT2CD8X6CPNn54eU14babyS6bWOsLuhp1tzmor4BFUCCPHlq0bx45-ig4FktI/s1600/tag%25281%2529.png) no-repeat 5px;
display: inline block; border: 2px outset  #FDE8B5;padding:8px 3px 8px 21px;color: #F6C252;line-height:1.15em;
}
#Label1 li a:hover, #Label1 li a:active {
text-shadow: 1px 1px 1px #fff;
background: #CAE4EC  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCEyTPIBgwWN9qQoV06lh-eRPNJuxjn9ZFhBgwHfZ7SToYsZIYiXBeJxLCrjxocZluboYx7ugnkNCYPZm07WSc4H0Y-D7zAon4lHXaFL9-HvDK15sEPqOyhmpz1B5LFtHfSjLEOKwZtQ8/s1600/tag_add.png) no-repeat 5px; display: inline block; line-height:1.15em;border: 2px intset  #CAE4EC;
padding:8px 3px 8px 21px; color: #344CDA;
}
 #Label1 li a:visited {
 background: #FAD4D4  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdHVjnFT3IoepjWbM7e4k9BJQMPgDJ0mAdWq0JZE7K9-m1rjFfaCvlqusheKXE1Do3sHS2T5mTeas__3I5fg6lpYOWNzqRT0ZM9Vuc4xfhx__upfd32U9p0BfwodCdl9uHy7ic3uS3EjU/s1600/tag_remove.png) no-repeat 5px; display: inline block; line-height:1.15em;border: 2px outset  #FAD4D4;
padding:8px 3px 8px 21px; color: #cc0000;
}

Modelo 2

/*Label------------------------------------------------------------------------------------------------*/
#Label1 {margin: 20px 5px;}
#Label1 h2 {display:none;}
#Label1 li {margin: 0 0 0 0px;display: inline;}

#Label1 li a:link {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 12px/18px sans-serif;
padding:2px 8px; margin-right:1px;
}
#Label1 li a:hover, #Label1 li a:active {
text-shadow: 1px 1px 1px #000;
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #000 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #B8B6B6) );
background: -moz-linear-gradient( center top, white 20%, #B8B6B6 100% );
font: 12px/18px sans-serif;
padding:2px 8px; margin-right:1px;
}
 #Label1 li a:visited {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #cc0000 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #cc0000) );
background: -moz-linear-gradient( center top, white 20%, #cc0000 100% );
font: 12px/18px sans-serif;
padding:2px 8px; margin-right:1px;
}

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