Menu para marcadores

Kit Kat *OO*

Olá! Tudo bem com vocês? Estou muito feliz que tenham gostado das mudanças no blog e que tenha tanta gente interessada em fazer parte da equipe do CB ^^. Aguardem o resultado na segunda feira.

Indo para o assunto do post, hoje vou ensinar como fazer um menu bem bonitinho para organizar seus marcadores/tags. Ele é bem parecido com o que eu usava no antigo layout:

Instalá-lo é muito simples. Abra o modelo HTML do seu blog, aperte as teclas ctrl+F e cole ]]></b:skin> na caixa de pesquisa.

Acima do trecho que você procurou, cole o seguinte código:

Código

/***Menu para marcadores***/
.tag {
font-family: verdana; /*Fonte do menu*/
font-size: 10px; /*Tamanho da fonte*/
height: 16px;
background: url('URL_DA_IMAGEM') no-repeat left; /*Imagem que fica ao lado do link (16x16 px)*/
display: block;
margin-bottom: 5px; /*Espaço inferior entre cada link*/
padding-left: 18px; /*Não mude*/
transition:All 0.5s ease; -webkit-transition:All 0.5s ease; -moz-transition:All 0.5s ease; -o-transition:All 0.5s ease;}

.tag a {color: #fe97cd !important; /*Cor dos links*/}

.tag a:hover { color: #bb588b !important; /*Cor dos links quando passa o mouse em cima*/
font-weight: bold; /*Deixa os links em negrito quando passa o mouse, apague se não quiser este efeito*/
transition:All 0.5s ease; -webkit-transition:All 0.5s ease; -moz-transition:All 0.5s ease; -o-transition:All 0.5s ease;}
/***Por cherry-liah.blogspot.com - não retire os créditos***/

Edite como quiser e salve o modelo do seu blog. Agora vá na guia layout do blogger e adicione um gadget de HTML/Javascript onde quiser que o menu fique. Dentro do gadget cole o seguinte código:

<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>

Repita este código para cada tag que quiser no seu menu.

Para dividir o menu em três colunas

Se quiser o menu em três colunas como mostra a preview, ao invés de usar o código acima no gadget de HTML/Javascript, use esse:

Código

<div style="float: left; width: 30%">
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
</div>

<div style="float: left; width: 30%">
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
</div>

<div style="float: left; width: 30%">
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
</div>
<div style="clear: both"></div>

Cada bloco de código corresponde a uma coluna.  É só editar com atenção que fica tudo certinho.
Como extra, aqui tem algumas imagens para serem usadas neste menu. Aproveitem!




Espero que tenham gostado! Se usarem, não esqueçam de creditar. Este tutorial foi uma sugestão de um leitor, peça seu tutorial também pelo meu ask.

Gostou deste tutorial e quer reblogar? Leia as regras primeiro!