28/05/2015

Menu de sidebar [duas colunas]

| |
Oi! Como vão? Eu estou bem, peguei meu boletim e o que eu pensei que seria desastroso acabou por ser ótimo: nenhuma nota vermelha (abaixo de sete) e a maioria — das de humanas, é claro — beirando o dez. Caramba, vocês não imaginam o quanto eu fiquei feliz, considerando a enorme CDF que sou. Falando em felicidade, estou muito satisfeita em estar de volta por aqui, mas ainda tenho que voltar ao meu ritmo frenético de postagens. Engraçado que eu montei a agenda de próximas postagens do blog sem ter nenhum material pronto, então por isso demorei a trazer um post novo, pois estava desenvolvendo os modelinhos de menu do zero. Então, já aproveito para justificar eventuais futuros atrasos, nada com o que não estejam acostumados, huh? Eu sou uma vergonha. Bom, são modelos bem simplezinhos com hover e eu gostei bastante deles, ficaram bem fofinhos, então espero que vocês aprovem. Comentem o que acharam. Se usarem, não se esqueçam de creditar e como sempre, não rebloguem. Vamos lá dar uma olhadinha nesses menus?


No painel de controle do Blogger, clique em Layout, adicione um gadget HTML/JavaScript e cole o código do menu que escolher.

modelo 1
<style>
.direita { float:right; width:49%; text-align:center; }
.esquerda { float:left; width:49%; text-align:center; }
#status1{
width: 91%;
background: #d6e0e4;
height: 15px;
float: left;
font: 11px arial;
color: #fff;
text-align: center;
text-transform: uppercase;
margin-bottom: 4px;
padding: 3px;
-webkit-transition-duration: .10s;
-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;
}
#status1:hover{
font-style: italic;
letter-spacing: 2px;
background: #c3d7df;
-webkit-transition-duration: .10s;
-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;
} </style>
<div class="esquerda">
<a href="LINK" id="status1">TÍTULOAQUI</a>
<a href="LINK" id="status1">TÍTULOAQUI</a>
<a href="LINK" id="status1">TÍTULOAQUI</a>
</div>
<div class="direita">
<a href="LINK" id="status1">TÍTULOAQUI</a>
<a href="LINK" id="status1">TÍTULOAQUI</a>
<a href="LINK" id="status1">TÍTULOAQUI</a>
</div>

modelo 2
<style>
.direita { float:right; width:49%; text-align:center; }
.esquerda { float:left; width:49%; text-align:center; }
#status2{
width: 91%;
background: #fff;
height: 15px;
float: left;
font: 11px arial;
color: #ccc;
text-align: center;
text-transform: uppercase;
margin-bottom: 4px;
padding: 3px;
border: dashed 1px #ccc;
-webkit-transition-duration: .10s;
-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;
}
#status2:hover{
border: solid 1px #ddd;
letter-spacing: 2px;
-webkit-transition-duration: .10s;
-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;
} </style>
<div class="esquerda">
<a href="LINK" id="status2">TÍTULOAQUI</a>
<a href="LINK" id="status2">TÍTULOAQUI</a>
<a href="LINK" id="status2">TÍTULOAQUI</a>
</div>
<div class="direita">
<a href="LINK" id="status2">TÍTULOAQUI</a>
<a href="LINK" id="status2">TÍTULOAQUI</a>
<a href="LINK" id="status2">TÍTULOAQUI</a>
</div>

modelo 3
<style>
.direita { float:right; width:49%; text-align:center; }
.esquerda { float:left; width:49%; text-align:center; }
#status3{
width: 91%;
height: 15px;
float: left;
font: 11px arial;
color: #fff; /* cor da fonte */
text-align: center;
text-transform: uppercase;
text-shadow: 0px 1px 0px #c3d7df; /* sombra do texto */
background-color: #d6e0e4; /* cor de fundo */
margin-bottom: 4px;
padding: 3px;
border: solid 1px #c3d7df; /* cor do contorno */
outline-offset: -5px;
outline: 1px dotted #fff; /*cor da borda interna */
-webkit-transition-duration: .10s;
-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;
}
#status3:hover{
opacity: 0.8;
-webkit-transition-duration: .10s;
-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;
} </style>
<div class="esquerda">
<a href="LINK" id="status3">TÍTULOAQUI</a>
<a href="LINK" id="status3">TÍTULOAQUI</a>
<a href="LINK" id="status3">TÍTULOAQUI</a>
</div>
<div class="direita">
<a href="LINK" id="status3">TÍTULOAQUI</a>
<a href="LINK" id="status3">TÍTULOAQUI</a>
<a href="LINK" id="status3">TÍTULOAQUI</a>
</div>

Os códigos em negrito são os códigos de cores que podem ser alterados tranquilamente. É isso, se cuidem e fiquem bem.

22 comentários

  1. Eu acho que não vou usar, prefiro fazer os meus mesmo sabe? Mas eu gostei muito, mesmo ♥ Espero que muitos usem, e esta linda a agendinha ao lado!

    Beijos http://valentinices.com

    ResponderExcluir
    Respostas
    1. Eu entendo perfeitamente, mas fico feliz por ter gostado dos modelinhos. Obrigado. ♥

      Beijos.

      Excluir
  2. Oe :3
    Parabéns pelas suas notas boas õ// Eu estou bem, obrigada por perguntar ^0^
    Achei os modelinhos muito lindos hsuhas, acho que quando eu tiver coragem pra fazer um lay eu usarei algum ^-^
    Beijos!

    ||Crazy Cake ||

    ResponderExcluir
    Respostas
    1. Olá! ^-^
      Obrigado. ♥ Que bom que está bem!
      Aww, thanks. Use sim, ficarei muito feliz!
      Beijinhos.

      Excluir
  3. adorei o tuto <3
    acho que vou usar no meu próximo layout :)
    flor passei aqui pra te perguntar se está em p´r nossa afiliação !! bjos u3u http://girlzofunicornland.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que bom! Espero que use. <3
      Você está em minha elite, mas o EK não está na sua... Entrarei em contato.

      ~chu

      Excluir
  4. Oi amorrrrr, vou bem, sim! Obrigada por perguntar ♥ somos duas, HAHAHA! Fui com minha mãe pra reunião, já adivinhando que ficaria de castigo quando chegasse em casa por notas baixas, mas acabou que fiquei com todas as notas altas também. Menos em História, fiquei com 6.5, fiquei por cinco décimos ToT, mas minha mãe perdoou por todas as outras estarem boas osijfosif. Parabéns pelas notas <333 também tô muito satisfeita por você estar de volta KKKKKKKK, sério, o EK é um dos melhores blogs. Eu amei esses modelos <3 ficaram todos lindos <3 gostei de todos, mas meu preferido foi o primeiro ♥

    Com carinho, Thai. {hdrl}

    ResponderExcluir
    Respostas
    1. Oi, minha linda. Eu queria saber por onde você anda agora... Estou muito triste pelo que aconteceu com seu blog. :c
      Enfim, isso só mostra que nós não temos total confiança em nós mesmas, hein? Mas que bom que só tiramos notas altas... História pra mim é uma das melhores matérias, difícil mesmo é Física. -.-' Poxa, obrigado. ♥ Que bom que gostou, sério. O meu favorito também foi o primeiro. Haha!

      Kissus ~

      Excluir
  5. OOOOOOOOOOOOOOOOOOOOI JHENI! CARACAS, QUE SAUDADEEEEEEEEE <3. Tudo booooooom? Fico muuuuuuito feliz por suas notas, de verdade. Aqui, notas abaixo da média são depois de 6, e não de 7. Sorte a minha, skdjskjd. Pabénsssssssss! Tirei seis no boletim, em religião! Vergonhaaa.

    Que menus fofosssss! O modelo 3 é o meu favorito, um amor.

    Com carinho, Liv.
    Estava morta de saudades de você.
    Not Found.

    ResponderExcluir
    Respostas
    1. OOOOOOI LIV! >3< Pois é, eu também! Tudo bem sim, espero que você também. Obrigado. ♥ Pois é, na minha escola antiga era 5,0. Imagina só que mudança radical!

      Aww, obrigado! Fico feliz que tenha gostado. *w*

      Também estava com muita saudade de você. Beijinhos. ♥

      Excluir
  6. Oi Jheni, um dia espero ser como você e fazer tutoriais tão bons como esses que você anda fazendo. Eu adorei o menu, vou ver se coloco pois meu menu está bem pobrinho, isso se eu conseguir e se combinar com meu layout.

    Huuum, nenhuma nota vermelha? Arrasou mesmo! Entendo o motivo de estar um pouco fora (estava fazendo os modelinhos) e acabou que eles ficaram lindérrimos. Beijos!

    By || ✧Hi Tokkio 日本 & 한국 || Kissus

    ResponderExcluir
    Respostas
    1. Olá! ^-^ Poxa, obrigado. Não me acho tão boa assim com tutos, mas fico feliz que você goste. ♥ Espero que use.

      Pois é, me senti uma pessoa melhor quando peguei meu boletim. Haha! Obrigado, até que ficaram usáveis, né? >3<

      Beijinhos.

      Excluir
  7. Oe Jheniiii! Eu estou bem amora, obrigada c: Wow, *razou* quanto as notas hein! *o* Fico muito feliz por você, e também estou muito feliz que tenha voltado com o EK. Eu amo esse blog <3 Tava até comentando com a Livy (não sei se você se lembra dela) que você tinha sumido heuheuh.
    Menus muito fofos, usaria o segundo com certeza >♥< Pedido de afiliação aceito claro <33 Coloquei o EK, ok? Beijos da Ali ~ chandeli-er.blogspot.com

    ResponderExcluir
    Respostas
    1. Oe Aliiiii! Que bom. ♥ Eu nem preciso falar que eu amodoro você, né? Então toda vez que você me elogia eu vomito arco-íris. >3< Que bom que sentiu minha falta, toda vez que eu me ausento, você é uma das pessoas de que eu mais sinto saudade. Você lacra a poha toda! <3

      Obrigado. Que bom que os modelinhos agradaram. Não sei por onde andas atualmente, mas sério, preciso de notícias, então apareça! ♥

      Kissus.

      Excluir
  8. Oi Jhe, seus tutoriais são excelentes, queria ter esse dom, porém ainda não consigo fazer milagres 'quem sabe um dia'. Eu sou apaixonada pelo seu blog e é claro que eu aceito o pedido de afiliação, já te coloquei lá ♥
    Eu to cheia de notas ruins e isso porque eu fiquei doente, eu não constumo perder. Os menus estão lindos e maravilhosos, parabéns.

    n-rumble.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Olá, Miki! Poxa, obrigado, mas sério, você pode fazer o que quiser se tiver força de vontade e empenho e não é só um clichê não, é a verdade. Awn, sério, é muito legal saber que você curte meu cantinho, obrigado. ♥
      Ultimamente minha saúde também não anda 100%, mas tenho conseguido me recuperar nas matérias antes que fique perdida... Enfim, obrigado novamente. ♥

      c h u ~

      Excluir
  9. Oi Jheni... tbm fiquei parada por um tempo no blog.
    Que bom que as suas notas estão boas, estude muito por que no futuro valerá muito a pena.
    Eu amei os novos modelinhos, espero poder usar no novo layout do Q4, já tô enjoando do meu.
    Byeee ! :)

    ResponderExcluir
    Respostas
    1. Oie! ^-^ Bom, pelo menos pra mim, ficar longe do blog é um martírio... Eu simplesmente amo isso aqui. ♥
      Pois é, o resultado dos nossos esforços virão com o tempo.
      Haha! Que bom, também espero que use.

      k i s s e s *

      Excluir
  10. OI Jheni você foi la no meu blog e disse que aceita a afiliação! Você ja esta na minha elite, claro se ainda quiser!
    Desculpe ter demorado tanto a responder é porque meu computador estava com virus e só agora consegui restaura-lo.Adorei esses modelinhos achei eles bem fofinhoss!!!!

    Bye:: P a n d a s Bright♥

    ResponderExcluir
    Respostas
    1. Oi, Kim! Pois é, nos desencontramos bastante, não? Mas ja já vou lá no seu blog pra finalmente consolidarmos a afiliação, ok? ♥
      Eu é quem peço desculpas, mas também tive uns probleminhas técnicos. Haha! Que bom que gostou, obrigado. <3

      Beijinhos.

      Excluir
  11. Olá Jheni >3<, eu estou bem! Não recebi minhas notas ainda, to com certo medinho, mas acho que vou ir bem KKKK ç-ç. E parabéns pelas suas notas boas! Que isso ocorra comigo também USHSUH.

    Menina, estou in love com esses menu de tags <3, cara, eu sou muito apaixonada por menu, acessórios para blogs e tals sabe? Então fico babando nesses tutoriais KKKKK. Amei muito o modelo 3, e to pensando em usar ele no próximo layout e to vendo agora, aquela agendinha me atraiu bastante hein u.u, talvez use-a também USHSUH.

    Adorei muito eles!
    Beijinhos, e até uma outra hora Jheni!

    ResponderExcluir
    Respostas
    1. Olá, Nanda *w*, que bom. Aposto que você foi bem e obrigado, espero que as duas consigam manter o ritmo até o fim do ano. Haha!

      Que bom que gostou, eu também sou louca por esses resources, tanto fazer quanto admirar os alheios... kspoakd Espero que use, tanto o menu quanto a agendinha. ♥

      Beijos e queijos. *3*

      Excluir

Não ofenda autores ou leitores.
Deixe o link do seu blog para que eu visite.
Proibido comentários apenas com divulgação.
Comente seu pedido ou sugestão.