17/07/2015

Modelos de menu flutuante {sidebar}

|| ||
Yo, angels! (~ ̄▽ ̄)~ ★ Como vocês estão? Eu estou mais que bem, mais que feliz, mais que ótima, mais que... Ok, acho que deu pra 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 . 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. >.< Mas cá estou, atendendo um pedido que é como por os "botõezinhos" ao lado da sidebar. Go! ~


{1} Menu Roll (gavetinha)
Vá em Modelo Editar HTML > dê Ctrl+f e busque por </b:skin> e então cole 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;
}
 Salve e agora vá em Layout Adicionar um Gadget > HTML/JavaScript e cole o código abaixo:
</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" quanto maior o número,mais para cima o menu vai e em "left" mais para direita ele vai.
 Feito isso, o menu está prontinho!

{2} Menu Flower 
Vá em Layout Adicionar um Gadget > HTML/JavaScript e cole o código abaixo:
<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 />
 Simples, né? Então é só copiar o link das florzinhas e substituir no código. Para adicionar mais links, basta repetir o código.
          

 Pode ter ficado meio embaralhado por ser dois modelinhos diferentes em um só post, mas espero que façam bom proveito, não esquecendo de dar os créditos. É isso por enquanto. Jya ne!

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.
Não serão aprovados comentários apenas com divulgação.
Caso queira sugerir ou pedir algum post, faça isso por nossa Ask.

(⊙﹏⊙✿) (◕﹏◕✿) (◕‿◕✿) (◕︿◕✿) (◡‿◡✿) (◠△◠✿) (◕ω◕✿) (◠ω◠✿) (◠︿◠✿) (◠﹏◠✿) (◠‿◠✿) (ノ⊙ヮ⊙) (╯°□°)╯ಠ_ಠ ( ̄。 ̄)~zzz (°ロ°)ヽ (゜∇゜)ノ (ノ◕ヮ◕)ノ (▰˘◡˘▰) (︶▽︶) (。・_・。) (・ェ-) (。◕ ‿ ◕。) ʘ‿ʘ ╮ (─▽─)╭ ᕦ(ò_óˇ)ᕤ (≧ω≦) (^▽^) ( ̄□ ̄) (¬_¬) (╥_╥) (╯3╰) (¬‿¬) (◣_◢) (≧o≦) (⋋▂⋌) (॓_॔) (─‿‿─) (∩︵∩) (⊙_◎) (。♥‿♥。) (~ ̄▽ ̄)~ ★~(◠‿◕✿) (∩˃o˂∩) ~ヾ(^∇^) (づ。◕‿‿◕。)づ (ノ◕ヮ◕)ノ*:・゚✧ (;一_一) (¬_¬) (¬‿¬) (∩︵∩) (◕ ‿ ◕)/