23 março 2013

Faixas numeradas nos títulos dos Gadgets.


Oiee meus kawaiis *u* então hoje eu venho com um tutorial muito bom que foi pedido do Kauê, são as faixinhas númeradas no titulo dos Gadgets iguais as daqui do TF. é um tutorial fácil mas tem que tomar muito cuidado por um pequeno erro cometido, não irá dar certo. continue lendo para ver o tuto.  
Bora lá o tuto foi achado no Birthday então os créditos são todos de lá.

Começando, só para começar faça uma cópia do seu template caso algo de errado você poderá consertar.

Primeiro tenha as faixinhas que você quer usar prontas, com o titulo que você quer por nos gadgets, todas bonitinhas e hospedadas em algum site (recomendo Picassa)

Vá no seu HTML e procure pelo nome do gadget que você quer por a faixinha, eu vou procurar por "Home"
no meu caso ficou assim 

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

Em negrito é o ID do gadget  e em itálico foi o que você procurou.

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; }
Onde tem IDdoFADGET você vai por a ID do Gadget que você procurou anteriormente. e onde tem LINK DA FAIXA você vai por o link da faixinha que voc~e já deve ter feito (ava jura?) repita o mesmo processo para todos os gadgets que você que por a faixinha numerada, alterando a ID de cada um deles e as faixinhas (ava) calma ai, ainda não acabou! depois de ter aplicado em todos os gadgets, você vai procurar por .sidebar .widget {  que muda de template para template, mas 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 substitua por esse

.sidebar .widget {background: #fff;padding-left: 10px;padding-bottom: 10px;padding-right:10px;padding-top: 5px;margin: 30px 0; }


Altere o que está em negrito para melhor as faixinhas ficarem no seu layout! visualize e salve.

Em alguns Tumblr's de HTML desponibilizam as faixinhas a maioria em PSD (formato photoshop) no próximo post eu trago algumas já prontinhas em Png.



Créditos do tutorial : Birthday Cake

8 comentários:

  1. Linda, troquei de blog e sou sua afiliada(kawaiiland)
    O meu novo é o Antes dos 15
    e a URL é
    www.antesde-fazer15.blogspot.com
    queria que você atualizasse e seguisse o blog ok??
    Você já está lá na elite beijos
    -celly

    ResponderExcluir
    Respostas
    1. Oiee minha flor ><

      Já estou seguindo lá viu!

      ja vou por na elite

      Excluir
  2. nossa nem sabiaaa adoooreiii o/
    acervo-de-livros.blogspot.com

    ResponderExcluir
  3. ja tentei esse e o da Birthday Cake nao deu certo !
    estou tentando me ajuda porfavor !
    http://www.paraisohtml.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Esse e o do Birtday Cake é o mesmo!

      Não tem erro flor, você tem que procurar o ID do gadget, e tipo assim



      Copia e cola no bloco de notas, world qualquer coisa ai copia isso

      #IDdoGADGET h2 { background: url('LINK DA FAIXA') no-repeat; color: transparent; width: 310px; height: 75px; margin-top: -30px; margin-left: -35px; float:left; }

      E faz as alterações que esta pedindo (Id do gadget e link da faixinha)

      e cola em cima de ]]> para cada gadget vc vai fazer a mesma coisa pesquisar o nome dele, copiar a ID e modificar o código acima, e o importante não pode mudar o nome do gadget depois se não a faixa some, depois de repetir o processo para todos os gadgets vc vai em .sidebar .widget {
      e apaga isso

      .sidebar .widget {
      border-bottom: 2px solid $(widget.border.bevel.color);
      padding-bottom: 10px;
      margin: 10px 0;
      }

      e cola isso no lugar
      .sidebar .widget {background: #fff;padding-left: 10px;padding-bottom: 10px;padding-right:10px;padding-top: 5px;margin: 30px 0; }

      Excluir
  4. Obrigado eu consegui agora fazer isso e porque meu HTML nao dava ! eu troquei de template ai deu visita lá !
    se tiver a mesma coisa e pq eu ainda to auterando o template ! mais ja ja vou colocar


    paraisohtml.blogspot.com

    ResponderExcluir

» Nossas redes sociais: Fã page | | Instagram | | Pinterest

» Críticas construtivas são sempre bem vindas.

» Deixe o link do seu blog no final do comentário e retribuiremos a visita com carinho.

» Lembre-se, tudo aqui é feito para você, então fique a vontade para pesquisar,ler,comentar e pedir postagens.

© BELEZA NERD 2013 - 2019. Todos os direitos reservados.
Layout e codificação: GLEICY HANER - DESIGNS E FOTOGRAFIA .
Tecnologia do Blogger.
imagem-logo