Widgets e Gagets sem mistérios Desvendado

Antes falarmos em Widgets/Gagets precisamos entender como funcionam as coisas dentro do Blogger.
Marcação XHTML sempre será igual em um documento PHP,ASP, ColdFusion, Ruby ou outro qualquer. Para qualquer um entender isso, lógico que irá precisar ter uma noção boa de XHTML.

A mesma regra serve para CSS (Folhas de Estilo). Se você tem noção sobre CSS, verá que qualquer código que a utilize será identificado pelo começo de código <div id="algumacoisa"> </div> ou <div class="algumacoisa"> </div>. Essas marcações indicam um bloco que pode ser um elemento com id único ou uma classe que pode se repetir pela página várias vezes.

Se for em seu código do Blogger em HTML/Expandir Modelos de Widgets, verá que todo código, principalmente da Sidebar- Wrapper, irão conter essas marcações.
Fora isso, também deverá atentar para marcações nativas do XHTML como: h2, p, a, ul, li entre outros.
Exemplo do Widgets Links Recomendados que está em uma Sidebar qualquer:



Observe que existe um id='LinkList1 que identifica este elemento como único. Ele não pode se repetir na página pois contém um id e não uma classe.
Logo em seguida entram código interno do Blogger, mas quero que atentem apenas nos elementos XHTML e CSS. Vamos aos elementos que ele contém para que possa ser estilizado:

Elementos CSS: id='LinkList1'(elemento pai), id='main' e class='widget-content'

Elementos XHTML: h2, ul e um li com elemento (a dos links) que está sendo carregado através de um loop em php.

Sendo assim eu poderia escrever apenas um código CSS para estilizar este Widgets apontado algo como:



E assim estilizaria também o li, a e outros elementos XHTML que ele contivesse. Sabendo os elementos distintos de um widgets você pode colocar imagens ao lado dos links usando códigos CSS que já foram explicados em vários tutorias espalhados pela Internet, como também, colocar cor de fundo entre outras coisas.

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