Menu para índice

Olá Anjos!

Esse é o primeiro post com o novo template, yeah! Pensei em colocar um PSD especial para as ilustrações, deixando azul ou com alguma outra cor, mas desisti. Acho muito chato um blog com excesso de uma cor só, fica cansativo. Também não gosto de tirar as cores das ilustrações, gosto delas.

O tutorial de hoje é um menu fofo que acabei de criar. Fiz para ser usado em páginas de Goodies, de tutoriais e etc. Você coloca um título e vai listando seus tutoriais, é ótimo para quem gosta de manter uma página de Goodies organizada e bonita. 

Vejam um preview aqui.

1- Vá no seu HTML, abra a setinha ao lado de "...", depois procure por </b:skin>. Acima, cole:

@font-face {font-family: "Lilly"; src: url('http://static.tumblr.com/fmf4w4k/aT1mqnw19/lilly__.ttf');}
.menuindicetitulo {
font-size: 16px !important;
font-family: Lilly;
text-align: center;
color: #d976a3;
border-bottom: 1px dotted #ccc;
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;
color: #d976a3;
padding: 5px 0px 6px 15px;
text-align: left;
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;
background-image:url(http://i122.photobucket.com/albums/o260/mhilka/iconesagenda/Coracao.gif);
background-repeat:no-repeat;
background-position: 0px 10px;
}
#menuindice:hover {
color: #DFB8EB;
text-shadow: 0 1px 0 #fff;
}

2- Para usar, cole esse código:

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

Mude o que está destacado, sendo primeiro o título das tags, e os outros os links de cada post (lado esquerdo, depois direito).

Explicando os códigos: 

Primeira parte: código referente ao título;

font-size: 16px !important;

Tamanho da fonte.

text-align: center;

Alinhamento.

color: #d976a3;

Cor da fonte.

border-bottom: 1px dotted #ccc;

Borda embaixo do título, tamanho, tipo e cor.

Segunda parte: código referente aos links;

font: 13px Tahoma;

Tamanho da fonte e tipo de fonte.

color: #d976a3;

Cor da fonte

text-align: left;

Alinhado a esquerda, troque para center ou right para deixar centralizado ou alinhado a direita, respectivamente.

text-shadow: 0 1px 0 #fff;

Sombra do texto.

background-image:url(http://i122.photobucket.com/albums/o260/mhilka/iconesagenda/Coracao.gif);

URL do mini gif. 

Terceira parte: código referente aos links hover (quando passa o mouse);

color: #DFB8EB;

Cor do link quando passa o mouse.

text-shadow: 0 1px 0 #fff;

Sombra do link quando passa o mouse.

Altere os outros códigos apenas se você tem conhecimento em HTML.

Espero que gostem do menu, e por favor, não retirem os créditos ^~^

Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar