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 != ""'>
<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 != ""'>
<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUHI3UxBVh-zh5ymQMyD5RHd4Uef_uGmbaLEzf5EjCKk9rFrHYxSLNmIlJ9MgMDHmnL57xTg-fLvDknfjE4g9331azzBAG7eR11oTqIDfq_sG8fZB3fjpaYxBAhtufpBSSc6jYUA/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUHI3UxBVh-zh5ymQMyD5RHd4Uef_uGmbaLEzf5EjCKk9rFrHYxSLNmIlJ9MgMDHmnL57xTg-fLvDknfjE4g9331azzBAG7eR11oTqIDfq_sG8fZB3fjpaYxBAhtufpBSSc6jYUA/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUHI3UxBVh-zh5ymQMyD5RHd4Uef_uGmbaLEzf5EjCKk9rFrHYxSLNmIlJ9MgMDHmnL57xTg-fLvDknfjE4g9331azzBAG7eR11oTqIDfq_sG8fZB3fjpaYxBAhtufpBSSc6jYUA/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?
