Tutorial - Menu Agenda

Hey pimpolhos! Como vão?
Hoje meu dia foi uma caca, e semana quem vai ser mais! Fui no médico, e ele mandou fazer exame de sangue (fala sério, é muito ruim e chato!), odeio ir no médico, ele só manda fazer exame de sangue todo ano. Enfim, isto não chega ao caso!
Eu estava olhando um blogs por ai, e quando cheguei no Sugoi Tutoriais, vi um tutorial de menu agenda (créditos à o blog, pelo tutorial). Ele é muito bonitinho, veja a Preview dele. Ele está grandinho, mas se colocado em uma sidebar, ele se ajusta exatamente. Vamos ao tutorial?
Vá em seu painel do blogger, Modelo > Editar HTML, aperte Ctrl + F e procure por ]]></b:skin;
Acima desta tag, cole o seguinte código (ajuste de seu gosto):

.menudiv {
background: #eee; /* Cor de fundo da wishlist */
margin-bottom: 2px;
font: 12px Tahoma; /* Tamanho e fonte */
line-height: 18px;
widht: 300px;
height: 29px;
-webkit-transition-duration: .80s;
-moz-transition-duration: .80s;
-o-transition-duration: .80s;
-ms-transition-duration: .80s;
transition-duration: .80s;
overflow: hidden;
}

.menudiv:hover {
background: #b37206; /* Cor de Fundo da wishlist ao passar o mouse */
margin-left: 0px;
widht: 300px;
height: 29px;
color: #fff; /* Cor da letra da wishlist */
}

.menudiv seta {
background: #b37206; /* Fundo de onde está a seta */
font: 20px Tahoma; /* Tamanho e fonte */
color: #fff; /* Cor da Seta */
padding: 4px;
margin-right: 9px;

}

.menudiv:hover seta {
background: ; /* Cor da Caixinha da seta ao passar o mouse */
color: #513868; /* Cor da setinha ao passar o mouse */
}


Salve.

Depois, adicione um gadget HTML/ Java Script e cole (ajuste como desejar):

<div class="menudiv"><seta>01</seta>São Paulo - Brasil</div>
<div class="menudiv"><seta>02</seta>São Paulo - Brasil</div>
<div class="menudiv"><seta>03</seta>São Paulo - Brasil</div>
<div class="menudiv"><seta>04</seta>São Paulo - Brasil</div>

O tutorial foi este! Eu particularmente gostei muito deste menu agenda, e vocês?


16 comentários:

  1. Esse tutorial é bem fácil e eu adorei *-*
    Cate-land.blogspot.com

    ResponderExcluir
    Respostas
    1. Hey que bom que você gostou! Ele é muito fácil mesmo! ><

      Excluir
  2. Awn, que menu mais fofo >3<

    www.b-urning.blogspot.com.br

    ResponderExcluir
  3. Que fofura, e é tão fácil *u*
    Você tem razão eu odeio tirar sangue -q

    Beijos Vices of life(clique)

    ResponderExcluir
    Respostas
    1. É muito fofo, e fácil mesmo! e.e
      Acho que todos nós odiamos! :X

      Beijos!

      Excluir
  4. Que lindo o menu! Adorei o post Kissus.

    www.k-awaiicherry.blogspot.com < seguindo, segue de volta?

    ResponderExcluir
    Respostas
    1. É lindo mesmo! Que bom que gostou! (:
      Já sigo sim flor!

      Beijos!

      Excluir
  5. Gostei do menu, bem legal! :D
    Respondendo você, aceito afiliação sim, no caso vou adicionar você nos meus afiliados agora :) xoxo.

    ResponderExcluir
  6. É bem chato mesmo ir ao médico seja para tirar sangue ou qualquer outra coisa ^・ェ・^, amor super fofo o menu e bem criativo ;) Beijocas (-‿◦☀)

    Having Cherry ☁ | Garota no Mundo Html

    ResponderExcluir
    Respostas
    1. É super chato mesmo! heehuehe'
      Fico super feliz em saber que gostou do menu! (:

      Beijos!

      Excluir
  7. Faz anos, anos mesmo que não vou ao médico tirar sangue grazaDeus UHEUHE', dia 05 vou tirar uma pinta, me deseje sorte D: q
    Que graciiinha *u* Talvez eu use, salvei nos favoritos :3 Aah, eu aceito sim afiliação, vou te por ♥

    htmlandresources.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Que sorte que você tem! heuhuehe' Ah, e boa sorte, não fique nervosa não, isto só atrapalha! rçrç
      Ah, fico muito feliz mesmo! Já vou te por também! ♥

      Excluir
  8. Esse menu agenda é bem lindo eu gostei do efeito *u* e o tutorial é simples de fazer <3

    FH♡

    ResponderExcluir
    Respostas
    1. Que bom que gostou! *-*
      É mesmo muito fácil de fazer! (:

      Beijos!

      Excluir

-Sempre que comentar seja educado, faça sua crítica, mas com educação e moderação, e não use xingamentos ou palavrões;
-Comente sobre o post, pois não custa nada ler uma coisa que fiz com tanto carinho para você;
-Sempre que comentar deixe o link de seu blog para que eu possa retribuir sua visita
-Se quiser que eu siga seu blog, apenas comente que está seguindo, e já irei retribuir.
-Fico muito feliz por você comentar, sempre irei responder seu comentário com muito carinho!

~Volte sempre~

« »