Usando o Widget de Imagem para destaques no blog

Vou ensinar como manipular os códigos do widget de imagem para transformá-lo em um campo de destaque para posts anteriores. Como acredito que uma imagem vale mais que mil palavras, vejam do que trata este tutorial em meu blog de testes. Notem abaixo do cabeçalho os quadrados com imagens acompanhadas de um título e legenda. Onde quer que se clique alí, seja na imagem, no título ou na legenda, você será levado ao post em questão. As vantagens de se usar o widget de imagem alterado desta maneira é a possibilidade de colocar em destaque posts antigos que não apareceriam em um widget de posts recentes por exemplo, atraindo o leitor para assuntos do seu blog que você não quer que 'desapareçam' com as novas publicações.

Como em todos os outros tutoriais, estou usando o Template Mínima do Blogger para a modificação.

Antes de iniciar a explicação:
1- A colocação dos destaques é 100% manual, ou seja, não implica no uso de nenhum script que faça uma troca automática dos assuntos apresentados. Você deverá escolher qual post destacar e qual imagem e legenda usará no destaque;
2-Apesar do uso deste widget ser muito simples, as alterações que vou explicar exigem atenção. Por isso, por favor, tentem primeiro em um blog de testes até que tudo saia perfeito, ok?

A primeira coisa que faremos é decidir onde os widgets aparecerão e no meu exemplo eu escolhi a div crosscol que existe no template Mínima mas não é visível (o que acho algo meio bizarro). Para que fique visível, procure por este trecho:

<div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

Substitua o no (em negrito) por yes e salve. Note que no modo Layout e o retangulo correspondente a esta div (abaixo do cabeçalho) aparecerá.

Para que as medidas que passarei a seguir fiquem corretas no template, altere o width de #outer-wrapper para 900px;

Agora no CSS do código do template (antes de ]]></b:skin>), acrescente o seguinte código (meus comentários estão em vermelho):

#crosscol-wrapper{
margin: 0 auto;
padding: 15px;
float:left;
border:1px solid #2e2e2e; /* escolha aqui a cor e largura da borda */
background: #111} /* escolha aqui a cor do background */

.crosscol h2{
margin: 0px;
padding: 0px 0px 0px;
text-align:left; /* escolha aqui o alinhamento do título */
height: 25px; /*altura do espaço para o título */
color: #ccc; /* cor da fonte do título */
font-size: 18px; /*tamanho da fonte do título */
font-weight:bold;
text-transform:uppercase;
letter-spacing:-1px;}

.crosscol .widget{
margin: 0px 2px 0px; /*espaçamento entre os widgets*/
padding: 5px;
width: 200px; /*largura de cada widget */
height:260px; /* altura de cada widget */
float:left; /* importante que a flutuação seja à esquerda */
border: 1px solid #2e2e2e; /*cor da borda de cada widget*/
background: #212121 /*cor do background de cada widget */
}

.crosscol .widget img {
margin: 0px;
padding: 0px;
width: 200px; /* tamanho de cada imagem */
height:160px; /* altura de cada imagem */
float:left;
border:1px solid #2e2e2e; /* cor da borda de cada imagem */
}

.crosscol .widget img:hover{
border:1px solid #fa01e6; /* cor da borda de cada imagem no estado hover */
}

.crosscol .caption{
margin: 0px;
padding:3px 0 0; /* distância da legenda para a imagem */
color:#ccc; /* cor da fonte da legenda */
font-size: 97%; /* tamanho da fonte da legenda */
text-align:justify; /* alinhamento da legenda */
}

acrescente também o código abaixo para alinhar os widgets no modo layout:
body#layout #crosscol{
margin: 0 auto;
padding: 0 0 0;
width: 900px;
float:left;}

Salve a modificação, vá em Layout e no espaço correspondente a div crosscol (abaixo do cabeçalho) , insira 4 widgets de imagens:

Conforme a imagem, coloque o título (sendo interessante colocar o mesmo do post), em legenda uma breve descrição do assunto, em link a url do post (que se obtém clicando com o botão direito do mouse sobre o título -> copiar link) e suba uma imagem que ilustre o post (no caso usei a mesma que ilustra meu post fictício). Insira os quatro widgets linkando para 4 posts diferentes e salve.

Por padrão apenas a imagem torna-se um link para a url escolhida; o que vamos fazer agora é uma alteração para que todo o conteúdo do widget (título e legenda) se tornem um link também.

1- Em editar HTML, clique em Expandir Modelo de Widget e procure pelo seguinte trecho:

<div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'>

<b:widget id='Image4' locked='true' title='Mauris Vitae' type='Image'>

<b:includable id='main'>

<b:if cond='data:title != &quot;&quot;'>

<h2><data:title/></h2>

</b:if>

<div class='widget-content'>

<b:if cond='data:link != &quot;&quot;'>

<a expr:href='data:link'>

<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>

</a>

<b:else/>

<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>

</b:if>

<br/>

<b:if cond='data:caption != &quot;&quot;'>

<span class='caption'><data:caption/></span>

</b:if>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

O que está em vermelho é o código de um widget que foi acrescentado. Este código deve se repetir, um após o outro, por quatro vezes (já que você adicionou 4 widgets) . Você deve alterar cada um deles para que fiquem como a seguir (as alterações estão em negrito):

<b:widget id='Image4' locked='true' title='Mauris Vitae' type='Image'>
<b:includable id='main'>
<a expr:href='data:link'>
<h2><data:title/></h2>
</a>
<div class='widget-content'>
<b:if cond='data:link != &quot;&quot;'>
<a expr:href='data:link'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
</a>
<b:else/>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
</b:if>
<br/>
<a expr:href='data:link'>
<span class='caption'><data:caption/></span>
</a>
</div>
</b:includable>
</b:widget>

o trecho <b:include name='quickedit'/> é suprimido e com isto excluímos o ícone da ferramenta que aparece em cada widget quando estamos logados (pois com estas modificações ele toma as proporções que determinamos para cada imagem e ficam enormes, atrapalhando a visualização do template).

Procure fazer a modificação em todos os widgets e salve.
É isso. Quando quiser mudar o destaque, basta trocar a imagem escolhida e substituir as informações título, link e legenda.