Como estilizar um widget em particular

Vamos tratar aqui de Widgets a pedido de um leitor. Para começarmos temos que entender onde estão os widgets no código XHTML. Por regra do Blogger os widgets ficam principalmente no id SideBar-Wrapper, mas podem estar em qualquer lugar em um Blog dependendo de quem criou o template.
Todo Widget tem um padrão de ínicio de código:

<b:widget id='HTML5' locked='false' title='Visitas Recentes' 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>

Vendo o código vemos como podemos seta-los na folha de estilo. Temos um id que neste exemplo é HTML5, temos um elemento H2 que também é uma classe, logo em seguida temos uma condição if que determina dentro de um loop que se condição igual a data do título então deve mostrar a data e por fim temos uma classe widget-content.

Para formata-la do jeito que desejar terá apenas que estilizar estes elementos conforme seu gosto. Antes de qualquer formatação que você faça será interessante estudar cada widget e seu código em um blog teste até você se familiarizar com cada um para poder fazer alterações mais extravagante.

Em próximo artigo vamos estilizar o widgets Links recomendados para todos terem uma idéia exata de como fazer.

Bom estudo

Subscreva o CSS-Desvendado completo!
Subscreva CSS - Desvendado por Email