• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

23 de setembro de 2012

Nova post+Menu na imagem!

Tumblr_m9ifegmjjd1rf2bs4o1_500_large
Oie genteeee!
Eu sou a nova postadora daqui do Adolescente Nerd!
Eu também posto: My Sweet Cute Life, Super Kawaii, Familia Otaku e Jeito de Nerd!
Espero que gostem de mim e leia mais para ver o tutorial de hoje!
Os créditos do menu vão ao blog Sweet Poison
Espero que gostem do tutorial!
O jeito que ela mostrou eu não gostei tanto eu deixei a minha imagem maior assim 
meio que fazendo a abinhas deslizarem da imagem!
Mais vamos ao tutorial!
Primeiramente busque pela tag:
]]></b:skin>
Logo abaixo cole:
.menu a {
margin-right: 144px;
background: #B3E1CF; /* Cor das caixinhas */
border-left: 6px double #458B74; /* Borda */
font-family: Palatino linotype; /* Fonte */
font-style: italic; /* Estilo da fonte bold se quiser negrito ou normal*/
text-transform:lowercase; /* Estilo da fonte-uppercase: maísculas e lowercase: minúsculas */
display: block; /* Exibir em bloco */
font-size: 10pt; /* Tamanho da fonte */
color: #fff; /* Cor do texto */
padding: 3px; /* Margem interna */
text-align: left; /* Alinhamente do texto */
margin-bottom: 1px;
}
.menu a:hover {
border-left: 6px solid #458B74; /* Borda em hover */
}
O código ja está basicamente explicado né?
Em um gadget HTML/JavaScript e cole:
<img src="URL da imagem que ira aparecer ao lado do menu" align="right" />
<div class="menu">
<a href="Link1">Nome do link</a>
<a href=" Link2 "> Nome do link </a>
<a href=" Link3 "> Nome do link </a>
<a href=" Link 4"> Nome do link </a>
<a href=" Link5 "> Nome do link </a>
<a href=" Link6 "> Nome do link </a>
<a href=" Link7 "> Nome do link </a>
</div>
Eu gosto que o menu fique até o fim da imagem então para repetir cole esse code: 
<a href="Link1">Nome do link</a>
Mais coloque o código antes do fechamento que é: 
</div>
Tchau espero que tenham gostado do menu!KISSUS e comentem bastante! 

2 comentários:

  1. Ana, você postando aqui? ^#^ Eu também :3

    ResponderExcluir
    Respostas
    1. Yuuuu dividindo mais um blog!
      Hihi!
      Conheci ela la no blog nos coments!

      Excluir