Bíblia no Computador

24 outubro 2010

Mostrar Lista de Blogs em Movimento

É um efeito não muito complicado de conseguir, utilizando a etiqueta "marquee".

Antes de continuar com a explicação, pode ver um exemplo neste este blog de pruebas, na gadget que leva o título "Minha lista de blogs".

[1] Antes de mais nada, entendermos que ir a gadget "Lista de blogs" e configurar tal como vemos na imagem para fazer o código necessário, uma vez conseguido o efeito do movimento poderemos editar o gadget novamente.
[2] Uma vez adicionado e configurado o gadget desta maneira, vamos a  - Editar HTML e marcamos a opcão de "Expandir widgets".
Teremos que localizar o código do gadget e adicionar o código necessário tal como vê destacado na cor vermelho:

<b:widget id='BlogList1' locked='false' title='Mi lista de blogs' 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>


a seguir algumas alterações que podem ser feitas:

Modificações:
height = "300" é a altura do gadget valor prefeito, hum, até mais e vice-versa.
"Width = 260" é a largura do dispositivo, o valor prefeito hum, mais largura e vice-versa.
bgcolor = "# faf0e6 'Cor de fundo gadget. Se eliminarmos nao Usamos o mesmo código (bgcolor =" # faf0e6'). Cor Pará alterar o código de substituir CR (# faf0e6) escolhidos pelo.
border: 2px solid # cdaf95; A borda do gadget. Se nós nao borda, valorizamos o seu (2px) para 0 se você quer mais ou menos ampla, podemos aumentar ou diminuir o valor. Para o corte de sua mudança, colocar em # cdaf95, o Código de cor escolhida.
SCROLLAMOUNT = velocidade Viagem '5 ', retardar o crescimento ou o valor (5) faixa de velocidade de torque.
direction = direção "para cima" da viagem, neste caso acima, se em vez disso, Baixo para cima, o deslocamento será, será para baixo.

Fonte: El Escaparate

Related Posts Plugin for WordPress, Blogger...

TV Novo Tempo em Campo Grande

TV Novo Tempo em Campo Grande
Canal 41