Faixinhas numeradas no titulo das gadgets !

Yoo ~~ 

Bom, hoje venho ensinar á vocês, de como colocar essas faixinhas numeradas no titulo da gadget de vocês ! É bem fácil, mais um pouco complicado, então você tem que prestar bem atenção, para poder fazer bem certinho ! 

Vamos lá o3o


Vale lembrar que você tem que fazer um ribbon (faixa) para cada gadget. Vá no teu HTML eprocure pelo título do seu gadget. Por exemplo, o gadget de "Home", o meu está assim:

<b:widget id='Image1' locked='false' title='Home' type='Image'/>

A parte em negrito é a ID e em itálico é o que você achou ao procurar o título do seu gadget. Copie o ID e agora procure por ]]></b:skin> e logo acima você vai colar esse código:
#IDdoGADGET h2 { background: url('LINK DA FAIXA') no-repeat; color: transparent; width: 310px; height: 75px; margin-top: -30px; margin-left: -35px; float:left; }
Aonde está em negrito você vai trocar pela ID do gadget, e em itálico, é a URL do ribbon, você tem que repetir esse tutorial diversas vezes para aplicar em todos, colocando ID's e imagens diferentes (avá)
Mas calma, o tutorial ainda não acabou. Agora você deve procurar por .sidebar .widget { e dependendo do seu HTML, deve estar mais ou menos assim:
.sidebar .widget {
border-bottom: 2px solid $(widget.border.bevel.color);
padding-bottom: 10px;
margin: 10px 0;
}
Apague esse código por completo e coloque esse no lugar:
.sidebar .widget {background: #fff;padding-left: 10px;padding-bottom: 10px;padding-right:10px;padding-top: 5px;margin: 30px 0; }
Você deve alterar o que está destacado em negrito para que as imagens fiquem nos lugares certinhos.

16 comentários

  1. Anônimo23.12.12

    Que legal,adorei!

    ResponderExcluir
  2. Era isso que estava procurando ! Obrigada, Thiago :D
    Tenho uma dúvida: Assim se eu quiser essas faixinhas estilo tumblr mas não quiser numerada como faço para usar ??
    Tutorial bem explicadinho, caso não conseguir resolver minha dúvida vou usar ele U_U

    Beijos <3

    ResponderExcluir
    Respostas
    1. Tenho mais duas perguntinhas ^.^
      Porque a ask está meio desativada ? E onde estão as postadoras ?
      Não quero que me leve a mal, nem nada. Mas a dias que venho percebendo apenas post's seus. E sempre que entro no tumblr de respostas ele está sempre na mesma pergunta :3

      Beijos <333

      Excluir
    2. Anônimo23.12.12

      Coloca a sigla do seu blog :)

      Excluir
    3. Pois, é nem eu sei u.u ! E a Ask, ta meio assim, desativada, como podemos dizer, porque ninguém mais mandou pedidos :/

      Excluir
    4. No lugar do numero, você pode colocar as siglas o seu blog, um efeito slá ! Tudo vai da imaginação KKKK
      Um beijo :3

      Excluir
  3. Thiago, o Levi precisa da tua ajuda na revista, você tem face? Poderia falar com ele? Obrigada!

    E adorei o tuto, nunca tinha visto tão bem explicado!

    Bjs
    garotas-cupcakes.com

    ResponderExcluir
    Respostas
    1. Eu ja convidei ele no facebook !
      Mais fala pro Levi, deixar uma postagem em rascunho no blog que eu leio e respondo !
      Beijos :3

      Excluir
    2. Thiago, as faixinhas que eu fiz ficam cortadas na caixinha da sidebar. O que faço?

      Excluir
    3. Primeiro se no .sidebar .widget { ou .sidebar h2 { não tem nada editado ! Se estiver é só apagar os códigos editados e refazer o tutorial !

      Excluir
  4. Adorei!,,vou usar no próximo layout..

    http://kawaii-little-things.blogspot.com.br/

    ResponderExcluir
  5. Dúvida* como faço pra por também o gadgets com borda e sombra junto com esse codigo? eu tava tentando mais nao fica...

    ResponderExcluir
    Respostas
    1. http://birthdaycakeoficial.blogspot.com.br/2012/10/tutorial-borda-e-sombra-nos-posts-e.html

      Excluir
    2. awn oks, muuito obg *--*

      Excluir
  6. Anônimo3.6.13

    CARAAAAA eu nunca consigooooo! já tô desistindo de colocar uma faixinha! N-U-N-C-A dá certo! Eu faço tudo direitinho tudo certinho mais n dá! Eu já tentei todos os tutoriais me ajuda! por favor!

    ResponderExcluir

- Se quiser um post, peça na ask !

- Se não gostou, não use palavras ofensivas. Ninguém precisa rebaixar-se a tanto para expressar a opinião.

- Leio todos os comentários, respondo e retribuo sempre que o tempo deixa.