24/07/2013

Tutorial - Menu vertical com imagem ao lado


Oi meus cupcakes mordiveis! *w*
Há pessoas que ficaram um pouco curiosas com o menu que eu pus aqui no blog:


Bom, eu aprendi no Bunny Crazy (não, a dona não sou eu ahaha, já me vieram perguntar também) mas vou aqui ensinar-vos e pôr umas imagens como extra ;)

Então vamos lá, recomendo a começar por criar um novo gadget na barra lateral onde vai colocar o menu, e pôr lá este código:
<img src="LINK DA IMAGEM QUE FICA DE LADO" align="right" />
<div class="menu">
<a href="URL1">Link 1</a>
<a href="URL 2">Link 2</a>
<a href="URL 3">Link 3</a>
<a href="URL 4">Link 4</a>
<a href="URL 5">Link 5</a>
<a href="URL 6">Link 6</a>
<a href="URL 7">Link 7</a>
</div>

Obvio que só vão aparecer os codigo, agora vão a editar HTML, apertem CTRL + F e pesquisem por:
]]></b:skin>

Depois de encontrarem isso, coloquem a cima este código:
.menu a {
margin-right: 144px;
background: #f0d1ff; /* Cor da caixinha */
border-left: 4px double #9c37cb; /* Borda */
font-family: Palatino linotype; /* Fonte */
font-style: italic; /* Estilo da fonte */
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: #e359f3; /* Cor do texto */
padding: 3px; /* Margem interna */
text-align: left; /* Alinhamente do texto */
margin-bottom: 1px;
}
.menu a:hover {
border-left: 6px solid #c252cf; /* Borda em hover */

Bom, o código está com as cores que eu pus aqui no blog, então modifiquem tudo ao vosso gosto.
Deixem-me dizer-vos que tal como a dona do Bunny Crazy usei uma imagem com o tamanho 132x173.
Pré visualizem e vejam se ficou bom ^^

E pronto, se for feito com atenção e cuidado tudo fica bem, certo...?
Qualquer dúvida perguntem ;)


E agora vamos ás imagens que eu fiz e editei para vocês usarem neste menu se quiserem

Asiáticas

   


Animes

   


VOCALOID

   

Espero que seja util ;)
Sirvam-se, e não esqueçam de creditar.

10 comentários:

  1. Ârigato pelo tutorial Bunny-chan *o* vou experimentar no meu blog :3

    Kissus

    ResponderExcluir
  2. Nyah :3 Você sempre sabe o que eu preciso? >.<
    Obrigada Bunny-chan *~*

    ResponderExcluir
  3. eu tenho uma pergunta ... quando se acha b:skin.. é para colocar em cima dele
    menu a {
    margin-right: 144px;
    background: #f0d1ff; /* Cor da caixinha */
    border-left: 4px double #9c37cb; /* Borda */
    font-family: Palatino linotype; /* Fonte */
    font-style: italic; /* Estilo da fonte */
    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: #e359f3; /* Cor do texto */
    padding: 3px; /* Margem interna */
    text-align: left; /* Alinhamente do texto */
    margin-bottom: 1px;
    }
    .menu a:hover {
    border-left: 6px solid #c252cf; /* Borda em hover */ ? tudo ou não
    é por que tentei colocar no meu blog e só apareceu as letras e numeros..

    ResponderExcluir
  4. Sim, tem que colocar isso.
    Mas colocou o outro codigo em um gadget da sidebar antes?

    ResponderExcluir
    Respostas
    1. uma pergunta ali no link eu coloco o link da pagina? e no url o url da pagina? é que so novata nisso.. >< acho que eu errei alguma coisa então estou tentando denovo rsrs

      Excluir
    2. onde diz LINK 1 é o nome da pagina (exemplo: HOME)
      onde diz url 1 é o www. da pagina (exemplo: http://bunny-animesespectaculares.blogspot.pt/)

      Vc consegue Hotaru-chan ^^

      Excluir

Se queres comentar:
☾ Nada de palavras indecentes!
☾ Se eu te conhecer, no comentário anónimo podes assinar no fim, por favor?^^
☾ Se quiseres falar comigo no msn podes adicionar:
bunnytsukino5@hotmail.com
☾ Diverte-te e comenta sempre que quiseres!

©