• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

1 de janeiro de 2013

Títulos de gadget em hover e numerados

Tumblr_m6aiijc3dz1r9zrppo1_500_large
Olá gente!!!
estou muito feliz pois irei postar o primeiro tutorial do ano aqui no blog, mais ao mesmo tempo com um pouco de raiva, o menininho aqui da minha rua quebrou uma das câmeras de segurança que tenho aqui em casa, mais meu pai conseguiu concertar, e todos gostaram do novo layout.
No tutorial de hoje, todos os créditos vão para: P.S.H
Como vi vários comentários pedindo esse tutorial de como colocar o título dos gadgets assim como o nosso, em hover quando passa o mouse sem ser imagem, trouxe ele para vocês aprenderem, é mais simples do que parece e o resultado fica super lindo não é?!
E caso a visualização anterior falhe, temos imagens:



Para ver melhor as imagens clique nelas.
Então vamos aprender esse tutorial super interessante?
Bom, na verdade esse hover, não é nada mais nada menos que duas imagens, uma faixinha é para ficar com o número em cima, e a outra e para o nome do gadget, baixe os psd's se querem modificar as cores:



Tentando é o nome da caixa onde está todas as faixas.
tentei é o nome da div da faixa de nome
denovo é o nome da div da faixa de numeros

Cole esses três códigos abaixo, acima de ]]></b:skin>

.tentando {width:310px;overflow:hidden;margin:-10px;-webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out;}


 .tentei {background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXM8G3JC7uefRsFSrTG7id6CvBe_SnoSbnoYn7-yU7hgvDNE0WPOaucD8DuH0OHKqokByVt7VdcYUbcxbGgWpkoumNkCz6xhcYbAbjF273RlhNybFaUImL7tRBsAXo-5UrvvWWkOKkDX5s/s1600/grande.png');width:240px;text-align:left;height:28px;padding-top:2px;line-height:30px;color:#fff;float:left;background-position:-30px 0px;-webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out;font: 20px 'Yanone Kaffeesatz', sans-serif; color: #D57996;padding-left:10px;text-shadow:1px 1px 0px #f4c4d3, -1px -1px 0px #840C32;font:25px 'piximisa';}


.denovo {background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgBqCpLMSy1LMDsH9TIa2I-Ns-8vqtumTuPFNdt3w982KtN0MwAA-p6LoBqFV9KlziEfsYgvgLBUVNt0kpffRmX5ru1FcYYLOzyDrbl-WD_BanF-weseQbaRkA22gdl1Synt-eoaKuXmPm/s1600/pequena.png');width:45px;height:30px;line-height:30px;color:#fff;float:left;margin-left:-5px;-webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out;padding-top:0px;padding-right:10px;text-align:right;color: #AD1F4C;padding-left:10px;text-shadow:1px 1px 0px #d56f8f, -1px -1px 0px #840C32;font:25px 'piximisa';} .tentando:hover .tentei {width:175px;background-position:-95px 0px;} .tentando:hover .denovo {width:110px;} @font-face {font-family: "piximisa"; src: url('http://static.tumblr.com/jis8eac/6hamei3uu/piximisa.ttf');}

As imagens estão em negrito, modifique as cores de acordo com sua preferência.
Agora iremos aplicar esses títulos de gadget, bem, para isso teremos de entender que todos os gadgets que iremos aplicar terão de ficar sem título de gadget, ou seja, se você tiver um título de gadget, remova ele e fique só com esse código:


<div class="tentando" ><div class="tentei">Welcome</div><div class="denovo">01</div></div>
<br>
“SAUDADE É UM POUCO COMO FOME. SÓ PASSA QUANDO SE COME A PRESENÇA. MAS ÀS VEZES A SAUDADE É TÃO PROFUNDA QUE A PRESENÇA É POUCO: QUER-SE ABSORVER A OUTRA PESSOA TODA. ESSA VONTADE DE UM SER O OUTRO PARA UMA UNIFICAÇÃO INTEIRA É UM DOS SENTIMENTOS MAIS URGENTES QUE SE TEM NA VIDA.— CLARICE LISPECTOR” 

No lugar do negrito, você deverá mudar para o nome de ser gadget, e o que está em roxo, você muda para o número do gadget, e em itálico, você coloca o que irá ter no gadget, espero que tenham entendido, é mais fácil do que parece, sou eu que não sei explicar bem mesmo, bom, irei ressaltar aqui de novo que todos os créditos vão para o P.S.H pois achei lá, e fiz minhas modificações para o blogger, então se rebloggarem, creditem eles.


19 comentários:

  1. O Layout esta lindos ! Feliz Ano Novo
    o tutorial é de mais acho que eu irei usar em algum lay meu rs'
    bjs

    ResponderExcluir
    Respostas
    1. que bom que gostou do novo layout linda! e se usares ficarei grata, irá ficar lindo com certeza!

      Excluir
  2. Adorei o tutorial, confesso que achei que o título fosse normal, mas sem querer passei o mouse por cima e vi que era hover, desde então comecei a babar o efeito aushuahsauhsausha
    Já até coloquei nos favoritos, acho que no próximo lay eu coloco o efeito :)
    Beijos Feita de Rubis

    ResponderExcluir
    Respostas
    1. suahhus que bom que gostou kk, fico agradecida por salvar nos favoritos <3

      Excluir
  3. MEU DEUS QUE MÁGICO EU FALO PRA VC MUITO OBRIGADO MESMO *U* EU ADOREI ESSE TUTO *U* EU FICO DE 2 EM 2 MINUTOS PASSANDO O MOUSE ALI KKKKKK MUITO OBRIGADO ^^

    JOVENCLUBE (PERFIL)

    ResponderExcluir
  4. Amei o modelo, principalmente o tutorial <33 Flor, preciso da sua ajuda! Dá uma olhadinha lá no meu blog de testes, e verá que esse efeito está mio alinhado para esquerda. Como faço para arrastá-lo um pouco mais para a direita? Se não entender, te explico melhor [; Veja aqui >> http://teste-ef-uu.blogspot.com.br/ Beijos, :*

    whatever-it-takes-s2.blogspot.com.br

    ResponderExcluir
  5. Nossa, nem vi o antigo lay, mas sei que esse tá perfeito. rsrs Adorei!
    Que efeito legal, acho que no próximo lay já vou testar. Salvei nos favoritos! ^-^

    Bjs
    garotas-cupcakes.com

    ResponderExcluir
  6. Não entendi '_' Tem como postar denovo? Só que dá proxima vez mais detalhado, sou "meio" burro.

    ResponderExcluir
  7. Corrigindo o comentário meu: Como retira os títulos? Pelo Gadgets (vai la no layout, clica em editar e apagar o nome) ou por html e onde eu coloco o ultimo codigo? Acima de ]]>. O código é o que tem o texto da Clarice Lispector.

    ResponderExcluir
    Respostas
    1. Você vai no gadget e deixa o nome em branco!
      Aproveitando o comentário, AMEI o tutorial, vou colocar no meu blog. Obrigada :)

      Excluir
  8. Amei! Bem, como eu já troquei de layout, vou usar o truque no próximo! Pequena Estilista

    ResponderExcluir
  9. Amei! Coloquei nos favoritos e vou usar *u*
    The Cupcake Design // Visita?

    ResponderExcluir
  10. Flor, como que usa esses negocios q tem que baixar?
    Beijos
    http://mundomaniateen.blogspot.com.br/

    ResponderExcluir