Menu para marcadores do blog (menu label em lista)

Gomen nasai, Gomen nasai , sumimasen. Chesonghamnida... I am sorry, sorry. Excuses. Ausreden! E na nossa língua também, desculpe. Fiquei a semana sem postar porque tive problemas com minha internet, ela foi embora e não voltou. Deu um sinalzinho a dois dias e foi embora de novo, torço que agora fique de vez. Agradeço ao comentários e as visitas ao meu blog nesse tempo, prometo que vou responder e retribuir à todos. Minha voltade e dar um beijinho na testa de todos vocês. rs Bom vamos ao tutorial de hoje? Hoje vou mostrar a fazer um menuzinho pratico daquele que a tag entra automaticamente. Yeee!!!

Esse é o menuzinho que vamos fazer, ele esta como duas colunas vou ensinar como fazer de uma ou duas colunas. O tutorial é super fácil e rápido, porém alguns dos códigos são meio grandes o que faz parecer ser difícil, mas é apenas tamanho gente.

1. Primeiramente vá ate Layout na sua sidebar clique em "Adicionar um Gadget". Uma pequena janela vai se abrir e procure pelo gadget chamado "Marcadores" clique em adicionar e salve. Vizualise e veja se apareceu uma lista dos marcadores, se possuírem umas bolinhas cinzas a frente de cada marcador siga esse tutorial rápido que ensina como oculta-los. (Tutorial)

2. Vá em Modelo e clique em HTML usando o atalho Ctrl+F e procure pelo nome do marcador, se ele não tem nome de um para poder encontra-lo, não tem problema tirar o nome depois.

Ao localiza-lo você encontrará algo similar a isso. Observe qual é o numero do seu label e guarde separadamente pois vamos precisar do número:

<b:widget id='Label1' locked='false' title='Nome do seu marcador' type='Label'>...</b:widget>

Apague todo esse trechinho pode ser que abra ao clicar nele, não tem problema se isso acontecer apague do <b:widget id='Label1' até </b:widget>. No lugar desse código cole esse aqui:

Códigos

<b:widget id='Label1' locked='false' title='Categorias' type='Label'>
    <b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul class='categorias'>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
  </b:widget>

Agora pegue o número do seu Label e coloque atrás da palavra Label se era o número 1 deixe como está.

3. Agora vamos dividir a coluna em dois, se não quiser assim vá para a próxima etapa. Ainda dentro do HTML,  usando o atalho Ctrl+F e procure por:

]]></ b: skin>

Acima dele cole:

Códigos

#Label1 ul li{
float: left;
width: 45%;
}s

Salve e visualize e veja se dividiu.

Obs: Se você usa mais de um gadget de marcadores o Label1 pode mudar para Label2 ou para outro numero, então se você colocou e não se dividiu use Ctrl+F e procure pelo nome do marcador, na mesma linha que estiver o nome do marcador vai mostrar qual numero de label ele é

4. Agora procure por ]]></ b: skin> e acima dele cole:

Códigos

.categorias {
width: 200px; /*Largura*/
padding: 0px 10px 0px 10px; /*Espaço interno*/
margin: 0; /*Espaço Externo - Não mexa se necessario*/
font-size: 15px; /*Tamanho da fonte*/
font-family: 'Georgia', sans-serif; /*Tipo de fonte*/
text-align:center; /*Alinhamento do texto*/
color:#000; /*Cor da fonte*/
}
.categorias ul {
list-style: none;  /*Remover pontos dos macardores*/
margin: 0px 0px 0px 0px; /*Espaço Externo - Não mexa se necessario*/
padding: 0; /*Espaço interno*/
color:#000; /*Cor da fonte*/
text-align:center; /*Alinhamento do texto*/
}
.categorias li {
border-bottom: 1px solid #ececec;  /*Borda*/
margin: 0; *Espaço Externo - Não mexa se necessario*/
color:#000; /*Cor da fonte*/
text-align:center; /*Alinhamento do texto*/
}
.categorias li a {
display: block;
padding: 0px 5px 0px 5px;  /*Espaço interno*/
background-color: transparent; /*Cor de fundo das letras*/
color: #000;  /*Cor da fonte*/
text-decoration: none; /*Não mexa*/
margin-bottom:-4px;  /*Espaço Externo - Não mexa se necessario*/
margin-top:-4px; /*Espaço Externo - Não mexa se necessario*/
text-align:center;/*Espaço Externo - Não mexa se necessario*/
}
.categorias li a:hover {
background-color:none;  /*Cor de fundo hover*/
color: #000; /*Cor da fonte hover*/
text-align:center;  /*Alinhamento do texto hover*/
}
.categorias li a:visited {
color: #000; /*Cor da fonte ao passar o mouse*/
text-align:center; /*Alinhamento do texto*/
}
.categorias a{
background-position: left center; /*Alinhamento do texto*/
padding-left: 25px;padding-top: 2px; /*Espaço interno*/
padding-bottom: 2px; /*Espaço interno*/
border-bottom:0px solid #ececec; /*Borda*/
text-align:center;
}

O código é todo auto explicativo então é fácil de entender e arrumar. Salve e visualize e veja se deu certinho. Se as cores da sidebar não mudaram...está com a mesma cor dos links, significa que sua sidebar tem a cor dos links personalizados então você tem duas opções, localizar essa parte e remover ou trocar a cor do link nesse código da sidebar.

Modelinhos prontos

Dois modelinhos do menu para vocês. Esse código é a da etapa 4, acima do ]]></ b: skin> :

Modelo 1

Códigos

.categorias {
padding: 0px 10px 0px 10px; /*Espaço interno*/
margin: 0; /*Espaço Externo - Não mexa se necessario*/
font-size: 11px; /*Tamanho da fonte*/
font-family: 'Georgia', sans-serif; /*Tipo de fonte*/
text-align:center; /*Alinhamento do texto*/
color:#8B8682; /*Cor da fonte*/
text-transform: uppercase; /*Em negrito*/
}
.categorias ul {
list-style: none;  /*Remover pontos dos macardores*/
margin: 0px 0px 0px 0px; /*Espaço Externo - Não mexa se necessario*/
padding: 0; /*Espaço interno*/
color:#8B8682; /*Cor da fonte*/
text-align:center; /*Alinhamento do texto*/
}
.categorias li {
width: 200px; /*Largura*/
padding: 10px 0px 10px 0px;
background-color: #eee;
border-top: 2px solid #ccc;  /*Borda*/
border-bottom: 5px solid #fff;  /*Borda*/
margin: 0; *Espaço Externo - Não mexa se necessario*/
color:#8B8682; /*Cor da fonte*/
text-align:center; /*Alinhamento do texto*/
}
.categorias a{
background-position: left center; /*Alinhamento do texto*/
padding-left: 25px;padding-top: 2px; /*Espaço interno*/
padding-bottom: 2px; /*Espaço interno*/
border-bottom:0px solid #ececec; /*Borda*/
text-align:center;
}
.categorias li a {
display: block;
padding: 0px 5px 0px 5px;  /*Espaço interno*/
background-color: transparent; /*Cor de fundo das letras*/
color: #8B8682;  /*Cor da fonte*/
text-decoration: none; /*Não mexa*/
margin-bottom:-4px;  /*Espaço Externo - Não mexa se necessario*/
margin-top:-4px; /*Espaço Externo - Não mexa se necessario*/
text-align:center;/*Espaço Externo - Não mexa se necessario*/

Modelo 2

Códigos

.categorias {
padding: 0px 10px 0px 10px; /*Espaço interno*/
margin: 0; /*Espaço Externo - Não mexa se necessario*/
font-size: 11px; /*Tamanho da fonte*/
font-family: 'Georgia', sans-serif; /*Tipo de fonte*/
text-align:center; /*Alinhamento do texto*/
color:#8B8682; /*Cor da fonte*/
text-transform: uppercase; /*Em Negrito*/
}
.categorias ul {
list-style: none;  /*Remover pontos dos macardores*/
margin: 0px 0px 0px 0px; /*Espaço Externo - Não mexa se necessario*/
padding: 0; /*Espaço interno*/
color:#8B8682; /*Cor da fonte*/
text-align:center; /*Alinhamento do texto*/
}
.categorias li {
width: 200px; /*Largura*/
padding: 10px 0px 10px 0px; /*Altura interna*/
background-color: transparent; /*Cor do fundo*/
border-left: 2px solid #ccc;  /*Borda*/
border-right: 2px solid #ccc;  /*Borda*/
margin: 0; *Espaço Externo - Não mexa se necessario*/
color:#8B8682; /*Cor da fonte*/
text-align:center; /*Alinhamento do texto*/
-webkit-transition: background 0.9s linear;
-webkit-transition: all 0.9s ease-out;
-moz-transition: all 0.9s ease-out;
}
.categorias li:hover {
width: 200px; /*Largura*/
padding: 10px 0px 10px 0px;
background-color: #ccc;
border-left: 2px solid #ccc;  /*Borda*/
border-right: 2px solid #ccc;  /*Borda*/
margin: 0; *Espaço Externo - Não mexa se necessario*/
color:#fff; /*Cor da fonte*/
text-align:center; /*Alinhamento do texto*/
-webkit-transition: all 0.5s ease-in-out;
}
.categorias a{
background-position: left center; /*Alinhamento do texto*/
padding-left: 25px;padding-top: 2px; /*Espaço interno*/
padding-bottom: 2px; /*Espaço interno*/
border-bottom:0px solid #ececec; /*Borda*/
text-align:center;
}
.categorias li a {
display: block;
padding: 0px 5px 0px 5px;  /*Espaço interno*/
background-color: transparent; /*Cor de fundo das letras*/
color: #8B8682;  /*Cor da fonte*/
text-decoration: none; /*Não mexa*/
margin-bottom:-4px;  /*Espaço Externo - Não mexa se necessario*/
margin-top:-4px; /*Espaço Externo - Não mexa se necessario*/
text-align:center;/*Espaço Externo - Não mexa se necessario*/
}

Créditos: Dicas para blog