10/11/2012

Tutorial: Menu One Border

||
http://4.bp.blogspot.com/-V8yLqq1JDVI/UF-16TqepTI/AAAAAAAAbcI/N8qXElW8ES8/s1600/kokoro.png

Yo meus amados, trago mais um menuzinho os créditos são do blog Sweet Poison, eu achei muito lindo e não pude deixar de usar, não teve como eu colocar uma imagem para terem ideia, mas aqui esta o blog de demostração.

Já dentro do seu HTML, procure pelo ]]></b:skin>, assim que acha-lo coloque esse código abaixo acima dele:

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

Salve, e em seguida adicione um  gadget de HTML/Javascript, e dentro dele cole o código:

<div class="tagged"><a href="URL 1">Título 1</a></div>
<div class="tagged"><a href="URL 2">Título 2</a></div>
<div class="tagged"><a href="URL 3">Título 3</a></div>
<div class="tagged"><a href="URL 4">Título 4</a></div>
<div class="tagged"><a href="URL 5">Título 5</a></div>
<div class="tagged"><a href="URL 6">Título 6</a></div>
<div class="tagged"><a href="URL 7">Título 7</a></div>
<div class="tagged"><a href="URL 8">Título 8</a></div>
<div class="tagged"><a href="URL 9">Título 9</a></div>
<div class="tagged"><a href="URL 10">Título 10</a></div>

Nenhum comentário:

Postar um comentário

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram