28 de jul. de 2013

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. 

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

5 comentários:

  1. Eu até usaria, mais a preguiça nem deixa n-n

    ResponderExcluir
    Respostas
    1. Também tenho preguiça, por isso o meu atualiza sozinho ^^

      Excluir
  2. Só eu que adoro fazer o post depois de ter trocado o layout? É empolgante!
    Enjoei do lay de cupcakes por causa do psd das imagens, mas seu eu fosse trocar ainda com o layout dos cupcakes me sentiria agoniada, ficaria na minha cabeça que aquilo está desorganizando o resto do blog, isso me incomoda demais.
    Bom, não uso goodies, mas o tutorial é bem fofo c:

    ResponderExcluir
    Respostas
    1. Eu não gosto de colocar PSD nas imagens, acho muito chato porque depois que troca o layout, fica aquelas imagens com estilo diferente nos posts antigos, então prefiro assim mesmo ^^

      Excluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!