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.

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

Este Artigo foi útil?
Então se quiser, pode pagar-me um café. ;)

Escolhe com Sabedoria:

Deixa o teu comentário no Formulário Incorporado (NOTA: As respostas directas aos comentários só são possíveis utilizando este Formulário.) , ou no Antigo Formulário em uma nova janela, ou então no Formulário em Pop Up .

LER AS REGRAS ANTES DE COMENTAR! MOSTRAR EMOTICONS
Ler Antes de Comentar ◊  As Regras dos Comentários:
  • O comentário precisa ter relação com o assunto!
  • O comentário que deixares é da tua inteira Responsabilidade!
  • Comentários anónimos São permitidos,MAS:

    • Por favor, evita comentar em MAIÚSCULAS .
    • Por favor, não faças Spam.
    • Por favor, não utilizes termos obscenos ou ofensivos.
    • Comentários considerados Spam ou ofensivos serão apagados.
◊  Para deixares a URL do teu blogue, comenta com OpenID, ou com a opção NOME/URL.
◊  Podes usar algumas tags HTML como:
  • @<strong>Nome</strong> para mencionar a quem se responde o comentário.
  • <em>Fulano disse:<i>Texto Citado</i></em> para colocar uma Citação.
  • Para inserir um link ou um vídeo do YouTube, basta só escrever o endereço URL como texto normal.
  • <i>Texto em Itálico</i>
  • <b>Texto em Negrito</b>
    • HTML EXTRA:
    • [im]URL DA IMAGEM[/im] para colocar uma imagem.
    • [ma]Texto rolando[/ma] para colocar texto rolando.
    • [si="2"]Texto com tamanho determinado[/si] Altera o numero para determinar o tamanho da letra.
    • [co="red"]Texto em cor[/co] Altera a cor do texto.
    • [ce]Texto centrado[/ce] centraliza o texto.
    • [ma+]Texto rolando para a direita[/ma+]
    • [box]"encaixotar" o texto[/box]
    • [mark]Texto Marcado[/mark]
    • [card="blue"]Texto com fundo[/card] Altera a cor de fundo do comentário.
    • [im#]URL DA IMAGEM[/im] para colocar uma imagem que ocupe TODA a largura.
    • [hi="yellow"]Texto Destacado[/hi]
  • ATENÇÃO: Comentários com imagens ou vídeos com conteúdo ofensivo ou inadequado serão REMOVIDOS, SEM EXCEPÇÃO!!!
FECHAR
NOTA: os códigos dos emoticons devem ser inseridos separados das restantes palavras ou pontuação. OCULTAR EMOTICONS

0 comentários :

Enviar um comentário