• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

6 de fevereiro de 2013

Ribbon Hover no título dos gadgets + faixinhas para sidebar

Tumblr_lvq5t1lzwb1r6eaq7o1_500_large
Alooõuzo...ué é um comprimento diferente
Trouxe pra vocês um tutorial super genial que achei no blog Keep This Dream, mais os créditos vão para Smile Cherry e ao Kawaii World também.

A Megan já postou aqui no blog como fazer gadgets hover como os daqui, mais o tutorial de hoje é diferente, vejam o resultado aqui 
Passaram o mouse em cima dos gadgets?
 legal o efeito né, mais o melhor de tudo é que pode ser com a imagem de ribbon que você quiser, então vocês podem usar e abusar da criatividade.

Acima de ]]></b:skin> cole:

sidebar h2 {

font-family: Cookie; /*Nome da fonte*/
font-size: 25px; /*Tamanho da fonte*/
color: #626DBC; /*Cor da fonte*/
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr-Bg-TJMLQ8qwLZSIAWypO-6tCZrwds4xtTi51iY1mvXU1nPBeEWsCT_Gu3ueBQQWZT5hCn-nvO2E0oMZNAjwaI7G1cNKZHGEdAk2lOgUxH13b9z4mSdIxasRTF-xG1yVbhqyqY_O6Xo/s1600/SIDEBAR+TITULO+2.png) no-repeat center; /*Sua faixa e posição*/
height: 29px;/*Altura da imagem*/
width: 280px; /*Largura da imagem*/
text-align: center; /*Alinhamento do texto*/
margin-top:-5px; /*Altere se necessario*/
margin-left:-9px ; /*Altere se necessario*/
margin-bottom:10px ;
padding:5px;
width:112%; }
.sidebar h2:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN8m9OAaXxz_gVnqo8CpZpXoAOeEvRPPYYuUoe28NlYdHTXN73b68xCxTlAGKL0v2Del5Qn6bx-OHw9liwOmjHJRrjJWaBKCWnvTR-DkVS0JmP8prxDQ9mGlq363U1YW1pR4RmCNJtoUk/s1600/SIDEBAR+TITULO.png) no-repeat center; /*Sua faixa e posição*/
}

Viram o que está em negrito?! aquelas são imagens reservas, isso quer dizer que vocês poderão trocar a imagem, mais quem ficar com preguiça pode usar essas mesmo né, ou podem usar uma dessas:

imageimageimageimageimageimage
imageimage
imageimage
imageimage
imageimage
Créditos das faixinhas:     
ou vocês pensaram que eu que fiz, eu ein eu tenho preguiça
Espero que tenham gostado do tutorial.

aham agora tenho certeza que meu banner é rosa T_T

37 comentários:

  1. OMG!!Que lindos !me apaixonei *-*! com certeza usarei no meu próximo layout !obrigada

    ResponderExcluir
  2. Esse efeito aqui ficou lindo!
    Hoje procuro lays mais simples, mas quem sabe um dia eu use? Amei!

    Beijão!
    Meu jardim Secreto

    ResponderExcluir
  3. Que efeito lindo! AMEI! Acho que vou usar no meu blog...
    Seu blog é muito lindo! Estou te seguindo, dá uma passadinha no meu?
    Diamante Negro

    ResponderExcluir
  4. Respostas
    1. "Olá, sou a Shiro. Pedi à Andreia que traduzisse isto por mim para fazer-lhe saber com as minhas palavras o assunto (:

      Vejam, no meu blog publico icons criados por mim e não me incomoda que as pessoas os usem porque é algo publico. No entanto, especifico em cada post em que publico algo feito por mim, que é unicamente para uso pessoal e que não está permitido distribui-los.

      Primeiramente, desculpo-me; isso de que já tinham falado comigo é um engano. Foi outra administradora de outro blog brasileiro que me pediu autorização para publicar e sem a minha respostas, publicou-os igualmente.
      Agora, bem, o assunto do vosso blog. O 14-11-2012 publicou-se no vosso blog no post "Avatares 100x100" (link: (http://adolescentenerd.blogspot.com.br/2012/11/avatares-100-x-100.html ), icons que modifiquei e fiz; a mim ninguém do vosso blog perguntou-me se podia publica-los, e como tinha comentado antes, eu escrevi no post "Nao distribuir" (link: http://brandnewancient.blogspot.com/2012/11/46-gifs-46-icons.html). Eu publiquei o meu post no dia 12-11-2012 mas para a minha surpresa, porque hoje descobri que foi publicado no vosso blog no ano passado dois dias depois de eu o ter feito.
      Soube disto ao ver as estatísticas do meu blog, as principais fontes de trafico e uma visita provinha desse post. E assim foi como fiquei a saber disto.
      Espero que vocês possam compreender- Eu apenas quero que se faça respeitar a minha palavra sem dar muitos incômodos a vocês e/ou às demais donas do Adolescente Nerd.
      Por isso, gostaria que retirassem esse post do vosso blog. Sem mais que dizer e agradecendo pela vossa atenção, despeço-me.
      Shiro."

      Excluir
    2. Claro que retiro, valeu por avisar ^_^

      Excluir
    3. mais estava com créditos ao seu blog, mais irei retirar sim

      Excluir
    4. O.o mais esse post eu creditei na época

      Excluir
  5. lindoo! Eu adorei o efeito.

    chuvasdioutono.blogspot.com.br

    ResponderExcluir
  6. amei esse efeito bem cute quando for fazer meu próximo lay eu uso

    anotherworld-oficial.blogspot.com

    ResponderExcluir
  7. Amei mto cute sao fofinhass

    tem um game no meu blog valendo divulgação, participa?

    http://docemundokawaii.blogspot.com.br/2013/02/game-valendo-divulgacao.html

    ResponderExcluir
  8. o efeito fica muito bom, bastante diferente e profissional. bezzo, sarah
    http://svt-pistache.blogspot.com.br/

    ResponderExcluir
  9. Nossa, muito lindos, amei! Fica perfeito né?

    http://newsdayoff.blogspot.com.br/

    ResponderExcluir
  10. Olá , amei essas faixinhas ...
    seu blog fixou estilo tumblr rsrs !
    beijinhos!
    seguindo #
    segue ? Meta : 70 seguidores

    Little-WorldOficial.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. tá boa sorte na meta, vou seguir, e o blog ficou mesmo estilo tumblr mais eu não fiz não hehe foi a Mega e a Hanna

      Excluir
  11. Que bom que gostaram do meu tuto! Então, ali no Créditos ao Smile Cherry, é que antigamente o nome do blog era Smile Cherry, mais agora é Keep This Dream mesmo. :)

    KeepThisDream.blogspot.com

    ResponderExcluir
  12. Não vou usar no meu novo layout, por que eu já coloquei uma em que me apaixonei, mais em algum layout ou layout free eu uso o3o
    #May-Sun

    Nosso Diário Nada Convencional

    ResponderExcluir
  13. Peguei uma faixinha :D Já estou usando no blog!

    www.amoraoprimeirorimel.blogspot.com

    ResponderExcluir
  14. Muito bonito mesmo amei,e o seu blog é demais!

    ResponderExcluir
  15. não está pegando no meu blog mas o tuto é bem fácil de seguir

    ResponderExcluir
  16. Talvez vou pegar,se pegar deixarei créditos

    ResponderExcluir