18/09/2012

Tutorial: Personalizar cada gadget da sidebar

||

Yo estou atualizando esta postagem por perceber que praticamente ninguém consegue executa-la é percebi que minha explicação fico muito vaga, então farei mais detalhada espero que consigam entender agora, peço desculpas pelas complicações. Nesta postagem vou mostrar como personalizar cada gadget da sidebar o deixando colorido ou com formas diferentes.A postagem ficar um pouco grande mas detalhadamente. Vamos lá.



1.Para começar o efeito não vai funcionar se você já tiver códigos de sidebar dentro de seu HTML então terá que deixar tudo transparente e adicionar uma por uma. Para isso vá ate Modelo>> Personalizar>> Avançado>> Plano de fundo da barra lateral. Ao lado terá duas caixinhas então remova a cor deixando transparente. Salve e vá ate seu HTML. 

Então procure por /* Widgets ou por .sidebar .widget { esse padrão é para o modelo travel. Mas fiz teste em outros modelos é funcionou mas procure só por  /* Widgets se seu modelo já possui a sidebar transparente pule essa etapa e vá para a 2:

Abaixo do código procurado você vai achar algo similar a isso:

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

Apague toda área marcada em azul então salve.

2. Agora escolha um gadgets e aperte Ctrl+F e procure pelo nome dele. Exemplo o meu tá escrito *Elite* então procurei por esse nome pelo nome e você faz o mesmo.

Agora ira aparecer o código do gadget que você procuro mais ou menos assim:

<b:widget id='HTML1' locked='false' title='*Elite*' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>

A onde esta em vermelho é onde fica o ID do gadget dele sempre fica antes do nome, nesse caso pegue o ID e guarde porque é dele que vamos precisar. Agora procure por ]]></b:skin> e depois dele cole esse código:

    #ID-GADGET {
    background: #fff; /*Cor de fundo do gadget*/
    }
    #ID-GADGET h2 {
    /*Estilos para o título do gadget*/
    Font-family: Verdana;
    color: #000;
    font-size: 14px;
    }

Agora só substituir onde tá ID-GADGET pelo ID que você pego antes. Exemplo:

    #HTML1 {
    background: #fff; /*Cor de fundo do gadget*/
    }
    #HTML1 h2 {
    /*Estilos para o título do gadget*/
    Font-family: Verdana;
    color: #000;
    font-size: 14px;
    }

Nunca apague o h2 é ele que diferencia o fundo para o titulo do gadget. Agora é só arrumar como desejar a primeira parte é o fundo do gadget coloque sombra bordas o que desejar já a segunda parte é o título do gadget. O código é apenas uma base para vocês editarem como desejarem. Espero que agora consigam fazer. Fiz o teste é funciono direitinho Kiss.

14 comentários:

  1. Esse tutorial é válido pra qual modelo?! '-'

    ResponderExcluir
    Respostas
    1. Ohayo Biah ^^
      Ele e valido nos modelos travel do blog, eu não fiz o teste em todos mais no travel foi direitinho

      Excluir
  2. o meu não aparece nda , '
    de jeito nenhum ',
    ja tente varias vezes :/

    ResponderExcluir
    Respostas
    1. Tem certesa qual modelo você usa?
      Ali ele esta vazio tenque personalizar eu apenas coloquei a base, eu fiz o teste aqui e funcionou

      Excluir
  3. O meu eu já tentei, tentei e não aparece nada ,'

    ResponderExcluir
    Respostas
    1. Estranho... eu vou fazer o teste se não funcionar irei refazer o código para ver se ele funciona ok?

      Excluir
  4. Não funcionou,eu uso o modelo marca d`agua.Entre no meu blog XD http://clubpenguinhensi.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Hensi refiz o tutorial percebi que falto uma pequena parte fiz o teste no modelo d'agua e funcionou perfeitamente. Mas darei uma olhadinha sim

      Excluir
  5. não funcionou no meu blog. uso o template espetacular do blog.

    ResponderExcluir
    Respostas
    1. Compreendo, estranho fiz o teste em quase todos os modelos e funcionou perfeitamente. Deixe a gadget transparente e depois v[a em ]] é lá cole o código:

      #ID-GADGET {
      background: #fff; /*Cor de fundo do gadget*/
      }
      #ID-GADGET h2 {
      /*Estilos para o título do gadget*/
      Font-family: Verdana;
      color: #000;
      font-size: 14px;
      }

      E mude a parte em negrito colocando o ID do gadget que quer personalizar. ^^

      Excluir
  6. Anônimo23/5/14

    O meu deu erro e não conseguir salvar a parte de apagar :/

    ResponderExcluir
  7. Meu deus, menina! Muda o esquema de cores desse blog pois nao da pra ler nada! Claro de mais!

    ResponderExcluir
  8. Anônimo13/1/15

    Não da certo af '-'

    ResponderExcluir
    Respostas
    1. Precisa deixar os gadgets sem edição alguma transparentes e colocar o nome ID corretamente.

      Excluir

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