Widgets e Gagets sem mistérios Desvendado

18 de janeiro de 2009

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:

Código Widget

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:

CSS dos widgets

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

3 comentários:

Áurea disse...

Olá Marcelo,
Li a entrevista ontem! Fiquei muito feliz. Foi um prazer enorme participar do seu novo blog!
Grande beijo,
Áurea

Anônimo disse...

mt bom vlw

Anônimo disse...

NOVA BANDA LUJU do blog http://isatkm-luju.blogspot.com/

Postar um comentário

Faça seu comentário ou sua pergunta. Quando for possível postarei a resposta.
Obrigado!
Para deixar o link da sua última postagem coloque este código:

<em><strong>Seu nome</strong> publicou um post sobre.. <a href="seu link do último post">Título do Post</a></em>

Ficará assim:
Marcelo publicou um post sobre.. Alguma coisa