Caso alguma imagem do blog não esteja aparecendo, por favor, avise nos comentários da postagem em questão!

31/10/2012

NOVO: Tutorial - Estilo diferente para cada gadget

Hoje eu vou ensinar para vocês como fazer uma sidebar igual ao do DSM, desgrudada da área de postagem e com um estilo diferente para cada gadget. Pra você entender melhor, usando esse código você poderá colocar uma cor diferente em cada um dos "quadrinhos" da sua barra lateral. Muito show, não é? Qualquer dia, quando eu fizer um novo fundo pro DSM ainda hei de colocar meus gadgets nas cores de um arco-íris pastel... Hehehe...
Mas preste muita, muita atenção nas minhas instruções: vai parecer complicado no início, mas logo você verá que não é nenhum bicho de sete cabeças.

Lembrando que antes de toda e qualquer modificação do seu template, recomenda-se que você faça uma cópia de TODO o código atual ou que faça um backup, para que no caso de acidentes você possa recuperá-lo.

1º Passo - Deixe o fundo da sidebar transparente:

Antes de começar a dar o estilo para cada gadget, precisaremos desgrudar sua sidebar das postagens. Para isso, entre em Modelo > HTML (botão branco ao lado de "Personalizar"). Clique em qualquer lugar do seu HTML e aperte Ctrl + F no seu teclado. Cole na caixinha que abriu (Search) o seguinte código: .main-outer { e aperte a tecla "Enter".

Pode aparecer um código mais ou menos assim:

.main-outer {
  width: 990px;
  display: float;
  margin:0px auto;
  background: url(URL_DA_IMAGEM) repeat-y top center;
  background-position-top: 20px;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

Apague toda a linha em vermelho. Se ao invés de uma imagem, você tiver um código de cor, apague-o também.
Caso não tenha o código acima, procure por: $(content.background.color.selector) {
Vai aparecer um código mais ou menos assim:


$(content.background.color.selector) {
  background-color: $(content.background.color);
}


Apague todo esse código. Caso seu template seja um template padrão do Blogger, pode ser que ele também tenha umas sombras. Para retirá-las, procure pelo código abaixo (pode ser que não esteja completamente igual) e apague-o:

.content-outer {
  -moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
  box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

  margin-bottom: 1px;
}


Visualize seu template para ver se o fundo das postagens e da sidebar ficou completamente transparente. Caso você tenha configurado uma outra cor de fundo que chegue até sua sidebar, procure o código e apague-o.
Agora vamos colocar a cor na área das postagens. Para isso, procure por: ]]></b:skin>
Logo acima, cole o seguinte código:

#main.main.section {
  background: #ffffff;
  border-radius: 20px 20px 20px 20px;
  -moz-border-radius: 20px 0px 20px 0px;
  -webkit-border-radius: 20px 0px 20px 0px;
  -moz-box-shadow: 3px 3px 3px #666666 inset;
  -webkit-box-shadow: 3px 3px 3px #666666 inset;
  box-shadow: 3px 3px 3px #666666 inset;

}

Se o texto ficar muito próximo à borda, acrescente antes de fechar as chaves, o seguinte código: padding: 10px; e ajuste o valor ao espaço desejado. Os códigos em laranja colocarão os cantos arredondados e sombra nessa área. Se não os quiser, pode apagá-los. Visualize seu template e veja se a área dos posts ficou branca. Se não tiver ficado, tente apagar o código e cole-o acima de body {

2º passo - Dando estilo aos gadgets:

Agora vamos dar um estilo diferente para cada um dos gadgets. Para isso, continue no seu HTML. Procure (com o Ctrl + F) pelo título que você colocou no primeiro gadget da sua sidebar. Vamos usar um exemplo: digamos que o título do gadget seja "Seguidores". Procurando pela palavra "Seguidores", vai surgir um código assim:

<b:section-contents id='sidebar-left-1'>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'>

Copie o que estiver escrito depois de <b:widget id=' no meu caso, foi Followers 1, mas se no seu código estiver diferente, copie o que estiver escrito.
Agora procure por: ]]></b:skin>
Logo acima, escreva o nome que você acabou de copiar, colocando antes um jogo da velha e depois abra chaves. Usando o exemplo acima, seu código ficará assim:

#Followers1 {

Agora coloque entre as chaves os códigos que você deseja para personalizar essa área, de acordo com o seu gosto. Vou deixar como exemplo os que usei aqui no DSM, mas você pode usar o código que quiser:

#Followers1 {
  background: #cccccc;
  padding: 10px;
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-box-shadow: 3px 3px 3px #666666 inset;
  -webkit-box-shadow: 3px 3px 3px #666666 inset;
  box-shadow: 3px 3px 3px #666666 inset;
}

Não esqueça de fechar as chaves, heim!!! De acordo com sua necessidade, vá visualizando o template e adicionando códigos antes de fechar as chaves até que fique ao seu gosto.

Agora repita todo o processo com o segundo gadget e com os demais, até o último. Se o seu gadget não tiver título, eu recomendo que você adicione um só para achar o código e depois apague o título. É um pouco complicado, mas o efeito final é incrível, você pode usar todo o seu conhecimento de HTML e sua criatividade para incrementar o código.

Os posts abaixo podem te ajudar a personalizar essa área do seu template:
Inspecionar (Firefox)
Fazer Templates I
Fazer Templates II
Fazer Templates III
Imagens diferentes no título de cada Gadget/Widget

Caso tenha alguma dúvida, deixe um comentário que eu acrescentarei esse detalhe no tutorial. Não estou podendo responder cada um separadamente nos seus blogs, então fique ligado aqui no DSM para ver a resposta!!!

Mil Sweetkisses,
3 Comentários
Comentários

3 comentários:

  1. Gostei do post, alias seu blog também é muito bonito, parabéns ^^

    Gostaria de participar da coluna "Destaque da Semana" lá no meu blog? Se quiser dá uma olhada lá para saber como ♥
    http://himi-tsu.blogspot.com.br/ Tenha uma boa semana!

    ResponderExcluir
  2. não consigo deixar a minha sidebar transparente séra que podia me ajudar?

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...
Posts relacionados