Menu para Marcadores

Olá, Curiosos

Que saudade que eu fiquei de vocês, ainda bem que as aulas acabaram para eu ficar bem mais tempo com vocês !! Vocês também ficaram com saudade de mim ? Quem cala consente ashau. E vocês ? Já passaram de ano ? Ficaram de recuperação ? Ficaram na prova final ? Tomara que todos já tenham passado de ano para aproveitar as férias para verem todas as novas postagens que iremos postar aqui no nosso blog tão querido por todos.

Então, vamos mudar de assunto, certo ? Ah. vou aproveitar isso e irei voltar ao assunto do post. Esse é um tutorial que eu peguei do CB, eu achei o tutorial bem interessante e decidi postar aqui no Mundo Kawaii. Esse tutorial ensina como fazer um menu bem fofo para organizar os seus marcadores e tags. E assim o seu blog fica bem mais organizado, certo ? Acho que algumas pessoas irão achar esse tutorial bem interessante. Espero que o tutorial agrade a vocês.

Abra o modelo HTML do seu blog, e aí aperte as teclas CTRL + F e cole ]]></b:skin> na caixinha de pesquisa. Acima do trecho que você procurou, cole o seguinte 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***/

Você pode editar como quiser e salve o modelo do seu blog. Agora vá na guia do layout do blogger e adicione um gadget de HTML/Javascript onde quiser que o menu fique. Dentro do gadget coloque esse código :

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

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

Se quiser o menu em três colunas, 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 tudo fica perfeito.
Como extra, aqui tem algumas imagens para serem usadas nesse menu.