Dishman

6

Lista de Blogues Rolar com efeito jQuery

Na continuação do artigo Lista de Blogues com Efeito Marquee, apresento hoje mais um artigo da serie sobre a Lista de Blogues publicada antes no extinto Mocheco Marafado. 8)

Desta vez vou tentar explicar como dar um certo estilo à Lista de Blogues, mas utilizando um pouco de javascript e a biblioteca jQuery. :)

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

Osvaldo

Mocheco⊗Marafado

Notem que não estou colocando estilos na Lista de Blogues, somente mostrando como se pode colocar alguns efeitos. Para aprender como colocar estilos na Lista de Blogues, recomendo o excelente tutorial Customizando gadget de Lista de Blogs da +Ariane.

Atenção: Eu sempre aviso mas não custa voltar a mencionar que antes de tentar modificar o código do blogue, é recomendado que salve sempre o modelo actual!

Bem, então neste caso o primeiro passo será colocar o jQuery no blogue, caso ainda não o tenha feito. Mais uma vez chamo a atenção que estas bibliotecas de javascript (Jquery, Mootools, etc...) podem provocar conflitos se utilizar mais do que uma delas em simultâneo. Podem ler como fazer isso em Como colocar jQuery num blogue.

O segundo passo é adicionar o elemento Lista de Blogues, caso ainda não o tenhamos feito.

O passo seguinte será descobrir o código da Lista de Blogues em Editar HTML, Tal como expliquei no artigo anterior. ;) )

Lembrando que 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...

Bem para colocar este efeito utilizando jQuery, precisamos de criar uma nova div que vai envolver a lista visível no blogue.

Bem para colocar este efeito utilizando Jquery, precisamos de criar uma nova div que vai envolver a lista visivel no blogue.

Fazemos isso procurando por <ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'> no código da lista onde vamos colocar o efeito e colocamos mesmo antes: <div id="linklist"> e procurando pelo fecho da ul um pouco mais abaixo no código, colocamos o fecho da div que deve ficar da seguinte maneira:

Ver Código
<div id="linklist">
<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>
</div">


Ocultar Código

E agora que temos uma div envolvendo a lista, precisamos de dar-lhe um estilo no CSS, recomendo que coloque os estilos proximos por secção e neste caso como a Lista está na barra lateral (sidebar), será abaixo dos estilos da Sidebar que irei colocar o estilo da nova div mas vou manter a coisa simples, colocando só uma altura definida:


#linklist {
height:500px;
}

Salve o modelo e se visualizar o seu blogue, já vai verificar que a Lista de Blogues já só aparece dentro da altura definida no estilo da div linklist que criou.

Mas para dar o efeito com o jQuery, agora é preciso colocar o seguinte código mesmo a seguir ao fecho da div linklist que criamos à qual pode dar o nome que desejar, eu neste exemplo utilizei linklist mas essa foi uma escolha minha:


<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
var first = 0;
var speed = 800;
var pause = 6500;
function removeFirst(){
first = $('ul#BlogList1_blogs li:first').html();
$('ul#BlogList1_blogs li:first')
.animate({opacity: 0.5}, speed)
.fadeOut('slow', function() {$(this).remove();});
addLast(first);
}
function addLast(first){
last = '<li style="display:none">'+first+'</li>';
$('ul#BlogList1_blogs').append(last)
$('ul#BlogList1_blogs li:last')
.animate({opacity: 1}, speed)
.fadeIn('slow')
}
interval = setInterval(removeFirst, pause);
});
//]]>
</script>

Se desejar só colocar esse efeito, pode parar de ler por aqui... :D

Mas no meu caso, uma das coisas que sempre me incomodaram foi que alguns dos blogues na minha lista não tinham imagem. Isso acontece devido ao facto de quem publica os artigos não colocar imagens nos artigos ou então porque são imagens alojadas em serviços que não pertencem ao Google, embora com as recentes actualizações neste momento já aparecem algumas imagens de artigos publicados em outros serviços como o Wordpress. Claro que isso só é valido caso defina que cada blogue da Lista mostre uma imagem nos artigos.

Para remediar essa falha, precisamos de colocar uma condicional no HTML e colocando mais um estilo no CSS colocar uma imagem pre-definida para esses artigos.

Então para fazer isso, primeiro vamos achar o codigo que faz com que mostre a imagem:


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

E logo abaixo de </div>, vamos colocar a condicional <b:else/> da seguinte maneira:


<b:else/>
<div class='item-thumbnail'>
</div>

O que significa: Se o artigo não tiver uma imagem, vai mostrar na mesma o item-thumbnail e para que mostre uma imagem, vamos agora colocar essa imagem no estilo CSS como fundo (background):


.item-thumbnail {
background:#234 url(URL_DA_IMAGEM) no-repeat 50% 50%;
border:1px solid #456;
display:block!important;
float: none;
min-height:71px;
min-width:71px;
max-height:72px;
max-width:72px;
padding:3px;
margin-right:3px;
}

No exemplo acima, além de colocar uma imagem como fundo que vai servir como imagem pré-definida em caso de não existir alguma, coloquei também uma altura (height) e largura (width) que vai ser igual em todas as imagens da Lista de Blogues. Alterar URL_DA_IMAGEM na linha 2 e coloquem o endereço do local onde têm a imagem desejada alojada.

Codigo completo com as alterações para o efeito jQuery e imagem pré-definida 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;'>
<div id='linklist'>
<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.itemUrl' 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:else/>
<div class='item-thumbnail'>
</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>
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
var first = 0;
var speed = 800;
var pause = 6500;
function removeFirst(){
first = $('ul#BlogList1_blogs li:first').html();
$('ul#BlogList1_blogs li:first')
.animate({opacity: 0.5}, speed)
.fadeOut('slow', function() {$(this).remove();});
addLast(first);
}
function addLast(first){
last = '<li style="display:none">'+first+'</li>';
$('ul#BlogList1_blogs').append(last)
$('ul#BlogList1_blogs li:last')
.animate({opacity: 1}, speed)
.fadeIn('slow')
}
interval = setInterval(removeFirst, pause);
});
//]]>
</script>
<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>

Espero que este tutorial possa ser de utilidade para alguém e em breve continuarei esta serie mostrando como colocar a Lista de Blogues com o efeito Blogumus, que foi convertido para Blogger pela Amanda Fazani a partir do plugin para WordPress da autoria Roy Tanck.

Mas antes disso ainda vou publicar um artigo mostrando o que é o Blogumus.

Até Breve. :-F

Aspirante a Artista Digital, Moderador no site Heromorph desde 2007. Um dos fundadores do Quadradinhos inK, projecto de BD com artistas de Portugal e Brasil.
Gosto de BD, Cinema. Jogos e códigos HTML, CSS e Javascript.
Autor do Coisas K Aprendi por Aí, um blogue sobre nada e mais alguma coisa.
BloggerTwitterFacebookPinterestStackOverflowNexusModsGOG.comSteamContactoPaypal

Comentários

Malta, comentem, tanto críticas como elogios serão bem-vindos. E eu respondo, não prometo quando mas respondo.

Mas antes de comentarem, leiam as minhas Regras dos Comentários.

Se quiserem deixar o link para o vosso sitio, utilizar alguns estilos ou até inserir videos ou imagens nos comentários DEVEM mesmo ler as indicações nas Regras dos Comentários.

Enviar um comentário