Uma Melhoria na Lista de Blogues

Vasculhando pelo meu extinto blogue, encontrei um artigo que embora tendo sido escrito para a antiga interface do Blogger não deixa de ter o seu interesse mesmo actualmente, por isso em vez de simplesmente copiar o que escrevi na altura, decidi adaptar esse artigo na elaboração de um artigo mais de acordo com a actual interface do Blogger. 8)

E perguntam vocês qual foi esse artigo que chamou a minha atenção? :S

Respondo a essa questão com outra pergunta: Já repararam na minha Lista de Blogues ali na barra lateral? Aquela secção onde coloco os blogues que gosto de visitar e que merecem ser recomendados a todos quanto visitam este humilde espaço... :-`

Está fixe, não está? :D

E por acaso, já experimentaram clicar em alguma das imagens dos blogues ali listados?

Se a resposta a todas as questões acima é sim, já devem ter notado que ao clicar nas imagens são direccionados ao artigo em questão em vez de à pagina inicial do blogue, algo que considero que deveria fazer parte da Lista de Blogues do Blogger de origem porque ainda existem muitos blogueiros que por distracção, esquecem de colocar titulo nos artigos que publicam e se for o caso de ter a opção de mostrar imagens na lista de blogues, ao clicar na imagem vamos parar na pagina inicial do blogue e não no artigo, o que por vezes se torna irritante porque eu pessoalmente sempre clico na imagem. :-#

E é sobre isso que vou aqui explicar como fiz, porque para saber como dar um aspecto personalizado à sua lista de blogues recomendo que vá ao Templates Novo Blogger da Ariane e leia Customizando gadget de Lista de Blogs, onde ela explica detalhadamente como fazer isso.

É para a antiga interface que a +Ariane escreve nesse artigo, mas o básico ainda se mantém já que o Blogger pouco alterou na codificação da Lista de Blogues.

A menos é claro, que exista algum pedido para eu mostrar como personalizei a minha Lista de Blogues ou eu por acaso me lembrar de escrever algo sobre isso... :Z

Mas o assunto aqui é sobre como alterar a codificação da Lista de Blogues para que ao clicarmos na imagem (caso esteja com essa opção activada e que o artigo publicado contenha imagens.), e para conseguir esse fim temos que meter a mão na codificação do blogue.

Então vamos ao Painel de Controlo do blogue, seleccionamos a aba Modelo e clicamos em Editar HTML. E agora existe uma das grandes vantagens que o Blogger introduziu nos últimos tempos: Para ir para um elemento presente no blogue basta clicar onde diz Avançar para o widget e seleccionar o que pretendemos, neste caso o elemento Bloglist tal como demonstrado na imagem abaixo:

Atenção que onde aparece na imagem Bloglist1, o numero pode não ser 1 (um) dependendo de quantas Listas de Blogues estão presentes no blogue.

Já tenho mencionado antes que este Editor de HTML que o Blogger introduziu foi uma das coisas que mais gostei, mas também devo mencionar que no quesito desta opção de Avançar para o widget por muito útil que seja e por muito que facilite a vida a quem gosta de mexer na codificação, mesmo assim ainda deixa a desejar no aspecto em que os elementos javascript/HTML que adicionamos ao blogue apresentam-se nesta opção como HTMLnumero, em vez do nome que colocamos mas até entendo a razão para isso já que muitos deixam esse campo em branco.

Não é o meu caso porque acho que colocar um nome em cada elemento presente no blogue ajuda a encontrar o dito cujo mais tarde. ;)

Então para alterar a URL para onde somos direccionados ao clicar na imagens, basta alterar um pouco o código do HTML:

Ver Código

---

<b:widget id='BlogList1' locked='false' title='A minha Lista de blogues' type='BlogList'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<div id='blog-list-title'>
<h2 class='title'><data:title/></h2>
</div>
</b:if>
<div class='widget-content'>
<div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>
<ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
<b:loop values='data:items' var='item'>
<li expr:style='data:item.displayStyle'>
<div class='blog-icon'>
<b:if cond='data:showIcon == &quot;true&quot;'>
<input expr:value='data:item.blogIconUrl' type='hidden'/>
</b:if>
</div>
<div class='blog-content'>
<div class='blog-title'>
<a expr:href='data:item.blogUrl' target='_blank'>
<data:item.blogTitle/></a>
</div>
<div class='item-content'>
<b:if cond='data:showItemThumbnail == &quot;true&quot;'>
<b:if cond='data:item.itemThumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:item.blogUrl' target='_blank'>
<img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
</a>
</div>
</b:if>
</b:if>
<b:if cond='data:showItemTitle == &quot;true&quot;'>
<span class='item-title'>
<b:if cond='data:item.itemUrl != &quot;&quot;'>
<a expr:href='data:item.itemUrl' target='_blank'>
<data:item.itemTitle/></a>
<b:else/>
<data:item.itemTitle/>
</b:if>
</span>
</b:if>
<b:if cond='data:showItemSnippet == &quot;true&quot;'>
<b:if cond='data:showItemTitle == &quot;true&quot;'>
-
</b:if>
<span class='item-snippet'>
<data:item.itemSnippet/>
</span>
</b:if>
<b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'>
<div class='item-time'>
<data:item.timePeriodSinceLastUpdate/>
</div>
</b:if>
</div>
</div>
<div style='clear: both;'/>
</li>
</b:loop>
</ul>
<b:if cond='data:numItemsToShow != 0'>
<b:if cond='data:totalItems &gt; data:numItemsToShow'>
<div class='show-option'>
<span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display: none;'>
<a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>
</span>
<span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin-left: 5px;'>
<a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>
</span>
</div>
</b:if>
</b:if>
<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>

Ocultar Código

Alterar onde está data:item.blogUrl (linha 28, destacada acima) por data:item.itemUrl, pré-visualizar e se estar tudo bem, salvar e pronto. :)

Bem simples, não?

Já agora, caso desejem alterar o tamanho das imagens na lista de blogues, basta colocar as dimensões em pixeis onde está data:item.itemThumbnail.height para a altura e onde está data:item.itemThumbnail.width para a largura (linha 29), e não esquecer de retirar a parte que diz expr:, tal como demonstrado abaixo:

<div class='item-thumbnail'>
<a expr:href='data:item.itemUrl' target='_blank'>
<img alt='' border='0' height='85' expr:src='data:item.itemThumbnail.url' width='90'/>
</a>
</div>

E então? Mais alguém acha esta uma melhoria necessária à Lista de Blogues?

Até Breve. :-F

Queres ler outro artigo ao calhas?