Colocando efeito "marquee" no BlogList
Autor: Edilene brandao da silva | Publicado: 2013-05-29T23:20:00-07:00

   



"&nbsp; Fazendo testes consegui colocar o efeito marquee  (deslizante) no widget de Bloglist, mais conhecido como BlogRoll, veja o  exemplo AQUI.

A primeira coisa a fazer é configurar seu widget e deixa-lo como no  exemplo inclusive o título deverá ser escrito assim. (depois vc poderá  modificar)"

&nbsp;   







  




"Não se esqueça de antes  de começar salvar uma cópia de seu template, caso não dê certo, é só  reinstalá-lo.
"


Agora vá até o HTML de seu blog, clique em "&nbsp; Expandir modelos de widget",  agora procure pelo seguinte código:"


&lt;b:widget  id='BlogList1' locked='false' title=' Amigos que visito' type='BlogList'&gt;
&lt;b:includable  id='main'&gt;
&nbsp;&nbsp; &nbsp;&lt;!-- only  display title if it's non-empty --&gt;
&nbsp;&nbsp; &nbsp;&lt;b:if  cond='data:title != &amp;quot;&amp;quot;'&gt;
&nbsp;&nbsp; &nbsp; &nbsp;&lt;div  id='blog-list-title'&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&lt;h2  class='title'&gt;&lt;data:title/&gt;&lt;/h2&gt;
&nbsp;&nbsp; &nbsp; &nbsp;&lt;/div&gt;
&nbsp;&nbsp; &nbsp;&lt;/b:if&gt;


&nbsp;&nbsp; &nbsp;&lt;div  class='widget-content'&gt;
&nbsp;&nbsp; &nbsp; &nbsp;&lt;div  class='blog-list-container' expr:id='data:widget.instanceId +  &amp;quot;_container&amp;quot;'&gt;


Abaixo dele cole o seguinte código:
                   



&lt;center&gt;&lt;marquee direction=' up' height='250'  onmouseout='this.start()' onmouseover='this.stop()' scrollamount='5'
style='BORDER-RIGHT: #fff 3px ridge; BORDER-TOP: #fff 3px ridge;  BORDER-LEFT: #fff 3px ridge; BORDER-BOTTOM: #fff 3px ridge' width='160'&gt;

  
 Os códigos que deixei na cor laranja representam o tamanha da caixinha marquee, o código em  roxo é o  sentido que vai rolar.&nbsp;(Up---cima /&nbsp;Down&nbsp;---baixo)

&nbsp;Agora procure o seguinte trecho: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  
&lt;b:include  name='quickedit'/&gt;
&nbsp;&nbsp; &nbsp; &nbsp;&lt;/div&gt;
&nbsp;&nbsp; &nbsp;&lt;/div&gt;
&nbsp;&nbsp;&lt;/b:includable&gt;
&lt;/b:widget&gt;

▲E cole acima &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dele&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;o código abaixo▼ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 

            

 &lt;/marquee&gt;&lt;/center&gt;  

   
 

Veja se está tudo certinho e depois salve.

O código então deverá ficar assim:

(partes em preto já devem existir,&nbsp;

 partes em vermelho&nbsp;

foram acrescentadas. 





&lt;b:widget id='BlogList1' locked='false' title=' AMIGOS QUE VISITO'  type='BlogList'&gt;
&lt;b:includable id='main'&gt;
&nbsp;&nbsp; &nbsp;&lt;!-- only display title if it's non-empty --&gt;
&nbsp;&nbsp; &nbsp;&lt;b:if cond='data:title != &amp;quot;&amp;quot;'&gt;
&nbsp;&nbsp; &nbsp; &nbsp;&lt;div id='blog-list-title'&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&lt;h2 class='title'&gt;&lt;data:title/&gt;&lt;/h2&gt;
&nbsp;&nbsp; &nbsp; &nbsp;&lt;/div&gt;
&nbsp;&nbsp; &nbsp;&lt;/b:if&gt;

&nbsp;&nbsp; &nbsp;&lt;div class='widget-content'&gt;
&nbsp;&nbsp; &nbsp; &nbsp;&lt;div class='blog-list-container'  expr:id='data:widget.instanceId + &amp;quot;_container&amp;quot;'&gt;
&lt;center&gt;&lt;marquee  direction='up' height='250' onmouseout='this.start()'  onmouseover='this.stop()' scrollamount='5'&nbsp;style='BORDER-RIGHT:  #fff 3px ridge; BORDER-TOP: #fff 3px ridge; BORDER-LEFT: #fff 3px  ridge; BORDER-BOTTOM: #fff 3px ridge' width='160'&gt;


&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&lt;ul expr:id='data:widget.instanceId +  &amp;quot;_blogs&amp;quot;'&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;b:loop values='data:items' var='item'&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;li expr:style='data:item.displayStyle'&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div class='blog-icon'&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;b:if cond='data:showIcon ==  &amp;quot;true&amp;quot;'&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;input expr:value='data:item.blogIconUrl'  type='hidden'/&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/b:if&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/div&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div class='blog-content'&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div class='blog-title'&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;a expr:href='data:item.blogUrl'  target='_blank'&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;data:item.blogTitle/&gt;&lt;/a&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/div&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div class='item-content'&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;b:if cond='data:showItemThumbnail ==  &amp;quot;true&amp;quot;'&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;b:if cond='data:item.itemThumbnail'&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div class='item-thumbnail'&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;a expr:href='data:item.blogUrl'  target='_blank'&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;img alt='' border='0'  expr:height='data:item.itemThumbnail.height'  expr:src='data:item.itemThumbnail.url'  expr:width='data:item.itemThumbnail.width'/&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/a&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/div&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/b:if&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/b:if&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;b:if cond='data:showItemTitle ==  &amp;quot;true&amp;quot;'&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;span class='item-title'&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;b:if cond='data:item.itemUrl !=  &amp;quot;&amp;quot;'&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;a expr:href='data:item.itemUrl'  target='_blank'&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;data:item.itemTitle/&gt;&lt;/a&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;b:else/&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;data:item.itemTitle/&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/b:if&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/span&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/b:if&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;b:if cond='data:showItemSnippet ==  &amp;quot;true&amp;quot;'&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;b:if cond='data:showItemTitle ==  &amp;quot;true&amp;quot;'&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;-
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/b:if&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;span class='item-snippet'&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;data:item.itemSnippet/&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/span&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/b:if&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;b:if cond='data:showTimePeriodSinceLastUpdate ==  &amp;quot;true&amp;quot;'&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div class='item-time'&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;data:item.timePeriodSinceLastUpdate/&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/div&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/b:if&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/div&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/div&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div style='clear: both;'/&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/li&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/b:loop&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&lt;/ul&gt;

&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&lt;b:if cond='data:numItemsToShow != 0'&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;b:if cond='data:totalItems &amp;gt;  data:numItemsToShow'&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div class='show-option'&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;span expr:id='data:widget.instanceId +  &amp;quot;_show-n&amp;quot;' style='display: none;'&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;a href='javascript:void(0)' onclick='return  false;'&gt;&lt;data:showNText/&gt;&lt;/a&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/span&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;span expr:id='data:widget.instanceId +  &amp;quot;_show-all&amp;quot;' style='margin-left: 5px;'&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;a href='javascript:void(0)' onclick='return  false;'&gt;&lt;data:showAllText/&gt;&lt;/a&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/span&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/div&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/b:if&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&lt;/b:if&gt;&lt;/marquee&gt;&lt;/center&gt;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&lt;b:include name='quickedit'/&gt;
&nbsp;&nbsp; &nbsp; &nbsp;&lt;/div&gt;
&nbsp;&nbsp; &nbsp;&lt;/div&gt;
&nbsp;&nbsp;&lt;/b:includable&gt;
&lt;/b:widget&gt;            




&nbsp;fonte e créditos:

http://templateseacessorios.blogspot.com/

&nbsp;2010/02/colocando-efeito-marquee-no-bloglist.html