Menu para marcadores

Oi Balas U.U Como vai vocês seus cats ? Saudades de vocês então hoje eu trouxe um tutorial bem legalzinho que precisamos muitas vezes , eu acho muito lindo nos blogs e fica bem mais fácil pra procurar etal mudando de assunto como foi a semana de vocês gostaram? Pois é a minha foi bem legal e também minha escola resolveu fazer uma feira de ciências pensa na confusão que da. Passei em todas as provas desse bimestre estou bem feliz por isto e espero continuar passando , Pois é Domingo é dia das mães eu estou bem enpolgada para os dias da mãe acho bem legal. Vai ter pessoas que nem vão passar com suas mães para ir no show do "One Direction" Sei lá se fala assim , pois é eu também queria ir mais apesar de não ser na minha cidade nem um pouquinho perto nem tem como eu ir e também mais por ser no dia das mães não iria deixar minha mamis poderosa aqui sozinha sem mim. Carah sorte de quem vai ir depois do show deles a nossa postadora Máh vai falar como foi o show , aquela sortuda vai ir no show e está doidinha "hahaha" Ta gente eu sei eu falo muito como sempre vamos a nossa postagem de hoje é mais legalzinho.
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>

2) 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.

Aproveitem.

Obrigada ao blog :: CB