Web Dois Ponto Zero: blogger

Mostrar mensagens com a etiqueta blogger. Mostrar todas as mensagens

Widget, gadget, badge, chicklet, ..., estes vocábulos pululam por estes dias na net.
E propiciam algumas confusões. Falo por experiência própria: Não é preciso muita procura para encontrar neste blog alguns resultados dessa confusão. Que se dane!

Mas há sempre um momento em que queremos mesmo ser mais rigorosos e entender o verdadeiro significado das coisas, por muito pueris que elas sejam.
O que se segue é o resultado da minha pesquisa para encontrar o verdadeiro significado de widget, já que o novo blogger, que "todos" usamos agora, se baseia muito neles.
E é no contexto do blogger que passarei à explanação do que encontrei e aprendi, sobretudo aqui, sendo este artigo largamente baseado, adaptado e traduzido desta fonte.
Widget como componente visual
Um widget é um conceito que os programadores de linguagens visuais (Visual Basic, Visual C#,...) conhecem bastante bem.
Mas aqui o que me interessa é mais o ponto de vista de um leigo, já que todos os podemos usar no novo blogger.
Como já devem ter reparado, o novo blogger apresenta um painel de controlo em que a página se encontra dividida por "Elementos de Página", sendo que podemos, através de simples cliques, criar novos elementos de página, reorganizar a sua posição através do simples "clique e arrasta" (drag and drop), o que, suponho, todos fazemos muito, especialmente na barra lateral do noso blog.

A mover um widget da barra lateral inferior...

... para a superior.
Este novo interface visual é pois um convite à utilização modular de código independente, cada qual correspondente a uma aplicação, a um widget.
Exemplos: as etiquetas (labels) do nosso blog, podem ser colocadas no cimo da barra lateral, no fundo da barra lateral, na zona principal dos posts, enfim, onde queiram. E tudo de forma fácil e rápida, com um simples clicar e arrastar.
Widget como elemento textual
O template do blogger foi construído com uma filosofia de design modular, exactamente potenciadora da utilização e modificação do código desses mesmos elementos (widgets).
Na secção de Help do blogger podemos ver como toda esta filosofia funciona e qual o código de cada widget embebido.
Para se entender como funcionam entaõ os widgets, vamos servir-nos da secção das Etiquetas (Labels) para exemplificar o funcionamento dos widgets.
Analisando o código de um widget
O código desse widget é algo similar a isto (podem comprová-lo editando o html do vosso Esquema, com a caixa Expandir os Widgets devidamente marcada):


<b:widget id="Label1" locked="false" title="Labels" type="Label">
<b:includable id="main">
<b:if cond="data:title">
 <h2><data:title></data:title></h2>
</b:if>
<div class="widget-content">
 <ul>
 <b:loop values="data:labels" var="label">
   <li>
     <b:if cond="data:blog.url == data:label.url">
       <data:label.name>
     <b:else>
       <a href="data:label.url"><data:label.name></data:label.name></a>
     </b:else>
     (<data:label.count>)
   </data:label.count></data:label.name></b:if></li>
 </b:loop>
 </ul>
 <b:include name="quickedit">
</b:include></div>
</b:includable>
</b:widget>

Explicação do Código
A linha 1 declara que este é um widget do tipo "Label", com o seu identificador único id='Label1'
Line 1 declares that this is a widget of type "Label," with its unique identification id='Label1' (para ser armazenado algures nos servidores da Google), com
o título 'Labels', que é aquilo que é visto pelos visitantes do blog.
A variável 'locked' é posta a 'false', o que quer dizer que podemos deslocar esse widget para onde queiramos, dentro dos Elementos da Página, pelo simples clique e arrastar, como vimos anteriormente.
A linha 23 fecha o widget, o que significa que os dados entre as as linhas 2 e 22 são do tipo 'Label'.
Da linha de ajuda do blogger vemos que apenas poderemos retirar quatro tipos distintos de dados:
O título do widget (data:title), e por cada Etiqueta (Label) encontrada na nossa página, podemos aceder ao seu nome (data:label.name),
a contagem dos posts para cada Etiqueta utilizada (data:label.count), e o url do link para uma página que mostra os posts com essa Etiqueta (data:lable.url).
Cada widget permite inserir no seu interior múltiplas funções.
Por defeito, cada widget tem de ter uma função especial identificada como id='main', dentro da qual todas as outras existem. Uma espécie de porta de entrada no código.
A linha 2 começa inicia o incluível principal e a linha 22 fecha-o. Isto significa que o widget contém apenas uma função (includable, segundo a terminologia do blogger). todas as outras serão subfunções dessa.
A função principal faz várias coisas:
Da linha 3 até 5 verifica se o título tem algum texto e, se tiver, mostra-o dentro de um par de tags <h2>, em que h2 significa, do html, cabeçalho do tipo 2.
A seguir, a linha 6 e 21 abre e fecha, respectivamente, um par de tags html "div" da classe "widget-content". É entre estas duas tags (ou linhas) que o conteúdo das nossas Etiquetas (Labels) irá ficar.
Esta configuração, em conjunto com o nome do widget, que vem noutro tag id, permite-nos configurar toda a apresentação visual para o conteúdo das Etiquetas (Labels), uando, apenas uma vez, as regras CSS que preferirmos.
As linhas 7 e 18 abrem e fecham um par de tags ul (lista desordenada - unoredered list), o que permite visualizar as Etiquetas como uma lista marcada.
As linhas 8 e 17 abrem e fecham um par de especiais de template b:loop, que é responsável por retirar a informação de todos os dados que compõem cada uma das Etiquetas, desde a primeira até à última.
Dentro do b:loop há certos elementos de texto que serão colocados dentro de um par de tags li (list item - item de lista).
Por exemplo, se tivermos cinco Etiquetas (Labels) teremos, como resultado da função, qualquer coisa do tipo:


<ul>
<li>(texto com a Etiqueta 1)</li>
<li>(texto com a Etiqueta 2)</li>
<li>(texto com a Etiqueta 3)</li>
<li>(texto com a Etiqueta 4)</li>
<li>(texto com a Etiqueta 5)</li>
</ul>

As linhas 10 e 11 dizem que se já estivermos na página das Labels, é visualizado apenas o nome das Etiquetas, sem o link por baixo.
Se não (linha 12), é-nos mostado um link e o texto representativo (linha 13), que é a Etiqueta (Label) ela própria.
Para além da Etiqueta, o widget mostra-nos a contagem de cabeçalhos (entre um par de parêntesis), de quantos posts usam esta etiqueta.
Finalmente a linha 21 mostra o botaõ de edição do widget, permitindo que editemos o seu conteúdo, ou configuração, do widget, enquanto vemos a página respectiva online.
Esta função é uma espécie de função global e escondida, poispode ser colocada em qualquer sítio, apesar de não podermos ver (editar) qualquer linha do código deste botão.
Agora que entendemos como é a filosofia dos widgets do blogger, podemos, com o máximo cuidado começar a alterar o seu código, de
modo a modifica-lhe a aparência. São o que se chama os "hacks" ou "tweaks". O quê????.....

[+/-]

Barra de Navegação só aparece quando passamos o rato por cima

Este "hack" foi tirado daqui e acho que resulta bastante bem.
A ideia é tirar aquela barra que aparece no cimo do nosso blog, a chamada barra de navegação (navbar), e que serve para pesquisar por mensagens dentro do nosso blog, como atalho para iniciarmos a sessão, etc. Estão a ver, esta barra:

Há quem a apague de vez, mas julgo que essa não é a melhor opção, uma vez que, sobretudo, a caixa de pesquisas tem muito interesse para os visitantes procurarem conteúdos dentro do nosso blog. Eu, por exemplo, uso-a muito noutros blogues.
Então arranjamos uma solução de compromisso que é fazê-la desaparecer, mas se precisarmos dela é só passar o rato por cima do local onde costumava estar e ela (como que por magia) reaparece e permite-nos utilizá-la.
Experimente, passando o rato no local que refiro.
então como se faz isso?
É fácil.
1 - Como (quase) sempre, ir para as configurações do layout (veja como neste post)
2 - Editar o modelo em html (idem)
3 - Encontrar as seguintes linhas de código


body {
background:#ccc;
margin:0;
text-align:center;

e colocar antes delas, as seguintes instruções:


#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

Fica, no fim, assim:


*/

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

body {
background:#ccc;
margin:0;
text-align:center;
line-height: 1.5em;

4. gravar o modelo;
5. Ver se resultou.
Problemas, no comentários, please.

[+/-]

Lista de Posts Recentes

Quando o número de posts do blog começa a crescer, é de bom tom colocar um painel mostrando os títulos, em forma de link, dos últmos posts; Nesse painel costuma ainda aparecer as primeiras palavras/frases que compõem o artigo, para o visitante ficar com uma ideia se vale a pena ler o artigo ou não, e a data de publicação.
É essa funcionalidade que implementei aqui neste blog. No meu caso coloquei-a no footer/rodapé, mas também é usual vê-la na barra lateral. Fica ao gosto de cada um.
Vamos então ver como se pode fazer isso:
1. Adicione um elemento de página em HTML. Pode fazê-lo no footer/rodapé ou na barra
lateral, como já foi dito.
2. Coloque nesse elemento o seguinte conteúdo:

a) Não se esqueça de substituir "blogname" pelo nome do seu blog;
b) Pode alterar o valor das variáveis para o seu gosto. Como estão indicam que:
- o número de últimos posts que vai aparecer é de 5 ( o máximo é de 25);
- o número de (os primeiros) caracteres do resumo do post é de 100;
- mostra a data de publicação;
- mostra o resumo do post;
- o estilo apresentado é o standard. Pode estilizar o seu usando CSS, sendo que o widget tem a seguinte estrutura:

<div class="bbrecposttitle">PostTitle - PostDatediv>
<div class="bbrecpostsum">PostSummarydiv>
<div class="bbwidgetfooter">WidgetFooterdiv>

c) No código, pode substituir

orderby=published por orderby=updated,
se quiser que os posts actualizados também contem como mais
recentes e assim seja colocados no topo do widget.

d) Se pretender que o widget tenha uma largura ou altura
diferentes e que,ao exceder as dimensões que deseja apareça
uma barra de scroll, faça o seguinte:
envolva o widget (o código acima dado) com

   // para limitar largura
... código do widget aqui ...


ou

  //para limitar altura
... código do widget aqui ...


sendo que o 200 e o 400 são meros exemplos.
Use os seus valores!