tutorial - menu One Border

Oie :3

Trouxe um tutorial de um menu bem fofinho, que aprendi no Magic Touch o resultado é esse:

                                      

clique em leia mais pra aprender ~

1. No Blogger, vá em Design> Editar HTML.

2. Tecle Ctrl F e procure por ]]></b:skin>

3. Logo acima dessa tag, cole o código abaixo:

.tagged {

float:left; /* Alinhamento */

width:49%; /* Tamanho das caixinhas */

text-align: left; /* Alinhamento do texto */

margin-top: 2px;

font-size: 9px;

margin-bottom: 10px;

}

.tagged a {

display: block;

font-size: 10px; /* Tamanho da fonte */

margin-left: 1px;

margin-right: 1px;

text-indent: 8px;

vertical-align: middle;

line-height: 15px;

margin-bottom: 1px;

padding: 2px;

border-top: 1px solid #EECFA1; /* Borda do topo */

background: #D3D3D3;  /* Cor das caixinhas */

text-transform:uppercase; /* Todas maiúsculas - lowercase para minúsculas */

color: #fff; /* Cor dos links */

}

4. Salve.

5. Vá para "Editar layout", adicione um novo gadget de HTML/Javascript, e nele cole o seguinte código:

<div class="tagged"><a href="URL">Título</a></div>

<div class="tagged"><a href=" URL "> Título </a></div>

<div class="tagged"><a href=" URL "> Título </a></div>

<div class="tagged"><a href=" URL "> Título </a></div>

<div class="tagged"><a href=" URL "> Título </a></div>

<div class="tagged"><a href=" URL "> Título </a></div>

<div class="tagged"><a href=" URL  7"> Título </a></div>

<div class="tagged"><a href=" URL "> Título </a></div>

<div class="tagged"><a href=" URL "> Título </a></div>

<div class="tagged"><a href=" URL "> Título </a></div>

espero que tenham gostado, o resultado é realmente muito fofo :3  

Tchau :3