30 de ago. de 2012

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

2 comentários: