Tutorial - Menu 4/3 para tags

Olá minna-san.

Sejam bem-vindos sempre. E sempre (também) se divirtam com o assunto daqui.

Bom, fui feita um pedido pela ask para eu começar a postar mais tutoriais e aparentemente era um novato e ama o blog, então vamos nos esforçar postadores~

O menu dessa vez é de tags dividido em 4/3 (quatro links em três partes). É bem bonitinho e com efeito único. Eu vi que o tutorial era do Cherry Bomb, mas como a Bunny Crazy.

amos dar uma olhadinha? Leia mais.

Cherry Bomb

 

1. Procure por ]]></b:skin> e cole acima:

**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***/

2. Agora vá em Adcionar HTML/Javascript e cole:

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

Se quiser em 4/3 colunas cole então:

<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>

Imagens