Lista de blogs com efeito marquee

Este é um tutorial que encontrei no blog espanhol El Escaparate de Rosa que vai mostrar como fazer o gadget Blogroll (Lista de Blogs) ser exibido em movimento, isto é, usando um código de "marquee".
Antes de prosseguir com a explicação, você pode ver um exemplo funcionando na barra lateral deste blog.

Em primeiro lugar temos de adicionar o gadget lista de blogs e defini-lo como na imagem abaixo, para adicionar o código necessário. Depois disto, é possível editar o novo gadget, se quiserem.

Com o gadget já configurado, acesse DESIGN >>> EDITAR HTML >>> e marque a opção "Expandir modelos de widgets. Vamos ter que localizar a origem do gadget e adicionar o código necessário, este que está destacado em vermelho. Use CTRL+F para encontrar o nome do seu widget, no meu caso, Blogroll…

<b:widget id='BlogList1' locked='false' title='Blogroll' type='BlogList'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>

<div class='widget-content'>
<div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>
<center><marquee direction='up' height='300' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='5' bgcolor = '#faf0e6' style='border: #cdaf95 2px solid;padding-left: 10px;' width='260'> <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>
</marquee></center>
<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>

Modificações:

height = "300" é a altura do dispositivo, quanto maior o valor, a altura e vice-versa.
width = «260» é a largura do dispositivo, quanto maior o valor, a largura e vice-versa.
bgcolor = "# faf0e6 ' é a cor de fundo do gadget. Se você não quiser usá-lo, terá que remover esse código (bgcolor = "# faf0e6.  Para alterar a cor, substituir o código de cores (# faf0e6) pelo código da cor escolhida. Veja em Tabela de Cores.

border: 2px solid # cdaf95; é a borda do gadget. Se você não quiser margem, nós colocamos o seu valor (2px) para 0, se queremos mais ou menos largura, aumentar ou diminuir este valor. Para alterar a sua cor, coloque em # cdaf95, o código da cor escolhida.
SCROLLAMOUNT = '5 ' é a velocidade de movimento, aumento ou diminuição do valor (5) para variar a velocidade.
direction = "up" é a direção da rolagem, neste caso será para cima. Se  quiser a rolagem para baixo, trocar  o up para down.

 

Leia também:

• Novos Gadgets no Blogger
• Expandir e Contrair Qualquer Widget
• Twitgether – Aplicativo Twitter no Orkut

Posted in: Tutoriais