17/07/2015

Modelos de menu flutuante [sidebar]

| |
Oi! Como vocês estão? Eu estou mais que bem, mais que feliz, mais que ótima, mais que... OK, acho que deu para entender. Dia 12/07 foi, com certeza, o melhor dia da minha vida. Estive no evento Anime Friends e conheci grande parte dos meus Youtubers favoritos, inclusive o Cellbit e o cara mais incrível da plataforma: o Alan. Ele foi super simpático, tirou mil fotos com a gente e foi exatamente o cara dos vídeos. Tudo foi muito divertido, desde interagir com os cosplayers, os shows e o momento em que um cara aleatório pediu para tirar uma foto do meu look (?). Sério, difícil algum dia superar aquele. Mas enfim, estou ainda meio ausente aqui do blog e tenho que admitir, é mais fácil manter a rotina quando estou estudando. Nas férias eu esqueço o significado da palavra organização e procrastino loucamente. Mas cá estou, atendendo a um pedido de tutorial de como colocar um menu de botõezinhos ao lado da sidebar, ou seja, flutuante. Para isso, fiz dois modelos e espero que gostem, usem e creditem, lembrando de nunca reblogar.


menu gavetinha

No painel de controle do Blogger, clique em Tema e vá nas três bolinhas, escolhendo Editar HTML. Dê um clique dentro da área de código para localizar seu cursor, aperte Ctrl+F no teclado, pesquise por ]]></b:skin> e dê enter. Depois de ter encontrado, cole acima/antes o seguinte código:

roll {
height: 12px;
width: 10px;
display: inline-block;
overflow: hidden;
background: #d6e0e4;
font-family: arial;
font-size: 10px;
text-transform: uppercase;
color-font: #fff;
padding: 4px;
text-decoration:none;
float: left;
border-right: #c3d7df 4px double;
-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;
}
.roll:hover {
width: 60px;
border-right: #c3d7df 4px solid;
-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;
}

No painel de controle do Blogger, clique em Layout, adicione um gadget HTML/JavaScript e cole o seguinte código:

</script>
<div style="position: absolute; margin-top: -140px; left: 250px;"><span class="roll" onclick="changenavigation('01')">&#9829; <a href="LINK">TÍTULO</a></span><br /><p><span class="roll" onclick="changenavigation('02')">&#9829; <a href="LINK">TÍTULO</a></span><br /><p><span class="roll" onclick="changenavigation('03')">&#9829; <a href="LINK">TÍTULO</a></span><br /><p><span class="roll" onclick="changenavigation('04')">&#9829; <a href="LINK">TÍTULO</a></span></p></p></p></div>
</div>

entenda os códigos: Os números podem ser mudados de acordo com a posição que você quer que seu menu assuma. Em "margin-top" números negativos sobem o menu  e em "left" números negativos levam o menu mais para a esquerda.

menu flower [imagem]

No painel de controle do Blogger, clique em Layout, adicione um gadget HTML/JavaScript e cole o seguinte código:

<div style="left: 250px; margin-top: -150px; position: absolute; display: inline-block; overflow: hidden; "><a _blank="" href="LINK" title="TÍTULODOLINK"><img onmouseout="this.src='LINKDAIMAGEM1';" onmouseover="this.src='LINKDAIMAGEM2';" src="LINKDAIMAGEM1" /></a><br />

entenda os códigos: o "linkdaimagem1" é a imagem antes do hover e o "linkdaimagem2" depois do hover. Ajuste o left e margin-top como indicado acima. Então é só copiar o link das florzinhas – ou imagem que preferir – e substituir no código. Para adicionar mais links, basta repetir o código a partir de "<a_blank...".

          

É isto, me digam o que acharam nos comentários, sim? Fiquem bem, se cuidem.

22 comentários

  1. Olá, olá. Eu estou bem, obrigada. E você? Eu queria ter ido no AF, mas nem deu :c Que legal que você conheceu seus youtubers favoritos. Adoro o Cellbit q
    Os menus estão lindos e adoro usar coisas flutuantes, o segundo é o meu favorito~

    Beijos, (づ ̄ ³ ̄)づ muah!
    Att. Mysi // Oh! Pyxis.

    ResponderExcluir
    Respostas
    1. Oi, oi. Eu estou indo, né? As aulas voltam hoje. x-x Melhor dia ever, foi incrível! Espero que consiga ir numa próxima oportunidade. Já pensou que show a gente se conhecendo? *w* Quem não adora o Cellbicha? ♥
      Eu também amo usar coisas flutuantes. ^-^ Obrigado.

      Beijim! *3*

      Excluir
  2. Olá!!Adorei o menu,com certeza,no meu próximo layout,vou usá-lo!! Gostei muito do blog,aceita afiliação?

    kissus~~

    Café com Baunilha ♥

    ResponderExcluir
    Respostas
    1. Hey! Que bom que gostou. ♥ Espero que use. Oh, obrigado, fico feliz que goste do EK. Eu aceitaria a afiliação, mas não vejo uma elite em lugar algum em seu blog...

      Beijos.

      Excluir
  3. Que lindos modelos <3<3

    Made in Horrolândia - visite
    Blog pessoal - visite

    ResponderExcluir
  4. Adorei o tutorial, vou segui-lo direitinho, ah sou a irmã do blog Cake Sugar. Gostaria de me afiliar também. No meu próximo layout irei usa-lo. Meu blog é muito simples mas gostaria de um sim. Você foi nesse evento. Não vejo muito animes (queria ver mas não sei nenhum) do mesmo jeito queria ir. Uma amiga virtual acho que foi também. Até!

    S A Y O N A R A S Malignos: Hi Tokkio - Doçuras, Música, Diversão e muito mais!

    ResponderExcluir
    Respostas
    1. Que bom que gostou! ^-^ Claro que aceito a afiliação, se ainda estiver interessada depois de tanto tempo, haha! Espero que use. ♥ O importante não é ter um blog com estatísticas absurdas ou com o melhor layout da blogosfera, o importante é ter um lugarzinho só nosso onde nos sintamos bem, certo?
      YAAAY, SIM EU FUI NO EVENTO. Parei. -q Eu amo animes, amo séries, amo youtubers, sério, aquele é o lugar. Haha! Até mais, sweet.

      k i s s u s

      Excluir
  5. Eu estou bem também e o//. Eu nunca fui no Anime Friends, é parecido com o Anime Dark? Parabéns pra você. Tem razão, eu acabei notando que para mim também é mais fácil manter a rotina quando você está estudando, nas ferias você tem o '' poder '' de não fazer nada ai fica mais desorganizado ainda qq. EU ADOREIIIIII O TUTORIAL E O MENU, serio! Faz tempo que estava procurando esse menu, sempre colocava no google '' menu que fica do lado da sidebar '' mas não achava nada .-.. Já salvei o tutorial e com certeza irei usa-lo. Muito obrigado hasuas. Aguardando as novas postagens do blog.

    new-dezembro.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que bom. ♥ É, segue o mesmo estilo de evento que o Anime Dark. Pois é, nas férias eu utilizei muito bem meu "poder" de não fazer nada e o blog acabou ficando em último plano.Espero voltar ao meu ritmo logo, porque odeio deixar meus bloguinhos às teias. Ah, que bom que o tuto lhe será útil, espero mesmo que use. ♥ Disponha e sempre que precisar, pode fazer um pedido, ok?

      Beijinhos.

      Excluir
  6. Oin >< eu to bem, eu acho né sjddf
    aqui quase nunca tem evento, só aqueles de musica sertaneja cheio de gente suada gfrh Você conheceu o Cellbit? que invejinha kk se eu conhecesse ele, eu iria dar uns bons gritos no ouvido dele, só pra ele saber como eu me sinto vendo os videos dele kk.
    Awn eu adorei os modelinhos c: Eu sou péssima em mexer no html do blog kk
    kisses ~ ||Misty Roses ^^ ||

    ResponderExcluir
    Respostas
    1. Oie, então fico feliz, eu acho né? Haha!
      Esse é um dos motivos de eu amar viver em São Paulo. Tudo acontece aqui, sabe? Sim, eu conheci o Cellbit, tive um mini infarto e ainda não consigo entender como aquele ser humano é alto. ;-; Hehe. Melhor dia ever. ♥ Não precisei gritar no ouvido dele, tinha bastante gente fazendo isso mspodksxakd.
      Obrigada. Não é não, seu layout é tão amor... ♥

      Kisses ~

      Excluir
  7. Oi meu amorzinho, desculpe o sumiço.
    Amei muito esses menu, que lindo <3 Vou usa-lo em breve haha
    xoxo //Candy Bomb

    ResponderExcluir
    Respostas
    1. Oi, sua linda! Está desculpada, mas não acostuma, hein? Quero você sempre no meu campo de visão, rum. >3<
      Que bom que gostou, obrigada. ♥

      xx

      Excluir
  8. Você foi no AF, ai que invenjinha (do bem tá?) Eu queria muito ter ido, mas só vou pra SP depois do evento acabar :'(

    Muito amorzinho os dois modelos, amei <3

    ♥ Rendas e Doces

    ResponderExcluir
    Respostas
    1. Sim eu fui e foi amazing! ♥ Estava pensando e no próximo ano a gente podia fazer até mesmo um encontro de blogueiros no evento... Seria legal, não?

      Obrigado, Liah, fico feliz por ter gostado. <33

      Beijinhos.

      Excluir
  9. Oi amore, vim aqui outra vez pra pedir algo especial ahsuah
    Participa do meu grupo no whatsapp? É somente blogueiros, foi feito com carinho pra compartilhar, conversar e se conhecer e entre outras coisas ahsua, se quiser entrar basta ir nessa postagem aqui e envie seu numero <3 haaa, e não se preocupe que os comentários estão moderados então seu numero estará seguro 'u'
    xoxo

    ResponderExcluir
    Respostas
    1. Olá, minha linda. ♥ Já estou lá e muito feliz por poder conhecer mais à fundo blogueiros que eu tanto gosto... É uma honra, embora eu ainda esteja um tantinho tímida. >////< Obrigado mesmo por lembrar de mim, haha! ♥

      xx

      Excluir
  10. Oi moça, bem legal o menu 'u'
    Tu poderia fazer um modelo pra área de post, tipo, simplesinho mesmo? Please.

    yeah-ih.blogspot.com

    ResponderExcluir
    Respostas
    1. Olá, amora. Obrigado, que bom que gostou.
      Demorei pakas pra responder, mas vou postar sim, junto com modelinhos pra side também. <33
      Obrigado pelo comentário e pelo pedido.

      Beijinhos.

      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.