Pesquisa personalizada

terça-feira, 1 de outubro de 2013

Como centralizar os widgets no Blogger





Geralmente os widgets colocados no Blogger não vem centralizados, e um pouco de conhecimento em CSS é necessário. Neste tutorial apresento várias maneiras de centralizar um ou todos os widgets.

Antes de tudo, é necessário lembrar que ao mexer no layout de seu blog é por sua conta e risco. Se você não tem muita familiaridade com isso, nem tente. Eu não me responsabilizo pelo que venha a acontecer. E lembrando também de sempre fazer um backup de seu modelo caso algo dê errado.

Como exemplo, vou usar um widget que está na sidebar do blog, uma imagem que fiz contra a reforma ortográfica:

Amo o trema!

Centralizar um único widget usando CSS

1 - Dentro do próprio layout

Procure pelo widget indo em Modelo >> Editar HTML

Qualquer widget no Blogger tem essa estrutura de código:

<b:widget id='HTML9' locked='false' title='Não a Reforma:' 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>
                  <div class='widget-content'>
                    <data:content/>
                  </div>
                  <b:include name='quickedit'/>
                </b:includable>
              </b:widget>

A parte destacada em vermelho <data:content/> é o código que representa o conteúdo do widget. É só envolvê-lo com a div,

<b:widget id='HTML9' locked='false' title='Não a Reforma:' 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>
                  <div class='widget-content'>
        <div style='text-align: center;'><data:content/></div>
                  </div>
                  <b:include name='quickedit'/>
                </b:includable>
              </b:widget>

2 - No próprio widget

Ao colocar o conteúdo, seja uma imagem, código HTML/CSS/JavaScript ou texto, podemos envolvê-lo com uma tag div ou p. Como exemplo, vou usar a mesma imagem do código acima:

a) Usando a tag div:

<div style="text-align: center;">
<img border="O" alt="Não ao acordo ortográfico!" width="140px" src="http://4.bp.blogspot.com/_okYQdwGKpvE/SP-GCtFoN5I/AAAAAAAAB50/pRRlkb-m7V4/s400/reforma.png" height="75px" title="Não ao acordo ortográfico!" />
</div>

b) Usando a tag p:

<p align="center" >
<img border="O" alt="Não ao acordo ortográfico!" width="140px" src="http://4.bp.blogspot.com/_okYQdwGKpvE/SP-GCtFoN5I/AAAAAAAAB50/pRRlkb-m7V4/s400/reforma.png" height="75px" title="Não ao acordo ortográfico!" />
</p>

3 - Definindo um estilo só para um único gadget:

a - Defina uma classe (class). Usando o mesmo código, como exemplo, MeuEstilo(como você desejar):

<div class="MeuEstilo">
<img border="O" alt="Não ao acordo ortográfico!" width="140px" src="http://4.bp.blogspot.com/_okYQdwGKpvE/SP-GCtFoN5I/AAAAAAAAB50/pRRlkb-m7V4/s400/reforma.png" height="75px" title="Não ao acordo ortográfico!" />
</div>

Depois indo em Modelo >> Personalizar >> Avançado >> Adicionar CSS, coloque a regra CSS da forma:

.MeuEstilo
{
  text-align: center;
}

b - Usando o ID do seu widget

Depois indo em Modelo >> Personalizar >> Avançado >> Adicionar CSS, coloque a regra CSS da forma:

#ID-DO-SEU-WIDGET {
text-align: center;
}

Para achar o ID do seu widget, vá em Layout >> clique no widget desejado, e na popup que se abre, o id está na barra de endereço, conforme na imagem abaixo:

ID do widget

Para o meu widget de exemplo, o ID é HTML9, e ficaria assim:

#HTML9 {
text-align: center;
}

Centralizando todos os widgets de seu blog

Para centralizar todos os widgets do seu blog, devemos aplicar uma regra geral em CSS. Vá em Modelo >> Personalizar >> Avançado >> Adicionar CSS, coloque a regra CSS da forma:

.widget {
text-align: center;}

Outra forma seria colocar esse estilo direto no layout, indo em Modelo >> Editar HTML >> Procurar e clicar em <b:skin>...</b:skin> e colar antes do fechamento da tag.

Et voilà! Coloquei todas as possíveis soluções. E aí, gostaram?


Permalink:





Sobre o Autor:
Crazyseawolf Para saber mais sobre o autor deste blog, visite o seu perfil no Google+ ou este link . Para enviar uma mensagem, clique aqui . Para outras informações, leia o FAQ .



9 comentários :

  1. Cara parabéns, tinha um tempão que procurava isso.... obrigado!

    ResponderExcluir
  2. Eu tinha tudo centrado no meu blog, exceto os URLs da "Lista de links" e isso me deixava irritado.
    Googlei durante horas á procura da solução, visitei n de sites, li n de artigos, fiz n de modificações ao código HTML e nada resultou.
    Mas como eu não gosto de ir a fóruns meter questões, a minha teoria é "Googla que encontras", insisti em procurar, e PORRA, finalmente encontrei a solução no seu blog, era tão simples, bastava meter no CSS:
    .widget {
    text-align: center;]}

    É isto que eu aprecio num blog, ensinar descomplicando.

    Muito, muito obrigado

    Os meus cumprimentos: Victor

    ResponderExcluir
    Respostas
    1. Victor, obrigado pela visita e pelo comentário.
      Um detalhe, tem um colchete estranho no código, erro meu!

      .widget { text-align: center;}

      Um abraço!!!

      Excluir
  3. Ah esqueci de dizer, Adblock Plus desativado no seu site ;)

    ResponderExcluir
    Respostas
    1. Ora essa, obrigado eu :)

      Não gostei do resultado de tudo centrado, deixei os títulos centrados, e acabei mudando os textos dos widgets para:
      .widget { text-align: left;}

      Abraço ;)

      Excluir
  4. Parabéns cara, muito útil... Estava procurando isso faz tempo! =P

    ResponderExcluir

Pessoal, comentem, críticas e elogios serão bem aceitos. E eu respondo, posso demorar mas respondo. Esse velho lobo do mar tarda mas não falha!!!!

Leia antes a minha Política de Comentários.

Se quiser deixar o link de uma postagem sua, utilize o código abaixo trocando o que está escrito em letra maiúscula:

<p><abbr><em><strong>SEU NOME</strong> - último post do blog... <a href="<strong>LINK-DA-POSTAGEM</strong>"><strong>TÍTULO DA POSTAGEM</strong></a></em></abbr><p>

Related Posts with Thumbnails
Google
 
 
Template Denim, criado por Darren Delaye, customizado por Crazyseawolf.