Menu Folded Sheet

19/09/2015



Olá senhorias e senhorios! Como vai esta vida atada de vocês? Senti falta de postar aqui do blog. Confesso ter dado aquela sumida básica (ponhem básica nisso¬¬), mas eu já estou de volta. Bom, neste meu curto - ou não - sumiço no blog, eu havia parado para pensar em quanto eu sou desorganizada e irresponsável. Sim, eu sou muito irresponsável. Digamos que eu não cumpro com o que prometo, e como alguém já deve ter lido sobre mim (quem não leu corre lá... mentira corre não, você não vai encontrar nada) eu sou muito preguiçosa e acabo desistindo fácil das coisas. Sei que não podemos desistir assim e PÁ, mas é questão de semissedentário mental. ─ estou pensando em mudar o layout, o que acham?!


Hoje vim com um tutorial para que possam usar um menu igual ao do blog. 


Vá em Modelo  > Editar HTML;
 Expanda a caixa do código (clicando dentro dela);
 Pressione Ctrl+F ou F3 em seu teclado;
 Procure (como sempre) por ]]></b:skin>
 Acima cole este código:

/* Menu folded sheet -- Blog Soshyu */
/* Menu em estado normal */
#Cup {
float:left; /* Posição, não altere */
background:#c3e3c3; /* Cor do fundo do menu normal */
margin: 2px; /* Espaçamento interno */
width: 70px; /* Largura do menu */
font-size: 14px; /* Tamanho da fonte */
color:#FFF; /* Cor da Fonte */
text-align:center; /* Posicionamento do texto */
text-decoration: none; /* decoração abaixo do texto */
PADDING:10PX; /* Espaçamento de um menu para o outro */
font-family: 'Julius Sans One'; /* Tipo de fonte */
-moz-transition: all 0.5s ease-out; /*Duração do tempo em que ele ficará em hover, não altere */
-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;
}
/* Menu em Hover */
#Cup:hover {
-webkit-border-top-left-radius: 20px;
-moz-border-radius-topleft: 20px;
border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;
-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;
}

Modifique com sua preferencia, visualize para ver se está tudo okay  e Salve.


  • Nota: Caso queira que o modo hover mude (como: cor, fonte, etc) é só colocar os mesmo valores do modo ''normal'' para o modo ''em hover'' e substituir os valores.


 Agora, vá em Layout
 Adicione um Gadget HTML/JavaScript.
 Nele cole:

<div style="position: absolute; margin-top: -50px; right: -8px;">
<a href="LINK" id='Cup'>NOME</a>
<a href="LINK" id='Cup'>NOME</a>
<a href="LINK" id='Cup'>NOME</a>
<a href="LINK" id='Cup'>NOME</a>
</div>

PRESTAI ATENÇÃO: A primeira tag (onde deixei em negrito os números) corresponde a posição do menu.

 Em ''-50px'' trata-se de move-lo ao topo. Quanto menor o número (negativo) mais alto ele ficará. Quanto maior  mais baixo ele ficará.
 E em ''-8px'' a posição de move-lo para os lados. Vale a mesma regrinha <3

Não é tão difícil, é só ir testando de acordo com seu layout. Deixando claro que, CSS é só na base do teste.

Espero que tenham gostado. um beijo, um cheiro, um queijo e TCHAU♥

12 comentários:

  1. Oi! :3
    Também sou assim, quase nunca cumpro minhas metas haha É por isso que não gosto de prometer nada, se der pra eu fazer eu faço, senão, não faço.
    Sobre o menu, é lindo! ^^ É um efeito bem simples mas que fica bem bacana, talvez eu use em um futuro layout lá no blog.
    Kissus! :)

    Sweet Paradox

    ResponderExcluir
    Respostas
    1. Que bom que gostou do menu. Eu geralmente gosto de efeitos assim, simples que não dá trabalho >.<
      E bom, já que eu estou sozinho nesta caminhada de "Pessoas-que-não-cumpre-com-as-coisas" eu fico feliz =D
      Bjs♥

      Excluir
  2. Eu ri do começo do post kkk De vez em quando fico pensando também no quanto sou irresponsável com algumas coisas ><
    Adorei o menu, simples mas lindo, como deve ser xD

    ♥ Rendas e Doces

    ResponderExcluir
    Respostas
    1. rs Agradeço o carinho Lia. É sempre um saco quando acabamos nos enrolando em simples afazeres ^^
      Bjs♥

      Excluir
  3. Oieee ♡ Também sou muito irresponsável , por isso agendo as postagens.
    Amei o post ! Estava procurando um menu assim , pois estou fazendo layouts free .
    Beijinhos açucarados ♡

    ResponderExcluir
    Respostas
    1. Oi, Laura! <3
      Que bom que gostou do menu. Espero que talvez o use em um de seus layouts.
      Kixx♥

      Excluir
  4. - Mensagem subliminar -

    Yo minha querida Ladie. Como Bocchan tinha dito, ele se preocupa com todos os hospedes da Mansão, e está sempre pronto para ajudar! Lembre-se que ele estará sempre de olho em seu desenvolvimento. Além disso, ele costuma deixar seus hospedes bem informados das coisas que andam acontecendo na Mansão. Então, aqui trago uma delas! O terceiro desafio está no ar, e é muito importante que todos participem, mesmo que não seja algo obrigatório! Seria legal ser vencedor e o destaque do local, não é mesmo? Por isso, nunca deixe de participar dos desafios! Até mais! *3*

    Bocchan || Mansão Phantomhive

    ResponderExcluir
  5. Somos iguais (de novo uasahs), eu sou péssima com responsabilidades e isso é péssimo! Nem eu confio em mim mesma, chorano

    Eu acho esse menu tão fofo, parece que ele combina com tudo e também é fácil pakas -q

    bjs,
    http://forestffairy.blogspot.com

    ResponderExcluir
    Respostas
    1. haha, somos bem parecidas em relação a isso.
      Amo coisas simples e fáceis de fazer, apesar de gostar de uma desafio♥
      Muito obrigada pela visita!
      Kxx♣

      Excluir
  6. Yo! (´✪‿✪`)ノ Tudo bem!? Aqui é o Bocchan da Mansão Phantomhive. Vim trazer uma informação importante! Alguns já sabem disso, mas caso não saiba, estou aqui para informar. A Mansão Phantomhive sofreu uma grande mudança instantânea. Infelizmente, algo que ocorreu no passado do Bocchan, voltou a se repetir! Nossa Mansão acabou em chamas novamente, mas agora que Sebastian eliminou os inimigos, Bocchan ordenou o nosso Mordomo Negro, mais uma vez reconstruiu a Mansão Phantomhive, e tudo isso para a máxima segurança de vossas vidas. Isso tudo você pode ver no novo desafio desse mês. Então, você que faz parte dos hospedes da Mansão, por favor, substitua o código do selo da Mansão por este daqui (www) Obrigada(o) pela atenção! Até breve! ↖(^o^)↗

    Ciel Phantomhive | Mansão Phantomhive

    ResponderExcluir
  7. Olá, Nayou!
    Aqui é a Yuni de Cheshire (avá), diretora do projeto Neverland High. Vim avisar que lançamos o primeiro desafio.
    Ah, não se preocupe, não passarei aqui sempre, é que por termos demorado bastante, fiquei receosa que tivesse nos ignorado, entende? (culpa minha, óbvio, por ser atrasada)
    Sayonara >u<

    ResponderExcluir

❀Seu comentário será muito apreciado, se quiser pode colocar o link da sua página, site ou blog para eu visitar sem problema.

❀Qualquer forma de expressão é valida (pode usar palavrões) contanto que não ofenda ou pratique algum crime de ódio;

❀Evite Spam e seja feliz