Lista de Blogues Só com Miniaturas e Efeito jQuery

Para terminar esta serie de artigos sobre a Lista de Blogues ainda falta mais um artigo da serie original e não podia dar por terminada esta republicação sem incluir esse artigo. 8)

Atenção: antes de tentar modificar o código do blogue, é recomendado que salve sempre o modelo actual!

No artigo a seguir, praticamente todo o texto mantém-se o mesmo, mas actualizei os códigos apresentados para dar um aspecto final mais vistoso à Lista de Blogues como podem verificar na demonstração no fim do artigo. :D

Publicada originalmente em 07 de Março, 2010

Osvaldo

Mocheco⊗Marafado

Para terminar este tema da Lista de Blogues e possíveis personalizações, não queria deixar de mostrar uma maneira que testei e acho bem fixe em blogues de imagens tal como o meu.

Claro que dependendo do gosto pessoal de cada um também pode ficar bem em outro tipo de blogues. ;)

Esta foi uma das tentativas que testei ao criar o novo look aqui do blogue e ficou de fora ao decidir como ia colocar as coisas.

No caso de gostar desta Lista de blogues, recomendo que a coloque no rodapé do blogue ou então abaixo do cabeçalho.

Atenção que embora utilize jQuery para dar o efeito do movimento, o truque está no estilo em CSS e no próprio código HTML da lista.

Para colocar esta Lista, primeiro vamos à aba Modelo e depois Editar HTML para abrir o Editor de HTML, onde está toda a codificação presente no blogue e identificar a linha de código referente ao Cabeçalho (Header) ou Rodapé (Footer), conforme o local onde pretendem colocar a Lista de Blogues e que pode parecer algo como:

<b:section class='footer' id='footer'> se desejar colocar a lista no rodapé ou por
<b:widget id='Header1' locked='true' title='NOME_DO_BLOG (Cabeçalho)' type='Header'/> se preferir colocar abaixo do cabeçalho.

Atenção: dependendo do tipo de template, estas linhas de código podem se apresentar um pouco diferentes...

Podem também clicar em qualquer parte DENTRO do Editor de HTML e utilizar Ctrl+F (No Firefox, pelo menos...) para abrir a caixa de pesquisa onde se digita o titulo ou ID do elemento pretendido.

A outra opção é utilizar a opção Avançar para o widget, que neste caso deve ser bem fácil para o Cabeçalho (Header) embora para o Rodapé (Footer) já seja necessário saber se o Rodapé já contém outro elemento e qual para que o possamos identificar utilizando este recurso...

Enfim, após localizarem a secção (<b:section) onde querem colocar a Lista de Blogues, logo abaixo de uma dessas linhas, colocamos o seguinte código:

Ver Código

---

<b:widget id='BlogList99' locked='false' title='A minha Lista de blogues' type='BlogList'>
<b:includable id='main'>
<div class='widget-content'>
<div id='linklist'>
<ul id='linkthumb'>
<b:loop values='data:items' var='item'>
<li>
<b:if cond='data:showItemThumbnail == &quot;true&quot;'>
<b:if cond='data:item.itemThumbnail'>
<a expr:href='data:item.blogUrl' target='_blank'>
<img alt='' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
  <span><em><data:item.blogTitle/></em><em> <data:item.itemTitle/></em><em> <data:item.timePeriodSinceLastUpdate/></em></span></a>
<b:else/>
<a expr:href='data:item.blogUrl' target='_blank'>
<img alt='' height='72' width='72' src='http://lh5.ggpht.com/_Jm8aDaSCrFU/S2d6YQnQ1-I/AAAAAAAAAss/7HB9JZ2r46c/noimage.png'/>
  <span><em><data:item.blogTitle/></em><em> <data:item.itemTitle/></em><em> <data:item.timePeriodSinceLastUpdate/></em></span>
</a>
</b:if>
</b:if>
</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#linkthumb li:first').html();
$('ul#linkthumb 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#linkthumb').append(last)
$('ul#linkthumb li:last')
.animate({opacity: 1}, speed)
.fadeIn('slow')
}
interval = setInterval(removeFirst, pause);
});
//]]>
</script>
<div style='clear: both;'/>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Ocultar Código

Como podem verificar pelo código acima, alterei quase todo o código original de maneira que agora somente vai aparecer a imagem publicada no ultimo artigo de cada blogue presente na lista, e o resto das informações coloquei abaixo das imagens em miniatura numa span, também coloquei um b:else para no caso de não existir imagem, mostrar uma imagem pré-definida mas de maneira a linkar na mesma para o blogue em causa.

A parte destacada é a parte do código que vai fazer a lista mover-se, claro que necessita ter o jQuery no blogue para funcionar, veja em Lista de Blogues com jQuery como colocar.

http://lh5.ggpht.com/_Jm8aDaSCrFU/S2d6YQnQ1-I/AAAAAAAAAss/7HB9JZ2r46c/noimage.png é a imagem pré-definida para mostrar em caso de não existir nenhuma. É recomendado descarregar essa imagem para o vosso computador e alojá-la em um local de vossa confiança, substituindo a URL na linha 15 do código acima. Como é lógico, também no caso de desejarem colocar outra imagem pré-definida, aqui é onde fazem isso.

Salve o modelo e vá à aba Esquema, procure pela sua nova Lista de Blogues e antes de adicionar qualquer blogue à lista, desmarque todas as opções e marque somente para mostrar Miniatura do item mais recente.

Claro que se ir ver no blogue como fica a Lista após este passo, vai tudo numa confusão já que precisa colocar o estilo no CSS para que tudo fique organizado e como desejamos. =D

E para colocar os estilos no CSS, procuramos pelo local onde estão os estilos da área do blogue que escolhemos para colocar a Lista (Recomendado para melhor localizar no futuro, embora possa colocar onde quiser desde que seja na parte do CSS) e colocamos junto o seguinte código:

Ver Código

---

#linklist { /* A parte visivel da lista */
    padding:5px;
    width:500px;
    height:75px;
    overflow:hidden;

}
#linklist ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
#linklist li{  /* Cada uma das secções onde aparece a imagem */
    background:#234;
    border:1px solid #456;
    display:inline;
    float: left;
    min-height:71px;
    min-width:71px;
    max-height:72px;
    max-width:72px;
    padding:3px;
    margin-right:3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius:3px;
}
#linklist a span { /* A parte com as informações referente a cada imagem, escondida por definição */
    background: none repeat scroll 0 0 #fff;
    border: 5px solid #000;
    border-radius: 20px;
    height: 70px;
    padding: 0;
    position: relative;
    width: 200px;
    color: #000;
    display: none;
}
#linklist a span:before {
    border-color: #000 transparent;
    border-style: solid;
    border-width: 15px 15px 0;
    bottom: -20px;
    content: "";
    display: block;
    left: 100px;
    position: absolute;
    width: 0;
    z-index: 1;
}
#linklist a span:after {
    border-color: #fff transparent;
    border-style: solid;
    border-width: 16px 16px 0;
    bottom: -12px;
    content: "";
    display: block;
    left: 99px;
    position: absolute;
    width: 0;
    z-index: 2;
}
#linklist a em {  /* Cada secção referente às informações de cada blgue na lista (Nome, Titulo do artigo, Data) */
    display: block;
    overflow: hidden;
    white-space: nowrap;  /* Dizemos que o texto de cada secção deve ser apresentado numa unica linha */
    width: 180px; /* Definimos uma largura, alguns pixels a menos que secção acima que envolve estas */
    margin: 2px auto;
    text-overflow: ellipsis; /* Dizemos que quando o texto ultrapassa a largura, deverá apresentar os 3 pontinhos */
}
#linklist a em:before {  /* A pequena imagem antes de cada item nas informações de cada blogue */
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAICAYAAADeM14FAAAAVUlEQVR4Xj2MQQoAIQwDs/sgT1686peEvq4v8DsFL0LWrdSBQhqSIKXEDeJebFprxOEYpRTknN30ypyTvXf+2hNmhrUWbkJEWGvlHR1jQFWfGI3H+QDvhi06/rbHiwAAAABJRU5ErkJggg==);
    margin-right:3px;
} 
#linklist a:hover span {  /* Parte do codigo que faz aparecer a caixinha com as informações ao colocar o rato encima da imagem */
    display: block;
    margin-top: -160px;
    margin-left: -70px;
    z-index:999;
    position:absolute;
    text-decoration:none;

#linklist a:hover img {  /* Só para dar um certo brilho na imagem ao passar o rato */
    box-shadow: 0 0 8px yellow;
}

Ocultar Código

Termino deixando aqui um exemplo do como fica a lista a funcionar:

DEMONSTRAÇÃO

Até Breve. :-F

Queres ler outro artigo ao calhas?