12/05/2013

Tutorial: Menu novidades

||

Yo minna-san!!!

Boa noite, como vão? Peço desculpas por só postar a esta hora, afinal hoje é dia das mães e  me dediquei inteiramente a minha mas, mudando de assunto. Ontem recebi uns 5 comentários pedido para postar o menu anteriormente usado no Gadget "TAG's", realmente não fazia ideia de qual era o menu, pois quem fez meu layout anterior (Kuroshitsuji) foi a Roh, mas ela já me passou então trago aqui para vocês. Os créditos são inteiramente do tumblr H.A.M eu já o conhecia mas não cheguei a ver esse menu antes, coisa que achei bem legal. E mais uma vez, obrigada pelo layout Roh. Caso queira dar uma olhadinha no menu aqui esta (Menu Novidades) Então vamos lá?


Para começar vá ate o blog qual deseja adicionar o menu, então vá ate Editar Modelo. Abra sua aréa de códigos e então a selecione e use o atalho Ctrl+F. Então pesquise por ]]></b:skin>, assim que o achar acima dele adicione este código:

.novi{width:210px;height:50px;background-color:#dad9da;text-align:left;text-indent:5px;margin-left:57px;font-family:bebas neue;font-size:25px;color:#4e3b4f;margin-top:10px;}
.novi p{font-size:14px;line-height:14px;}
.novi img{width:50px;height:50px;position:absolute;margin-left:-74px;}
.novi:hover img{-webkit-animation:brilha 0.7s;-moz-animation: brilha 0.7s;}
.novi:before {content:"";position: absolute;width: 0;height: 0;border-top: 2px solid transparent;border-right: 16px solid #dad9da;border-bottom:8px solid transparent;margin: 22px 0 0 -21px;}

@-webkit-keyframes brilha {
  0% { opacity: 0.5;}
  25% {opacity: 1;} 
  50% {opacity: 0.5;}
   75% { opacity: 1;}
  100% {opacity: 0.5;}
  }

Ele é super fácil de arrumar, basta trocar a imagem e as cores. Depois de tudo arrumadinho vá ate seu Layout e abra um gadget de HTML/JavaScript e dentro, cole:

<a target="_blank" href="LINK"><div class="novi"><img src="URL DA IMAGEM" align="left">TITULO DA NOVIDADE<p> SUBTITULO.</p></div></a> 

Se quiser usar a mesma fonte, cole isso no seu CSS (acima de ]]></b:skin>): 

@font-face { font-family: "bebas neue"; src: url('http://static.tumblr.com/cvlbtjz/cnsln9tpp/bebasneue.otf'); }

Bem é isso, então gostaram? Espero que sim, se tiverem duvidas basta perguntarem. Então ate a próxima.

46 comentários:

  1. Bruna12/5/13

    Nyaaaa obrigada Drw

    ResponderExcluir
  2. Lucia12/5/13

    Drw? Você tá muito ocupada preciso de uma ajudinha sua, pode entrar no face?

    ResponderExcluir
    Respostas
    1. Não exatamente só estou vendo anime, (muito bom anime) mas entro sim só um minuto.

      Excluir
  3. Que lindo! Adorei *------*

    @Escrita de Cabeceira

    ResponderExcluir
  4. Ahhhhhhhhhh tenho que usar esse efeito que lindooooooooo e ele ainda e muito util

    ResponderExcluir
  5. Gostei muito do menu!Talvez use no próximo lay!
    bjs
    bpblogdepapel.blogspot.pt

    ResponderExcluir
    Respostas
    1. Se usar, me diga! Pós sera um prazer ser a primeira a comentar

      Excluir
  6. Fica lindo esse menu.
    Bjs
    all-2you.blogspot.com

    ResponderExcluir
  7. Que lindo <3
    Vou favoritar para usar no próximo layout <3
    - Catching Pandas

    ResponderExcluir
    Respostas
    1. Wendy já começou a faze 3 do concurso <3

      Excluir
    2. Nana obrigada irei lá concerteza!

      Excluir
  8. Que menu mais FOFO!!!
    Adorei, só acho ele meio grande e desajeitado...
    Adorei o menu.

    ResponderExcluir
    Respostas
    1. Yo Rayane, verdade ele e meio grande mas dependendo da imagem que usa fica legal.

      Excluir
  9. Yo, Wendy Chan ~

    Acho que entendo, afinal de contas foi o dia dela (sua mãe, alias de todas), é nada mais justo que isso! Sobre o menu ele é muito lindos, fiquei besta com ele, acho até que quero usar no meu próximo layout! Kisus, é até uma próxima.

    Kuusou World

    ResponderExcluir
    Respostas
    1. Yo Thonn-kun!!! Verdade apesar de o da das mães ser todos os dias, mas seria dificil comprar presente todos os dias neh? rsrs Mas fico contente que tenha gostado do menu, e obrigada pela visita. Beijinhos o/

      Excluir
  10. Bem bacana, adorei, provavelmente usarei no meu proximo lay!

    Uma quase nerd

    ResponderExcluir
    Respostas
    1. Se usar me avisa vou amar ver

      Excluir
  11. Esse menu é bem legal e bem lindinho também.
    Preciso falar que amo esse seu Layout. Comecei a ler o mangá do Black Butler esses dias e estou amando. Eu já achava seu lay divo, agora que sou fã do mangá estou amando ainda mais.

    Uma Borboleta Laranja

    ResponderExcluir
    Respostas
    1. Ohayo Nami-chan, fico tão feliz que tenha gostado do menu e do novo layout, apesar de entar bem simples. Nossa que legal mais uma fã do Black Butler é, impossivel não se apaixonar por este mangá de tão detalhista que é. Mas fico grata por seu comentário e por gostar de meu lay beijinhos Nami-chan.

      Excluir
  12. Que lindo, amei o tuto super perfeito *3*
    Sweet Love

    ResponderExcluir
    Respostas
    1. Hihi contente que tenha gostado.

      Excluir
  13. Que menu lindo, gostei :3
    Ótimo tutorial !
    cr4zy-world.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigada Alisson, fico contente que tenha gostado.

      Excluir
  14. Legal =)
    Talvez vou usar no proximo template!
    Estou seguindo, se puder seguir e votar na enquete agradeço: http://rain-of-shine.blogspot.com.br/
    Beijinhos

    ResponderExcluir
    Respostas
    1. Yo, yo obrigada por seguir faço sim uma visitinha lá.

      Excluir
  15. Ele é lindo :3
    novajuventudexxi.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Verdade ^^ Gostei do pisca pisca dele

      Excluir
  16. Lindo, lindo, lindo *3* Vou usar no meu blog de fanfics, fica lecau pra anunciar as atts :3 Adorei ♥

    Sixteen Springs ❉

    ResponderExcluir
    Respostas
    1. Tem toda razão, também estou para usar no meu de livros

      Excluir
  17. Yoo wendy-chan, achei muito kawaiii :3

    cantinho-da-modaa.blogspot.com

    ResponderExcluir
    Respostas
    1. Yo,yo fico contente que tenha gostado

      Excluir
  18. Ah que lindo. Seu layout é maravilhoso. ♥

    Seguindo :*

    www.chitafilo.com

    ResponderExcluir
    Respostas
    1. Obrigada, ^^ e obrigada por seguir

      Excluir
  19. Muito perfo esse menu *--*, amei *-*

    ResponderExcluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram