Lista de Blogues Rolar com Efeito Marquee

Quando escrevi/actualizei o artigo Uma Melhoria na Lista de Blogues, reparei que no extinto Mocheco Marafado tinha escrito uma serie de artigos sobre a Lista de Blogues. 8)

Então pensei que esta é uma altura tão boa como qualquer outra para revisitar esses artigos e actualizando-os ou não, conforme o caso, trazer essa serie aqui para o Coisas K Aprendi por Aí. :D

Este artigo foi publicado originalmente em 03 de Março, 2010 e o texto que se segue é praticamente o mesmo de então.

Osvaldo

Mocheco⊗Marafado

A Lista de Blogues (Bloglist) do Blogger, ou aquela secção onde colocamos os blogues que gostamos e recomendamos aos que visitam o nosso espaço, já tem algumas opções incluídas tipo, mostrar todos os blogues ou somente alguns. Nesta ultima opção, a lista encolhe ou expande conforme o desejo de visitante.

Ora eu nunca gostei muito destas opções. Por duas razões, a primeira é que se coloco a aparecer todos os blogues na lista, caso a mesma tenha muitos blogues vai-se estender pela barra lateral abaixo e a segunda razão é que se escolho só apresentar alguns, a maioria dos visitantes nunca vai clicar para ver o resto e assim perde-se o objectivo da lista não importando para isso se escolho apresentar por data do ultimo artigo publicado ou por ordem alfabética pelo titulo do blogue. Sempre vão ficar alguns que muito raramente vão ser notados.

Então, resolvi tentar novas formas de apresentar a Lista de Blogues que não ocupasse muito espaço mas ao mesmo tempo todos os blogues pudessem ser visíveis a certo ponto.

Uma das soluções que me vieram à ideia foi fazer a lista "rolar" e ir apresentando os diversos blogues presentes na minha Lista de Blogues em sequência.

Pode-se conseguir esse efeito de varias maneiras, a mais fácil é utilizando o código marquee, já que não necessita de muita coisa. (NOTA: Na ligação anterior sobre o código marquee podem ver alguns exemplos dos vários efeitos possíveis ;) )

Então, o primeiro passo será incluir o elemento Lista de Blogues (Bloglist) na barra lateral ou onde quiserem. Para isso, basta ir a Esquema e adicionar uma nova mini-aplicação e escolher Lista de Blogues, e adicionar os blogues que desejarmos.

O seguinte será irmos ao Painel de Controlo do blogue, seleccionamos a aba Modelo e clicamos em Editar HTML tal como mencionei no artigo anterior sobre a Lista de Blogues. 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. Num blogue em que trabalhei, cheguei a colocar 3 Listas de Blogues.

Caso o código referente à Lista de Blogues apareça contraído, cliquem nos números de linha do lado esquerdo e a porção de código expande-se. :)

O código é o mesmo em todas as Listas de Blogues, só se colocarmos mais do que uma lista é que a ID (id='BlogList1') se altera automaticamente para BlogList2, BlogList3 e por aí fora...

Ora para fazer a Lista rolar, a parte do código que nos interessa é a seguinte:

Ver Código

---

<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>

Ocultar Código

Ora se o objectivo é somente fazer rolar a Lista, basta colocar o efeito marquee da seguinte maneira:

NOTA: As linhas 2 e 4 em destaque abaixo são as linhas 1 e 52 no codigo acima.

<marquee behavior='scroll' direction='up' height='500' onmouseout='this.start();' onmouseover='this.stop();' scrollamount='2'>
<ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
--- Restante Codigo Acima ---
</ul>
</marquee>

Explicando o que é mais importante:

direction é a direcção em que queremos fazer rolar a lista, pode ser down (abaixo) ou up (acima). O efeito marquee tem ainda as opções left (esquerda) e right (direita) mas neste caso o resultado não será o melhor a menos que se altere seriamente o CSS da Lista de Blogues...

scrollamount é a velocidade, quanto menor o valor mais lenta a velocidade.

height é a altura (em pixeis) que tem a parte visível da lista.

Codigo completo já com a inclusão do efeito marquee mais a demonstração ao lado:

DEMO

<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;'>
<marquee behavior='scroll' direction='up' height='500' onmouseout='this.start();' onmouseover='this.stop();' scrollamount='2'>
<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>
</marquee>
<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>

Brevemente explico como colocar um outro efeito parecido mas desta vez utilizando o jQuery. :V:

Até Breve. :-F

Queres ler outro artigo ao calhas?