Menu para goodies

Oi amorzinhos, tudo bom? Desculpem pela ausência, mas prometo que vou ser mais presente e atualizar o blog diariamente. Ontem começou minhas provas. Foi tudo bem corrido, mas acabou que já fiz duas e amanhã será a última. As matérias não estão tãaao puxadas e hoje sobrou um tempinho pro blogger.

Hoje o tutorial é como fazer o menu de goodies. O estilo é diferente do daqui do blog e vi no Chá com Anjos (uma inspiração pra mim), veja o preview aqui (créditos : ♥ )

Passo a Passo:

Parte 1:
1♥ Vá no modelo
2♥ editar html
3♥ dê ctrl+f e busque por: </b:skin> . Ao lado do código buscado, terá 3 pontinho → ...
E você clica neles. Acima do código pesquisado (</b:skin>) cole:

@font-face {font-family: "Lilly"; src: url('http://static.tumblr.com/fmf4w4k/aT1mqnw19/lilly__.ttf');}
.menuindicetitulo {
font-size: 16px !important; /*tamanho da fonte do título*/
font-family: Lilly;
text-align: center; /*alinhamento do texto do título*/
color: #d976a3; /*cor do texto do título*/
border-bottom: 1px dotted #ccc; /* tamanho, tipo e cor da borda que fica em baixo do título*/
letter-spacing: 3px;
font-weight: normal;
}
.direita { float:right; width:49%; text-align:justify; }
.esquerda { float:left; width:49%; text-align:justify; }
#menuindice {
width: 100%;
height: 10px;
float: left;
font: 13px Tahoma; /*tamanho e nome da fonte dos links*/
color: #d976a3; /*cor dos links*/
padding: 5px 0px 6px 15px;
text-align: left; /* alinhamento dos links*/
margin: 1px;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
text-shadow: 0 1px 0 #fff; /*tamanho e cor da sombra dos links*/
background-image:url(http://i122.photobucket.com/albums/o260/mhilka/iconesagenda/Coracao.gif); /*url do mini gif*/
background-repeat:no-repeat;
background-position: 0px 10px;
}
#menuindice:hover {
color: #DFB8EB; /* cor do link no hover*/
text-shadow: 0 1px 0 #fff; /*sombra do link no hover*/
}

No código mesmo está tudo explicado e onde pode mexer, agora:

1♥ vá na 'páginas' → clique em nova página e cole o código abaixo:

<div class="menuindicetitulo">Título da tag</div>
<div class="esquerda"><a href="LINK" id="menuindice">Nome do link</a></div>
<div class="direita"><a href="LINK" id="menuindice">Nome do link</a></div>
<div class="esquerda"><a href="LINK" id="menuindice">Nome do link</a></div>
<div class="direita"><a href="LINK" id="menuindice">Nome do link</a></div>
<div class="esquerda"><a href="LINK" id="menuindice">Nome do link</a></div>
<div class="direita"><a href="LINK" id="menuindice">Nome do link</a></div>
<span style="font-size: 70%;">Widget by <a href="http://chacomanjos.blogspot.com/" target="_blank">Chá com Anjos</a></span>

Personalize com seus links e nomes e salve.

OBS: para usar a direita ou esquerda (no alinhamento em alguma parte do código), só usar left (direita) e right (esquerda), o centro é center. Espero ter ajudado, bjs *-* ♥